![f6f43d4d3fd71b8342dc65644703e735.png](https://i-blog.csdnimg.cn/blog_migrate/f47cea73b21b808a746d6c9a612e12d4.jpeg)
主要内容
- 标题标签
- 段落标签
- 强制换行
- 水平线
- 图片
- 超链接
- 文本格式化标签
- 列表
- 表格
学习目标
![2e783acdf076963ea5fbc32ac6948c32.png](https://i-blog.csdnimg.cn/blog_migrate/0fc2c7a43b63a500bf41051e27b79225.jpeg)
一、标题
标题(Heading)是通过 <h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。
![b593e752a0972b30442598d69f05b96c.png](https://i-blog.csdnimg.cn/blog_migrate/99c95c4293123d823d26934635a9a66c.png)
标题很重要
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。
二、段落
段落是通过 <p> 标签定义的。
![3acafa3e87d155caaf3bd486e6c8bb0f.png](https://i-blog.csdnimg.cn/blog_migrate/5ffdabdec148ac9f004d39a3692cd013.png)
三、换行
如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br> 标签:
<br /> 元素是一个空的 HTML 元素。
![41f65ac799d933ad5d893ebc8c1e755d.png](https://i-blog.csdnimg.cn/blog_migrate/4feba72dcf899f789056c8bd30d96ead.png)
四、水平线
<hr/> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
![363337be93e36dda7603524d6cc6372d.png](https://i-blog.csdnimg.cn/blog_migrate/810c13d65f5d183336674040e1d6274a.png)
属性:
color:设置水平线的颜色
width:设置水平线的长度
size:设置水平线的高度
align:设置水平线的对齐方式(默认居中),可取值left|right
![0a6aa676561ff4365a1be16f3168c5b8.png](https://i-blog.csdnimg.cn/blog_migrate/3642810aa7b29516d600ff67686d0727.png)
五、图片
<img> 标签定义 HTML 页面中的图像。
![3ce23a91809350a677cbdea7288fcbb8.png](https://i-blog.csdnimg.cn/blog_migrate/34da2e413c08d89aec63ecc363557263.png)
属性:
Src:路径(相对路径、绝对路径)
Alt:规定图像的替代文本。
Width:规定图像的宽度。
Height:规定图像的高度
Title:鼠标悬停在图片上给予提示
六、超链接
HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下,链接将以以下形式出现在浏览器中:
(1)一个未访问过的链接显示为蓝色字体并带有下划线。
(2)访问过的链接显示为紫色并带有下划线。
(3)点击链接时,链接显示为红色并带有下划线。
注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。
![c4ded0ecfe315d2949cd835e134439c2.png](https://i-blog.csdnimg.cn/blog_migrate/9f89e3d7ca72480c2d3347862e0af4a0.png)
七、文本格式化标签
![29d60cbca01c0074c88acd6a4223a037.png](https://i-blog.csdnimg.cn/blog_migrate/9f5b0d4579f30ff1f36c326f5eb3083c.jpeg)
![dee1c27443890482fcc8b92f3b5147aa.png](https://i-blog.csdnimg.cn/blog_migrate/b00e09d522d1db0409d024082067153a.jpeg)
效果如下:
![fa168a6a59c3586a4722ea9aa78220cc.png](https://i-blog.csdnimg.cn/blog_migrate/5fbc5245cb2d69ff2562d6039cd23ba6.png)
八、列表
8.1无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表使用 <ul> 标签
![5f943f53dded79144d050ece25da1991.png](https://i-blog.csdnimg.cn/blog_migrate/deb06e6940adee23e780ad0cac474c11.png)
浏览器显示如下:
![a5b942b06f4aec027962d0fdb9fdfc20.png](https://i-blog.csdnimg.cn/blog_migrate/1d33be2ecb11beb34b501c662172ea54.png)
<ul><li>的属性type 拥有的选项
disc 默认实心圆
circle 空心圆
square 小方块
none 不显示
![e570d4faf0608336e8b34bb40aca531d.png](https://i-blog.csdnimg.cn/blog_migrate/26e79e35964852b5403eb738eab39442.png)
![08e5594f57c60066b84d3ee349591b49.png](https://i-blog.csdnimg.cn/blog_migrate/bf3644f644acc8c61c3f4d1a377dcfab.png)
![3260612e4bd8a37c189984ac154f1d7b.png](https://i-blog.csdnimg.cn/blog_migrate/77e7e15524dd15964274641c7103fb9b.png)
8.2有序列表
同样,有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项使用数字来标记。
![874d30ce20413e36057e688f4211e311.png](https://i-blog.csdnimg.cn/blog_migrate/f138876a7d7e4d98c7d329f5ac0725ce.png)
浏览器中显示如下:
![ed9eebfacbe8769eefe7b362d84df28c.png](https://i-blog.csdnimg.cn/blog_migrate/54616c269fa8ec6f9e2f2cf8f2211911.png)
<ol><li>的属性type 拥有的选项
1 表示列表项目用数字标号(1,2,3...)
a 表示列表项目用小写字母标号(a,b,c...)
A 表示列表项目用大写字母标号(A,B,C...)
i 表示列表项目用小写罗马数字标号(i,ii,iii...)
I 表示列表项目用大写罗马数字标号(I,II,III...)
![5f10eacbd5a1f2d933de49b1d5448a87.png](https://i-blog.csdnimg.cn/blog_migrate/50857a129c4dd240b1c511ea190c7b32.png)
![511830c5d38c8899424ad03f306e0501.png](https://i-blog.csdnimg.cn/blog_migrate/8c9122d523734edbdb40b77800e4abcf.png)
![57c5ad9b1e631969addedaec4fd0696f.png](https://i-blog.csdnimg.cn/blog_migrate/a12d5f67cf0828e67561ab72e85ff913.png)
![c394021dc8db34d79006ce09bf8915c2.png](https://i-blog.csdnimg.cn/blog_migrate/441ba7c52c1c5093c413b06b97190bde.png)
8.3自定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
![a84963954b5007c0edd26f40358a5564.png](https://i-blog.csdnimg.cn/blog_migrate/df15dfec69077f00407213d67418d378.png)
浏览器显示如下:
![9b8c9fc1bc5d15d42b35f0d3930387e4.png](https://i-blog.csdnimg.cn/blog_migrate/e04ea1f845dd5eac8179f8b3d07e5b4f.png)
8.4本节作业
![d9c54524fd0807ba031f1b02389ff9e9.png](https://i-blog.csdnimg.cn/blog_migrate/5db2a22ef1de236b846e4c66dd0b84e9.png)
![9a7cb012a84d71f258a5ce3c6f200d2b.png](https://i-blog.csdnimg.cn/blog_migrate/668a86f2d4059a48bcda288bf558ff8a.jpeg)
九、表格
表格在数据展示方面非常简单,并且表现优秀,通过与CSS的结合,可以让数据变得更加美观和整齐。
行、列、单元格 单元格特点:同行等高、同列等宽。
![1c051ffbbc858b2d0480e5dd6282ca43.png](https://i-blog.csdnimg.cn/blog_migrate/4394ff123e8cd1a661184157e38d26a0.png)
表格的基本语法:
![28ac905062ca2e678b9f07ecea89a78e.png](https://i-blog.csdnimg.cn/blog_migrate/b1abf27288eec615f5a478099eff0228.jpeg)
创建一个3行3列的表格:
![824da0ae17f97a1bbc9376eca869438e.png](https://i-blog.csdnimg.cn/blog_migrate/a58a0203e7d0275c9219b739f2cc501e.png)
![7ac99e1e0f1decd85053fb5fe7360e92.png](https://i-blog.csdnimg.cn/blog_migrate/c63581e172fd529217a2f64301a790a2.png)
![e01cf31c946bb66f48a61ca301ede2d6.png](https://i-blog.csdnimg.cn/blog_migrate/bc9e4e7953ee1729d4d0dbd6891c59ca.png)
单元格中内容的填充间距通过cellpadding(默认1px)属性来设置;
单元格与单元格之间的间距通过cellspacing(默认1px)属性来设置。
![f25159bf1a2015aa9a8a58512bd4e09d.png](https://i-blog.csdnimg.cn/blog_migrate/ac7058c70ebf501a91f369c23d44edd1.jpeg)
设置单元格的填充间距为10,单元格之间的间距为0,红色边框
![bab881bab8eef50ff5103de355be7c18.png](https://i-blog.csdnimg.cn/blog_migrate/8100311543534ed9dccabf4a40a1cc86.jpeg)
![1e4eee541c7c5a194897f08269993f7d.png](https://i-blog.csdnimg.cn/blog_migrate/8ed97925092c6351e39cdd0f12e05339.png)
![5c5dc29b7895723b6fae468e6e3c3c88.png](https://i-blog.csdnimg.cn/blog_migrate/dc59ee6c338ff47b2e23ed505ac2eaf8.png)
一般表格的第一行是标题,并且是文本居中、加粗,将td换成th。
而某些数据需要居中,但不希望加粗,可以给td添加align="center"
![23421d09f0e45dd2d75a7139e8f69ee5.png](https://i-blog.csdnimg.cn/blog_migrate/4016a947c51bbb0b6c5990da4626142f.jpeg)
![165aad74c2edcab31a716b01f719ce40.png](https://i-blog.csdnimg.cn/blog_migrate/b4dd11ff5973e637604f0a7cf3ca334b.jpeg)
表格的跨行跨列
有时,表格的结构并没有那么简单,可能会存在跨行和跨列的情况:
跨行:
![09e1a2d003f1b87284f3fe9d44d18c29.png](https://i-blog.csdnimg.cn/blog_migrate/94ced75d9ac9dd1f55db905384b973ad.png)
跨列:
![ab48b80056ed4811f54a6621eaa0c9fe.png](https://i-blog.csdnimg.cn/blog_migrate/f1487359762a753ee7db7c17ab7a310e.png)
跨行、跨列并存:
![1ffefa49250099cb727b4366458c289b.png](https://i-blog.csdnimg.cn/blog_migrate/598d623cfd6a1ed079d665a449c25f54.png)
这个问题看似很复杂,其实很简单,在制作跨行和跨列的表格时,只需按照如下步骤就可以轻松搞定!:
首先做一个完整的表格:注意虚线部分,最终去掉这些虚线就是我们要的效果
![273850ccdf464125795b7fda4f650ff7.png](https://i-blog.csdnimg.cn/blog_migrate/f6c3a74ecfeee53689647ea7a785312f.png)
找出最左上角那个“侵占”其他单元格的单元格,如下图标注数字的位置
![6d74a13efac10b5d1fdaff881d8e9d98.png](https://i-blog.csdnimg.cn/blog_migrate/f5a2782a860804a579d940f1483f0d5a.png)
观察这个单元格“侵占”的是行还是列,算上自己总共是几个?(行数用r表示,列数用c表示):
如果是行:在这个单元格上添加 rowspan="r"
如果是列:在这个单元格上添加 colspan="c"
如果既有行又有列:在这个单元格上添加 rowspan="r" colspan="c"
把“被侵占”的单元格删掉,删除顺序:从右向左,从上至下,否则很容易出错!
按以上步骤完成一个跨行跨列的表格:
![407df3e9692665c87b9ad4f3d8678fb9.png](https://i-blog.csdnimg.cn/blog_migrate/f475f48be34128af8a55c93f7bcc4f28.png)
![19e047fd5eac0622935d1f3e977d2d54.png](https://i-blog.csdnimg.cn/blog_migrate/2b285f7ee64ab04a8a59d44169186a02.png)
![eb5d8d76d83c465831b291c9a2a8786e.png](https://i-blog.csdnimg.cn/blog_migrate/55d1829ec79a705cf45f1f4f22372675.png)
本节作业
![38ce006ed0f4387cf9483dbf167debba.png](https://i-blog.csdnimg.cn/blog_migrate/715a6aae5ef68c497375380036d895d4.png)
![eafe3e7615465b25edb79660d2ed87d4.png](https://i-blog.csdnimg.cn/blog_migrate/cbfb80e5e4e262d8bcfe2c3ec6493008.png)
![00ac0800026269698cfcad20fe04b2e0.png](https://i-blog.csdnimg.cn/blog_migrate/1ccbfed3f761106c7de2f2cff8880ff6.png)
![d54e38a20965c356598426e3bd8a42d8.png](https://i-blog.csdnimg.cn/blog_migrate/df5b0b5c35d6be58cfcf5266adfa224f.png)