一、HTML是什么？
1.html是一种超文本标记类语言，不同于编程语言。同时网页作为html文件存在，故可以认为浏览器是打开的工具。
其中元素指：开始标签+内容+结束标签
2.浏览器内核：将网页以页面的形式显示出来
Web标准构成分为结构、表现和行为其
结构 对元素进行整理和分类（用HTML完成） 表现 版式、大小等外观样式（用CSS完成） 行为 同用户的交互（JavaScript完成）
二、基本格式
1.标签的基本属性
a.单、双标签
标签大多都成对出现：<html></html>
同时也存在单标签：<br />
b.标签间的关系：包含与并列
c.基本结构：
<!DOCTYPE html> <!--文档类型声明，告知以什么版式显示（doc）-->
<html lang="en"> <!--定义文档显示的语言，en为英语，ch-CN为中文（但不影响浏览器中正文内英文的
使用）-->
<head>
<meta charset="UTF-8"> <!--在head标签中，规定使用哪种规定的字符编码-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document<!--此处为网站上面显示的文字--></title>
</head>
<body>
<!--此处为正文内容-->
</body>
</html>2.标签细分
| 标题标签 | <h1>~<h6>,且重要性依次递减 |
| 段落标签 | <p> 段落间会有空格，需辨明同br的区别 |
| 换行标签 | <br />强制换行 |
3.文本格式化标签
| strong | 加粗 |
| em | 倾斜 |
| del | 删除线 |
| ins | 下划线 |
| div | 将作为盒子保存元素（独占一行） |
| span | 将作为盒子保存元素（一行可以放多个） |
4.图像标签
1.src（必须属性）
<img src="..." />链接图片2.alt
<img src="..." alt=" " /> 链接图片，若图片无法加载，显示alt中的文字<img src="..." title=" " /> 在图片上显示title中的文字4.width,height,border:宽度、高度、边框粗细用法同上
此外，有两个名词解释
1、目录文件夹：指保存一系列元素的文件夹
2、根目录：打开目录文件夹的第一层
5.路径
路径共分为两部分
绝对路径：在磁盘中的位置或网站链接的位置
相对路径：需依照被引用文件同本HTML文件的相对位置而分为3个部分
此处为图片相对于文件的位置
| 相对路径分类 | 符号 | 说明 |
| 同一级 | <img str="---" /> | |
| 下一级 | / | <img str="所在文件夹名/---" /> |
| 上一级 | ../ | <img str="../---" /> |
6.超链接标签
1.基本格式
<a href=" ",target="">链接名</a>其中href为该类标签的必须属性，作用为输入链接
target指定链接的打开方式，默认为_self在本页面打开,_blank为在新页面打开
2.链接形式
| 外部链接 | <a href="https://www.----"></a> |
| 内部链接 | <a href="文件名"></a> |
| 文件链接 | 链接中为文件(exe)或压缩包，则点击下载 |
| 网页元素链接 | <a href="https://www.---"><img src="--"></a> |
还有锚点链接，是点击链接移动到页面的某个位置
1.在要跳转的链接处:<a href="#名字">--</a>
2.在要跳转的位置处:<id=名字> (此处id应穿插于标签之中，而非单独声明)
(如果要跳转的位置有其他标签，则在<a>中写id)
7.注释
形式为:<!----> 在四个-的中间写的字符均为注释
vscode的快捷键为ctrl+/
8. 特殊字符
| 空格 |   |
| < | < |
| > | > |
实际要求有几个就写几次
三、表格
1.主要作用
表格主要用于数据的展示，而非布局页面
2.基本语法
<table> <!--是用于定义表格的标签-->
<tr><td></td> </tr> <!--td定义单元格，几个单元格就在tr中写几个td-->
<tr><td></td> </tr> <!--tr定义表格中的行，是必须的元素-->
<th></th> <!--th的意思为将单元格内的元素加粗并居中对齐-->
</table>其基本语法中为包含关系，即table包含tr，tr包含td
3.表格标签（td中可以包含无数其他的标签）
a.表格结构标签
<thead></thead>定义表格的头部
<tbody></tbody>定义表格的身体
使用该类标签可以让结构更加的清晰，但对代码本身而言并无影响
b.合并单元格的标签
跨行合并: rowspan="合并单元格的个数"
跨列合并: colspan="合并单元格的个数"
c.表格的标题
在table之下运用<caption></caption>可以定义一个表格的标题
d.居中对齐标签
<th></th>让该单元格的元素居中并加粗
e.单表格的标签
cellpadding表示表格元素的内边距
/* 两个标签均在table标签中引用 (无px单位)*/
cellspacing表示表格元素间的距离
f.背景及美化标签
1.可以在table或者td标签中直接书写相关的标签
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
一定注意，表格的背景颜色标签就是！bgcolor！
</tr>
<tr>
<td
background="#">
Second</td>
<td>Row</td>
</tr>
</table>2.直接进行排列
直接用align进行左中右排列
<th align="left">消费项目....</th>
<th align="right">一月</th>
<th align="right">二月</th> g.frame标签 （table标签）
frame标签可以直接控制表格的边框的样式
| box | 全边框 |
| above | 上边框 |
| below | 下边框 |
| hsides | 上下边框 |
| vsides | 左右边框 |
跨行：最上侧单元格作为目标单元格，写合并的代码
跨列：最左侧单元格作为目标单元格，写合并的代码
合并之后需删除多余的单元格
直接写在要开始进行跨行或者跨列的标签中
ps: 其中如果有跨越时，被跨越了几格，就少写几格，会自动占用 ！！
四、列表
1.基本常识
列表的特点为整齐、整洁，故用于布局。
同时列表因其不同的性质被分为无序列表，有序列表和自定义列表
列表中可以无限嵌套列表
2.无序列表
<ul> <!--unordered list-->
<li>1</li>
<li>2</li>
</ul>1.其中各个li无顺序
2.ul中只能放li标签，其余均不能放(如p，数字之类的)
3.li中可以存放任何元素
4.在ul中添加 type属性 可以自定义标签前的符号的形状
3.有序列表
<ol>
<li>1</li>
<li>2</li>
</ol>1.有序列表在网页中会自动生成排序并从1开始
2.也可以直接在table中定义从哪个数开始
<table start="50"></table>
3.同样也可以定义前方的序号
such as type="A","a",''i","I"之类的（后两个是罗马数字的大小写）
4.自定义列表
<dl>
<dt>米粉</dt> <!--大哥列表-->
<dd>历史</dd> <!--小弟列表-->
<dd>发展现状</dd> <!--小弟列表都是围绕大哥列表而存在的-->
</dl>五、表单标签(以下均在<form>中进行)
1.组成
表单通常由表单域、表单控件(表单元素)和提示信息三个部分构成，目的是收集用户数据
a.表单域
表单域<form>用于定义表单域，且会把范围内元素信息上传至服务器
<form action="url地址" method="" name="">
各种表单元素控件
</form>其中如若不需要将数据上传至服务器，则只需调用form即可
b.表单元素
第一种：<input>类型(输入表单元素，其中也有很多表单元素)
<input type="属性值" /> (type可以设置不同的属性来指定不同控件类型)
后四个属性同value连用可以改变显示的值
text 可输入的文本框 password 会隐藏输入字符的文本框 radio 多选一(name相同时才可单选) checkbox 多选(这个也要相同name) submit 向服务器提交数据() reset 重置页面内的全部元素 button 定义任意按钮 file 文件域，用于上传文件
type属性：如上所述
name属性：给这一属性赋名，更方便管理(同value一道主要给后台人员使用)
value属性：在文本框中可以看到value的提示词(同时规定其中的值只能为value给定的)
checked属性：选择按钮自动默认选择上
maxlength属性：规定输入字段中字符的最大长度
disabled属性：禁止点击
<form>
<input type="password" name="秘密" value="damei说">
<input type="radio" checked="checked" maxlength="6">
其中radio的选择框是圆形的
checkbox的选择框是方形的
<input type="submit">
<input type="reset">
<input type="file">
</form>第二种<select>类型(下拉表单元素)
<form>
籍贯：
<select>
<option>山东</option>
<option>四川</option>
<option>云南</option>
也可以在option中加入如下代码，让该处的选择成为默认选项
<option selected="selected">火星</option>
</select>
</form>第三种：<textarea>类型(文本域类型)
<form>
<textarea cols="50" row="5">
</textarea>
其中cols控制一行最多的字符数
row控制多少行
（实际一般用css控制）
</form>ps：各个标签之间不能用逗号隔开，只能用空格！
2.<label>标签
label用于绑定表单元素，当点击标签的文本时，浏览器就会自动将光标转到对应的表单元素上。
<label for="名字">爱好</label>
<input type="radio" id="名字" />
六、其他一些标签
1.iframe标签
iframe标签用于在网页之中套娃一个另外的网页
<iframe src="#"></iframe>
1、对于其本身，我们可以设置高度和宽度
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
2、 可以删除其周围的边框以方便进行观看
<iframe src="#" frameborder="0"></iframe>
2.base标签
用于head标签之中，作用是将之后的<a>都默认设置好target的值
<base target="_blank" />
此举便于对超链接标签进行统一的管理
3. 特殊符号
4.框架标签（HTML5中已被移除）
我们通过框架可以直接在一个窗口山显示多个不同的页面，每个页面称为一个框架
a.<frameset>
定义窗口如何进行页面分割（方向和占比）
| rows | 垂直 |
| cols | 水平 |
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>当然，框架之间同样也可以套娃
<html> <frameset rows="50%,50%"> <frame src="/example/html/frame_a.html"> <frameset cols="25%,75%"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> </frameset> </frameset> </html>在框架之中再分出一个框架，实现独占一行或一列的页面显示效果
b.<noframes>
作用是让无法显示框架的浏览器显示该标签中的文字
同样也是在frameset之中进行书写
<html>
<frameset cols="0.01%,50%,0.01%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
</frameset>
</html>c.noresize
本标签用于frame之后，可以使框架变得不可移动
<frame src="/example/html/frame_a.html" noresize="noresize" />
d.iframe
旨在创造一个内联的框架
<iframe src="/i/eg_landscape.jpg"></iframe>
3682
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
