简单前端知识的笔记，html,css,js。php的话，我是学的稍微深一点，明天开始php学习
前端是构建网页的一部分，负责用户在浏览器中，看到和与之交互的内容。
网页是在浏览器中呈现内容的文档或页面，html、css、js组成。
html页面结构、css提供页面样式、js提供交互。
html，为网页提供结构。告诉浏览器，哪些是标题，段落。
HTML通过一系列的标签，来定义文本、图像、链接等。HTML标签是由尖括号包围的关键字。
标签通常成对出现，包括开始标签和结束标签，内容位于两标签之间。
<p>这是一个段落。</p>
<h1>这是一个标题。</h1>
<a herf="#">这是一个超链接。</a>
除了双标签，也有单标签，例如：
<input type="text">
<br>
<hr>
单标签用于没有内容的元素，双标签用于有内容的元素。
1 <!-- 这里放置文档的元信息 -->
2 <!DOCTYPE html> 1、2用来告诉浏览器这是一个html文件
3 <html>
4 <head>
5 <!-- 这里放置文档的元信息 -->
6 <title>文档标题</title>
7 <meta charset="UTF-8">
8 <!-- 链接外部样式表或脚本文件等 -->
9 <link rel="stylesheet" type="text/css" href="styles.css">
10 <script src="script.js"></script>
11</head>
12 <body>
13 <!-- 这里放置页面内容 -->
14 <h1>这是一个标题</h1>
15 <p>这是一个段落。</p>
16 <a href="https://www.example.com">这是一个链接</a>
17 <!-- 其他内容 -->
18 </body>
19 </html>
3、19是HTMNL文件的起始点，文档的最外层容器
head标签对，表示文档的头部，包含了文件的原信息，比如文档的标题，文档的编码格式，以及外部的样式表，css和js文件
body标签对就实际显示在浏览器中页面的内容，一些文本、图像、链接
文本标签
1.标题标签，h1到h6
2.段落标签，p
3.字体加粗，b，bold
4.斜体I
5.下划线u
6.删除线s
ul无序标签，unorder
也可以用<dl></dl>,disorder
Shift+alt+向下，向下行复制
ol为有序列表
表格标签
<table>
<tr>table row表格行
Td table data 表格数据
th列标题
在开始标签里面写一个table border="1"
HTML属性
属性在HTML中起到非常重要的作用，它们定义元素的行为和外观，以及与其他元素的关系。
基本语法：<开始标签 属性名="属性值">
每个HTML元素可以具有不同的属性
<p id="describe"class="section">这是一个段落标签</p>
<a href="https://www.baidu.com">这是一个超链接</a>
属性名称不区分大小写，属性值对大小写敏感
1<img src="example.jpg" alt="">
2<img SRC="example.jpg" alt="">
3img src="EXAMPLE.JPG" alt="">
<!--前两个相同，第三个与前两个不同>
a标签，href属性。还有target属性定义链接的打开方式
—blank，再多一个界面，——parent一个界面，——self，——top，可以根据字面意思
<br>换行
<hr>加一个下划线
<img>图片标签
src定义了文件路径或者URL。alt定义，可以写文字如图像无法现实，也可以定义长宽
HTML，区块-块元素与行内元素
块元素（block）
块级元素通常用来组织和布局页面的主要结构和内容，例如段落、标题、列表、表格等。他们用来创建页面的主要部分，将内容分隔成逻辑块
行内元素，行内元素通常用于添加文本样式或为文本中的一部分应用样式。他们可以在文本中插入小的元素，例如超链接、强调文本等
div标签是一个块级标签，通常用于创建一个可以包含其他HTML元素的容器块。通常没有任何语义，仅用于组织内容。经常用于创建页面的布局结构。如页眉，导航栏，侧边栏，中间的内容区域。
nav，navigator导航的意思。nav或者nav-bar
div标签有哪些类，
.后面跟着咱们的类名，再使用tab键就可以完成创建了。
我如果要创建一个div标签，同时要他初始附带一个id的话，#号开头。
#nav
div.nav或者是div#nav也是可以的。
content内容类，h1文章标题，p文章内容
<span>标签，这是第一个span标签。不会独占一行，只会站内容所需的宽度。
HTML表单。form标签，元素要放在其里面。
input标签有几十个属性。
type属性为最常见的属性。type属性也有十几个属性值，规定了要显示的input元素的类型。默认为text。
placeholder，请输入内容，一个提示
value，具体的值。
有账号密码提示的呢。
可以在input前加入span标签。
有专门为这个input元素做标记的标签。，作用和span标签差不多，lable。
注册时选择性别的那种呢？input时把type的值改为radio，
然后前面加入lable for
如果是要单选呢，要在后面再加一个gender属性。
第七课再听几遍，边听边敲
我们在创建lable标签时，可以有name属性。
还有就是一个for属性，for属性就是把lable标签绑定到input元素。但是这个lable的for属性，一般是对应input中的id对应。
用户名明文显示，而密码不能。
sunmit属性，input type="submit"。
form action属性向何处发送，发送给服务器。
第七课讲完，HTML也算是结束了。
CSS用于定义网页样式和布局的样式表语言。
通过CSS，来指定页面中各个元素的颜色，字体，大小，间隔，边框，背景样式，从而更加精确的页面设计。
CSS语法通常是由选择器，属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式。
1选择器{
2属性1：属性值1
3属性2：属性值2
4}
1选择器的声明中可以写无数条属性
2声明的每一行属性，都需要以英文符号结尾
3声明中的所有属性和值都是以键值对这种形式出现的
1/*这是一个p标签选择器*/
2p{
3color: blue;
4font-size:16px
5}
导入方式，一。
内部样式表，把CSS放入HTML文档的头部。
style标签。px为pixel像素的意思。
CSSz中，选中目标，ctrl+/进行注释。
三种导入方式。
内联样式>内部样式表>外部样式表
内联样式:< h1 style="color: red;">这是一个一级标题标签</h1>
外部样式表:什么什么.css
文件即可。
CSS中的选择器，用于选择要应用样式的HTML元素。
* 元素选择器，
* 类选择器，.+所需标明的元素。
* ID选择器，＃id即可
* 通用选择器，*号，选择所有元素。
* 子元素选择器，.父元素>.子元素
* 后代选择器，先后代再子代。
* 并集选择器
* 伪类选择器，鼠标放上去变色。element:hover{}
* 相邻元素选择器，会选后面的，h3 +p标签。
*
Font:符合属性。必须指定字体类型和字体大小，否则复合属性不会生效，可以省略其他属性
<p style="line-height: ">这是一段长文本，此处为line-height属性
还有height 属性和width属性
复习行内元素和块元素
块元素
行内元素
行块内元素
常见的有：
Block,inline-block,inline
盒子模型，常用于布局。
Content,盒子包含的实际内容，比如文本、图片
Padding,围绕在内容的内部，是内容与边框之间的空间，可以使用padding属性来设置
Border,围绕在内边距的外部，是盒子的边界。可以用border属性来设置。主要是用来边框的
Margin,围绕在边框的外部，是盒子与其他元素的空间。可以使用margin属性来设置
浮动：脱离标准流。一行显示，顶部对齐。具备行内块元素特性。
W100+h100，点击enter就可以直接出结果了。
定位：定位布局可以精准定位，但缺乏灵活性。
定位方式:
相对定位：相对于元素在文档流中的正常位置进行定位
绝对定位：相对于其最近的已定位祖先元素进行定位，不占文档流位置
固定定位：相对于浏览器窗口进行定位。不占据文档流，固定在屏幕上的位置，不随滚动而移动
js：javascript
是一种轻量级、解释行、面向对象的脚本语言。它主要是用于在网页上实现动态效果，增加用户与网页的交互性。
作为一种客户端脚本语言，javascript可以直接嵌入HTML，并在浏览器中执行
与HTML不同，javascript使得网页不再是静态的，而是可以根据用户的操作动态变化的。
js在前端开法中扮演者重要角色，客户端脚本，网页开发，后端开发。
Script标签可以写在head也可以写在body
直接log，entry键
<script src=""></script>，用这个来导入外部的js文件
点./来点击来选择文件路径。
alert就是会弹出一个提醒
尽量放在body中，head头会增加延迟时间
js基本语法，var也就是variable，声明一个正常的变量。let。const，一般是常量。
var变量是函数作用域，let是块级作用域。
let更见安全灵活。
Null，缺失值。
undefined表示一个变量已经被声明，但尚未被赋值。或者一个对象属性不存在。将来可能被赋值
null，被明确赋值为空或者不存在。
js控制语句，包括条件语句和循环语句。
条件语句：if、else if、else三个关键字。
if和else只能有一个，而else if可以有很多个。
循环语句，用于重复一段代码，知道指定条件不再满足为止
for循环，while循环，do while循环。
while循环，会在指定条件为真时执行条件。无限循环。
break，跳出循环，结束循环的执行
continue，用于跳出当前循环中的剩余代码，继续下一次循环。
函数，是一段可执行的代码块，它接受输入参数，执行特定任务，并返回输出
1function function_name(参数1，参数2，参数3……){//参数可以不写，表示不传参。先是用function来定义函数，后面紧接函数名。
2//函数体，执行这里的代码
3return 返回值；//可选，返回值。没有返回值可以不写return
4}
作用域，全局作用域和局部作用域，函数内部申明的变量具有局部作用域，。在函数外声明的作用域就是全局作用域。就基本是c语言中的全局变量和局部变量
事件，事件是文档或者浏览器窗口中发生的特定瞬间，例如用户的点击、键盘地按下、页面的加载等。
常见事件如下：
onClick,点击事件
onMouseQver，鼠标经过
onMouseQut，鼠标移出
onChange，文本内容改变事件
onSelect，文本框选中
onFocus，光标聚集
onBlur，移开光标
事件处理是前端开发的重要一部分。其实事件就是触发函数的一个条件，当事件发生的时候，事件就会被调用。
HTML中，通过三种方法来添加事件，
1.HTML属性
2.DOM属性
3.addEventlistener方法
DOM，当网页被加载时，浏览器会创建页面的文档对象模型，也就是DOM
每个HTML或XML文档都可以被视为一个文档树，文档树是整个文档的层次结构表示
文档节点是整个文档树的根节点
DOM为这个文档树提供了一个编程接口，开发者可以使用javascript来操作这个树状结构
DOM就是给文档树提供一个编程的接口，也就是DOM API，开发者可以通过js来操作这个树的结构。
其实我看博主做的事越来越像ctf应该干的了。
DOM属性绑事件。
DOM对象的具体类型和作用
对象的作用是为了让函数和变量之间建立联系，对象中的属性就是变量，方法就是函数。与普通的变量函数相比，区别就是在调用的时候，我们需要在这个对象的属性和方法前，加上变量名。在web开发中，DOM通常与js一起使用。
每个HTML或XML文档都可以被视为一个文档树，文档树是整个文档的层次结构表示
文档节点，也就是DOM节点，是整个文档树的根节点
DOM为这个文档树提供了一个编程接口，开发者可以使用javascript来操作这个树状结构
DOM就是给文档树提供一个编程的接口，也就是DOM API，开发者可以通过js来操作这个树的结构。
DOM中的一切都是节点，文档的本身呢，也是一个文档节点。而文档中的元素，比如HTML标签。head、body、h1、a、div、link、title等等，这些都可以称为元素节点。表示HTML文档中的元素。
<a>标签等等有href等等属性，也可以被称为属性节点。就比如像是”类“，<h1双标签>，都可以有文本节点。表示我们这元素的文本内容。
要在js中获取元素节点，我们就需要使用一些DOM api提供的方法，来获取文档中的元素。
getElementById，通过我们的id
getElementsByClassName，通过我们的类名
getElementsByName，
getElementsByTagName，通过我们的标签名
getElementsByTagNameNS，
id通常是唯一的，所以我们获取到的这个元素就是唯一的。可能一个页面不止一个div标签，所以对于类名，获取的就是数组。名字从elelment变成elements。
如果要获取数组中的某一个元素，就需要给他一个索引值。
C:\Users\31349\Desktop\practice\HTML属性.html
innerHTML把element_id.innerHTML ='<a href=""' 中的内容当HTML处理
innerText当作文本，不进行处理。
<script>
var element_id = document.getElementById('box1');
console.log(element_id);
var element_class=document.getElementsByClassName('box2')[0];
console.log(element_class);
var element_tag=document.getElementsByTagName('div')[2];
console.log(element_tag);
element_id.innerHTML='修改ID选择器标签文本内容';
element_class,innerText ='修改后的类选择文本'
</script>
这一段其实已经不做么懂了，先不管了。
练习，表格的增删改查。只能说稍微懂了一点。
- Document对象：每个载入浏览器的HTML文档都会成为Document对象。Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问。
- Element对象：可以拥有类型为元素节点、文本节点、注释节点、属性节点的子节点。
- Attribute对象：表示HTML元素的属性。
- Text对象：表示HTML标签里的内容。
- Comment对象：表示HTML中的注释。
- NodeList对象：表示节点列表，例如HTML元素的子节点集合。
- NamedNodeMap对象：表示元素属性节点的无序集合，可以通过名称或索引访
- 我不懂这个在创建网页中有鸟用，但这个和ctf确实很沾边。
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
- Node：节点对象，其他5个对象的父对象
- 水平方向上排列，但可以设置宽度、高度、内外边距等块级元素的属性
- 行块内元素可以包含其他行内元素或块级元素
- 行内元素通常在同一行内呈现，不会单独占据一行
- 他们只占据其内容所需的宽度，而不是整行的宽度
- 行内元素不能包含块级元素，但可以包含其他行内元素
- 块元素，块级元素通常会从新行开始，并占据整行的宽度。
- 可以包含其他块级元素和行内元素
- 行内元素通常在同一行内呈现，不会单独站一行
- 他们只占据其内容所需的宽度，而不是整行的宽度
- 行内元素不能包含块级元素，但可以包含其他行内元素
- 常见的行内元素包括<span><a><strong><em><img><br><input>等等
- 块级元素通常会从新行开始，并占据整行的宽度，因此他们会在页面上呈现为一块独立的内容块
- 可以包含其他块级元素和行内元素
- 常见的块级元素包括<div>,<p>,<h1>到<h6>,<u1>，<ol>,<li>,<table>,<form>等