1、安装HTML编辑器
Hbuilder：https://download1.dcloud.net.cn/download/HBuilderX.3.3.10.20220124.zip（Windows版本）
2、HTML的正式学习
2.1、什么是HTML
HTML（超文本标记语言），是一种描述网页的语言，之所以被称为“超文本”，是因为其内部可有文本，图片，视频，音乐等多种内容。
HTML是一种标记语言而不是编程语言，它是一套标记标签，用标记标签来描述网页，不需要对机器发出一系列复杂指令。
2.2、HTML标签
HTML标记标签被称之为HTML标签，它是由尖括号<>包围的关键词。
HTML标签可分为单标签和双标签，而单标签与双标签都可以分为有属性和无属性两种。
HTML双标签是指成对出现的标签如<b>(开始标签）</b>（结束标签）。
无属性单标签如换行标签<br>，有属性单标签如水平线标签<hr>在其内部可添加颜色宽度搞定等属性。双标签有无属性与单标签类似。
2.3、HTML网页结构
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body></body></html>1、声明为HTML5文档<！ＤＯＣＴＹＰＥ ｈｔｍｌ>
２、页面用＜ｈｔｍｌ＞＜／ｈｔｍｌ＞包裹
３、头部元素<head></head>，<meta charset="utf-8" />定义网页编码格式为ｕｔｆ－８，<title></title>定义文档标题
４、可见的页面内容<body></body>
３、ＨＴＭＬ常用标签（一）
３.１、标题标签
<ｈ１＞＜／ｈ１＞标题分为６级，ｈ１到ｈ６，数字越大标题越小，自带加粗功能。能自动换行，属于块级标签。
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>这是一个HTML网页</title></head><body><h1>这是一个标题</h1><h2>这是一个标题</h2><h3>这是一个标题</h3><h4>这是一个标题</h4><h5>这是一个标题</h5><h6>这是一个标题</h6></body></html> 
不要为了加粗效果多次使用ｈ１标题，因为ｈ１标题可以被搜索引擎索引，如果一个网页ｈ１标题过多，可能会被拉黑。一般一个网页用一个ｈ１标题
３.２段落标签
＜ｐ＞＜／ｐ＞，会自动换行，为块级元素。
<p>这是第一个段落</p><p>这是第二个段落</p>
３.３、换行标签
我们在ｈｔｍｌ中写入两行文字，ｈｔｍｌ一般是不会换行的，如：
ｈｅｌｌｏ
ｗｏｒｌｄ
在HTML中是一行的，因此就需要换行标签＜ｂｒ＞
第一行<br>第二行 
３.４、水平线标签
＜ｈｒ＞＜／ｈｒ＞，常用属性：颜色ｃｏｌｏｒ，粗细ｓｉｚｅ，长度ｗｉｄｔｈ（可用百分比％或像素ｐｘ表示），对齐方式ａｌｉｇｎ。
<hr color="aqua" size="3" width="50%" align="left">
３.５、列表
ｕｌ（无序列表）类型默认为实心圆（ｄｉｓｃ），可修改为空心圆（ｃｉｒｃｌｅ），方块（square）
<ul type="square"><li>张三</li><li>李四</li></ul><ol type="a"><li>张三</li><li>李四</li></ol>
ｏｌ（有序列表）默认类型阿拉伯数字，可修改为大小写字母，希腊数字
３.６、ｄｉｖ与ｓｐａｎ
３.６.１、ｄｉｖ
ｄｉｖ为块级元素，通常与ｃｓｓ结合用于网页布局。能够将网页分成一个个部分。
默认占全部宽度，有多少内容占多少高度，也可设置其宽高（前面要有ｓｔｙｌｅ），ａｌｉｇｎ可设置内容对其方式。自带换行。
<div style="width: 500px;height: 100px;"align="center">这是一个div</div>111
可在元素中看见具体信息，蓝色为定义ｄｉｖ块
３.６.２、ｓｐａｎ
行内元素，不会自动换行，自动计算宽高，不能自定义。
<span>这是一个span</span>111
蓝色为ｓｐａｎ
３.７、格式化标签
３.７.１、ｆｏｎｔ标签
定义文本颜色ｃｏｌｏｒ，大小ｓｉｚｅ，字体类型（楷体）ｆａｃｅ。
<p><font color="aqua" size="5" face="楷体">将来的你一定会感谢现在吃苦的自己</font></p>
３.７.２、ｐｒｅ标签
预格式化标签，保留空格与换行
一般英文句子中单词间有多个空格时会被处理为一个空格，换行会被省略，用ｐｒｅ就可以保留空格与换行。
加粗ｂ，倾斜ｉ，下划线ｕ，中划线ｄｅｌ，下标ｓｕｂ，上标ｓｕｐ
<pre>hello world我们是</pre></body>
注意：前面的ｔａｂ也会保留
<p><b>将来的</b><i>你</i><u>一定会感谢现在吃苦</u><del>的自己</del></p>
４、HTML常用标签（二）
４.１、ａ标签
ａ标签用于定义超链接（最重要ｈｒｅｆ属性），或者用于当锚点（ｎａｍｅ属性）
ｈｒｅｆ属性，选择跳转位置（ＵＲＬ网址），＃为本页面，相当于刷新。
ｔａｒｇｅｔ属性（如何跳转），＿ｂｌａｎｋ（重新打开一个页面），＿ｐａｒｅｎｔ，＿ｓｅｌｆ（在本页面打开一个页面，覆盖一下，按⬅可以返回原页面），＿ｔｏｐ。ｂｌａｎｋ与ｓｅｌｆ较为重要。
<a href="http://www.baidu.com/" target="_blank">点一下进入百度页面</a>
作为锚点，ａ标签的ｎａｍｅ属性值＜ａ ｎａｍｅ＝＂ｔｏｐ＂＞＜／ａ＞，其他ｉｄ的属性值＜ｄｉｖ ｉｄ＝＂ｔｏｐ＂＞＜／ｄｉｖ＞，锚点使用＜ａ ｈｒｅｆ＝＂＃ｔｏｐ＂＞＜／ａ＞
点击星宿说即可定位到文章中锚点位置，如果用ａ则用ｎａｍｅ＝“”用其他的ｄｉｖ就用ｉｄ如图一所示，这相当于给文字添加了一个可以定位的坐标（标签0）
４.２、图片
ｉｍｇ标签用以向网页嵌入一幅图像。实际上是在网页链接上图像。
也可定义宽ｗｉｄｔｈ，高ｈｅｉｇｈｔ。边框ｂｏｒｄｅｒ，鼠标移动到图片所显示的文本ｔｉｔｌｅ，如何排列图像ａｌｉｇｎ
<img src="img/星空.jpg" alt="图片损坏" width="500" height="400" border="2" title="星空">
４.３、表格
table定义HTML表格
ｔｄ定义标准单元格
ｔｈ定义表头，默认居中粗体，ｔｄ默认左对齐普通文体
ｔｒ定义行，一行可有多个ｔｈ或ｔｄ
常用属性：对齐方式ａｌｉｇｎ，边框宽度border，表格宽度ｗｉｄｔｈ
ｔｒ常用属性：对齐ａｌｉｇｎ，背景颜色ｂｇｃｏｌｏｒ（ｒｇｂ（，，），＃ｘｘｘｘｘｘ，ｃｏｌｏｒｎａｍｅ）
style="border-collapse: collapse;"合并表格边框
<table border="1" align="center" style="border-collapse: collapse;"><tr><th>name</th><th>gender</th><th>age</th></tr><tr bgcolor="yellow" align="center"><td>a</td><td>man</td><td>18</td></tr><tr><td>b</td><td>woman</td><td>19</td></tr><tr><td>c</td><td>man</td><td>20</td></tr></table>
514
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
