目录
一、 HTML的元素组成
（1）组成结构：
<!DOCTYPE html> <!--声明为HTML5文档-->
<html> <!--HTML元素是HTML页面的根标签，也是双标签-->
<head><!--head元素包含了文档的元（meta）信息，如meta charset=utf-8-->
<meta charset="UTF-8"> <!--定义网页的编码格式为UTF-8即为打开文件读取的编码格式为UTF-8-->
<title>莎莎学HTML和CSS</title> <!--描述文档的标题-->
</head>
<body><!--包含了可见的页面内容-->
主体内容
</body>
</html>（2）HTML中包含有双标签和单标签：
1.成对出现的即为双标签：
例如：<html></html> <head></head> <body></body>等。
双标签可分为两类：
包含关系：<html> <head></head> </html>
并列关系：<head></head> <body></body>
2.不是成对出现的及为单标签或称为空标签：
例如：输入标签<input /> 换行标签<br /> 水平线标签<hr />等。
二、 HTML中的标题标签
标题标签从<h1></h1>到<h6></h6>，标题一共六级选，文字加粗一行显，由大到小依次减，从重到轻随之变。语法规范书写后，具体效果刷新见。
三、 HTML中的换行和段落标签
段落标签：<p></p>
换行标签：<br /> 为单标签
水平线标签：<hr /> 为单标签
使用段落标签可以使得两段文字之间间隔较大，使用换行标签，两行之间距离较近。
四、HTML中文本格式化标签
文本格式化标签主要是为了强调文字重要性，主要包含了以下几种：
加粗标签：<strong></strong>或<b></b>
倾斜标签：<em></em>或<i></i>
删除线：<del></del>或<s></s>
下划线：<ins></ins>或<u></u>
右上角标：<sup></sup>，多数用于数学表达式，例如勾股定理：a平方 + b平方 = c平方：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
右下角标标签：<sub></sub>，多数用于化学公式的表达。例如水的化学公式：H<sub>2</sub>O<br>
五、 HTML中的img图像标签
（1）img图片标签中的src属性：本地图片/网络图片
- src属性相对路径引入：
./或直接写img.jpg在本级目录以后或本级目录
../图片在上级目录及为在网页的前级目录
../../图片在上上级目录及为在网页的前级目录的前级目录
- src属性绝对路径引入：
从盘符开始的路径直接进行复制粘贴。如：E:\前端学习\案例\img\img.jpg 或E:/前端学习/案例/img/img.jpg也可以
如果文件中没有写盘符，那么默认的就是文件所在的盘符 如：\前端学习\案例\img\img.jpg
- 网络图片都为绝对路径,不可改变/方向。 如：https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F911%2F0ZG6133S0%2F160ZG33S0-6-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654748141&t=3c2cf58d0a92cea57ea29ebfc3001db0
- img标签的alt属性：当网络加载失败或没有网络或图片找不到时，显示的文本内容。
- img标签的title属性：提示文本，鼠标放到图片上，提示的文字。
- img的width，hight的属性是改变图片宽和高的属性，宽度高度任选其一会进行等比例缩放。
- border 设置图像边框，直接为border=”边框宽度”。
六、 HTML中的a标签-超链接标签
（1）a标签就是超链接标签，它是一个双标签，也是实现跳转链接的标签。<a></a>
1、href属性：跳转链接的地址
herf可跟绝对路径也可跟相对路径、可以跟网络资源路径也可跟本地路径。
2、target属性：
①规定在何处打开新的链接文档：_blank
②默认是当前页面打开：_self
③顶级窗口：_top
④父窗口：_parent
（2）超链接的特点：
1、有下划线
2、鼠标停留在超链接上面显示小手形状
3、点击超链接后可进行跳转页面
（3）超链接的作用：
1、通过超链接可以从浏览器向服务器发送请求，
2、浏览器向服务器发送数据（请求：request）
3、服务器向浏览器发送数据（相应：response）
（4）B/S结构的系统，每一个请求都会对应一个响应
B ------请求-----> S
S ------响应-----> B
（5）用户点击超链接和用户在浏览器地址上直接输入URL,有什么区别？
1、本质上没有区别，都是向服务器发送请求。
2、从操作上来讲，超链接使用更方便。
（6）base标签的target属性设置所有标签打开的位置，并且base标签是在head标签里面进行编写设置。
（7）锚点：在本网页中进行跳转
a标签中href属性值的构成: #号+id 属性值，如下所示:
<a href="#hot">火爆商品</a>
<h2 id="hot">火爆商品</h2>
1、<h1 id="top"></h1>
<a href="#top">返回顶部</a>
2、<a name="top"></a>
<a href="#top">返回顶部</a>
七、 HTML中的特殊符号表示
所有实体符号的特点：以&开始，以;结尾。
HTML 原代码 显示结果描述
< < 小于号或显示标记。
> > 大于号或显示标记。
& & 可用于显示其它特殊字符
" " 引号
® ® 已注册
© © 版权
™ ™ 商标
¥¥ ¥ 人命币
  半个空白位
  一个空白位
不断行的空白
文件当中按的空白键在页面上只能识别一个，若要多个空格则需要使用特殊符号来表示。
八、 HTML中的表格
（1）table：表示一个大的表格
1、border属性：设置表格的边框为多少的像素宽度。 如：border="1px"
2、width属性：设置表格宽度。 可设置为占页面的60%，也可直接设置像素大小10px
3、height属性：设置表格高度。 可设置为占页面的60%，也可直接设置像素大小10px
4、align属性：对齐方式 align="center"一整个表格居中
（2）tr：表示一行
align属性：对齐方式 align="center"一整行居中
（3）td：表示一列
align属性：对齐方式 align="center"一整列居中
（4）文字居中直接用标签 <center></center>
（5）单元格合并、以及th标签：
1、注意事项：
①列合并/rowspan合并的时候，删除“下面的”单元格
②行合并/colspan合并的时候，删除哪一个单元格都可以，对删除哪个没有要求。
2、th标签也是单元格标签，比td多的是：文字居中加粗
（6）表格的thead、tbody、tfoot在table中不是必须的、只是这样做便于后期的JS代码的遍写。
九、 HTML中的背景颜色和背景图片
（1）bgcolor属性：设置背景颜色
（2）background属性：设置背景图片
以上两个的设置都是对背景进行设置。
十、 HTML中的列表
HTML中分为有序列表和无序列表：
1、有序列表：有序序列type选择有A\a\Ⅰ\1等四种。
<ol type=”A”>
<li> li为列表项
<ol type=”a”>
<li></li> 可进行重复嵌套为多个有序列表。
</ol>
</li>
</ol>
- 无序列表：无序列表有圆圈：circle\方块：square\黑点：disc等三种。
<ul type=”circle”>
<li> li为列表项
<ul type=”square”>
<li></li> 可进行重复嵌套为多个无序列表。
</ul>
</li>
</ul>
十一、 HTML中的表单
（1）表单有什么用？
1、收集用户信息，
2、表单展现之后，用户填写表单，点击提交按钮提交数据给服务器。
（2）怎么画一个表单？
使用form标签画表单。
（3）一个网页当中可以有多个表单form
（4）表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址：
1、action属性用来指定数据提交给哪个服务器。
2、action属性和超链接中的href属性一样，都可以向服务器发送请求（request）
（5）http://192.168.111.3:8080/oa/save这是请求路径，表单提交数据最终提交给：
192.168.111.3机器上的8080端口对应的软件。
（6）表单中的属性：
1、action="url"即为表单提交数据给到的服务器地址
2、画一个提交按钮，这个按钮可以提交表单
3、画按钮可以使用input输入域，type="submit"的时候表示该按钮是一个提交按钮，具有提交表单的能力。
（7）input输入框的type类型不能随便写：
1、text：是一个文本输入框
2、password：密码输入框
3、checkbox：就是一个复选框
4、radio：就是一个单选按钮，单选按钮的value必须手动指定，加入checked显示默认选中
5、submit：具备提交表单的按钮
6、bottom：就是一个普通按钮，不具备提交表单的能力
7、reset：清空表单里输入框的内容
8、input中的value值：
对于按钮来首value的属性用来指定按钮上显示的文本，没有设置的话默认为“提交”两个字
- file控件：文件上传专用
- type="hidden"为隐藏域：网页上看不到，但是表单提交的时候数据会自动提交给服务器。
①hidden在页面上不显示，但是提交表单后数据会跟着一起提交，
②若是get方法提交，会显示在地址栏上，
③若是post提交的情况下也同样不显示，但是也会提交数据。
3. 使用maxlength控制输入长度，maxlength设置文本框中可输入的字符数量。
12、input输入框标签中的readonly和disabled相同点，都是只读不能修改，但是readonly可以提交数据给服务器，disabled数据不会提交（即使有name属性也不会提交）
<input type="text" name="usercode" value="1011" readonly />
<input type="text" name="username" value="liusha" disabled />
- 没有放在表单内部，放在外面的内容是不提交的，放在表单里面的内容才会提交。
- 超链接和表单都可以向服务器发送请求，只不过表单发送请求的同时可以携带数据。
（11）没有name输入数据不会提交，有了name数据才可进行提交
1、表单是以什么格式提交数据给服务器的？
https://localhost:8080/jd/login?username=123&userpwd=123
格式： action?name=value&name=value&name=value&name=value...
W3C的HTTP协议规定的，必须以这种格式提交给服务器。
（12）重点强调：表单上写了name属性的，一律会提交给服务器，不想提交这一项，就不要写name属性。
（13）文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。若提交的数据框用户没有输入值，则提交空白意思就是提交空的字符串：String s = "";
（14）当name没有写的时候，该项不会提交给服务器，但是当value没有写的时候，value的默认值是空字符串""，会将空字符串提交给服务器。java代码得到的是：String username = "";
（15）submit也必须放到form标签内部，才可进行提交数据。
（16）reset必须放到form标签内部，才可进行清空。
（17）form表单method属性：
1、get：采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
2、post：采用post方式提交的时候，用户提交的信息不回显示在浏览器的地址栏上。
3、当用户提交的信息含有敏感信息，例如密码，建议采用post方式提交。
4、method属性不指定，或者指定get，这种情况下都是get。
5、只有当method属性指定为post的时候才是post请求。剩下的所有请求都是get请求。
6、post提交的时候提交的数据格式和get还是一样的，只不过不在地址栏上显示出来。
7、post提交的数据还是：name=value&name=value&name=value....
（18）select为一个下拉列表进行选择，multiple="multiple"支持多选 size=”2”:显示两条数量，size设置显示条目数量，最后提交name=value，选项为option标签，默认选中使用selected。（19）textarea标签为文本域标签：rows为多少行，cols为多少列,文本域没有value属性，用户填写的内容就是value值。
（20）超链接是get方式请求，不是post方式请求：
1、超链接也可以提交数据给服务器，但是提交的数据都是固定不变的。
2、超链接与表单的区别在于表单用户可以进行输入数据，而超链接的数据是写死的，用户无法进行改变。
十二、 HTML中的id属性
（1）在html文档当中，任何元素（结点）都有id属性，id属性是该节点的唯一标识，所以在同一个html文档当中id值不能重复。
（2）注意：表单提交数据的时候，只和name有关系，和id无关。
（3）id有什么用？
1、JavaScript语言，可以对html文档中的任意结点进行增删改查操作。
2、JavaScript可以对html文档当中的任意结点进行增删改，那么增删改之前需要先拿到这个结点，通常我们通过id来拿结点对象。
3、id的存在让我们获取元素（结点）更方便。
（4）html文档是一棵树，树上有很多结点，每一个结点都有唯一的id。
1、JavaScript主要就是对这棵DOM树上的结点进行增删改的。
2、DOM（Document）树。
（5）id就是结点的身份证号码，不能重复。
十三、html中的div和span标签
（1）div和span是什么？有什么用？
1、div和span都可以称为“图层”
2、图层的作用是为了保证页面可以灵活的布局。
3、图层就是一个一个的盒子，div嵌套div就是盒子嵌套盒子
4、div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
（2）其实最早的网页是采用table进行布局的，但是table不灵活，太死板。现代的网页开发中div布局使用最多，几乎很少使用table进行布局了。
（3）div和span的区别？
1、div独占一行（默认情况下），
2、span不会独自占用一行
<div id="div01">
<div id="div02">
<div id="div03">三层div嵌套</div>
</div>
</div>
5316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
