语法规范 HTML标签是由尖括号包围的关键词，如<html>HTML标签通常是成对出现的，如<html>和</html>，称为双标签（开始标签和结束标签）有些特殊标签必须是单个标签，如<br />，称为单标签双标签关系分为两种：包含关系和并列关系 <html> <head></head> <body></body> </html> //<html>与<head>、<body>为包含关系 //<head>和<body>为并列关系
?
基本结构标签即骨架
<html> //根标签 <head> //头部，其中必须要设置title <title>网页标题</title> //网页标题 </head> <body> //主体 元素包含文档的所有内容，页面内容基本都是放在body里 </body> </html>补充：
1. 文档类型声明标签<!DOCTYPE>
文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页。必须写到整个页面的第一行，不是HTML标签（写在<html>里的标签）
<!DOCTYPE html> 表示当前页面采取的是HTML5版本来显示网页
2. lang语言种类
用来定义当前文档显示的语言。en定义语言为英语，zh-CN定义语言为中文，对应网页是英文网页或中文网页。
这个属性对浏览器和搜索引擎还是有作用的，比如是法语网页时需要翻译
3. 字符集
字符集（Character set）是多个字符的集合，以便计算机能够识别和存储各种文字。
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。
charset常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符。
<meta charset="UTF-8" /> ?不写这行代码可能引起乱码
?
常用标签 标题标签<h1>-<h6> 双标签标签语义：作为标题使用，并且重要性递减特点：加了标题标签的文字字体变粗、字号变大、独占一行?
段落标签<p> 双标签标签语义：把文字内容分割为若干段落，有条理地显示特点：文本在一个段落中会根据浏览器窗口大小自动换行、段落与段落之间保有空隙在HTML中不管多少空格、回车都只显示一个?
换行标签<br /> 单标签标签语义：强制换行特点：换行标签只是开始新的一行，跟段落不一样，段落之间会插入一些垂直距离?
文本格式化标签 双标签标签语义：突出重要性，为文字设置粗体、斜线、下划线等效果?
<div>和<span>标签 双标签<div>和<span>是没有语义的，他们是一个盒子，用于布局、装内容<div>类似一个大盒子，单独占一行<span>类似一个小盒子，一行上可有多个<span>标签?
图像标签和路径<img src="图像URL" /> 1.图像标签<img /> 单标签，一行可放多个用于定义HTML页面中的图像src是<img>标签的必须属性（属于该标签的特性），用于指定图像文件的路径和文件名其中，width和height一般只设置一个，避免压缩图像，另一个会等比例缩放，border一般在css中设置。
2.路径 目录文件夹：里面存放页面所需的相关素材的文件夹，如html文件、图片、css文件等根目录：打开目录文件夹的第一层就是根目录通常建立一个文件夹（images）来存放图像文件，这时再查找图像，就需要采用“路径”的方式来指定图像文件的位置1.相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。即图片相对于html页面的位置。
2.绝对路径：目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径或完整的网络路径
例如，"D:\web\img\logo.gif"或者"http://·/images/logo.gif"
相对路径中反斜杠用"/"，绝对路径中反斜杠用"\"
?
超链接标签<a> 双标签，a为anchor缩写，意为锚用于定义超链接，作用是从一个页面跳转到另一个页面<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>1.外部链接：如<a href="http://·">百度</a>，链接URL以http://开始
2.内部链接：网站内部页面之间的相互连接，直接连接内部页面名称即可，如<a href="index.html">首页</a>（??内部页面的路径）
3.空链接：如果当时没有确定链接目标时，<a href="#">首页</a>
4.下载链接：如果href里面地址是一个.exe文件或者zip压缩包，会下载这个文件（??内部文件的路径）
5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
6.锚点链接：点击链接可以快速定位到页面中的某一位置
在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>找到目标位置标签，里面添加一个id属性 = 刚才的名字，如<h3 id="two">第二季介绍</h3>?
注释标签如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签，注释以"<!--"开头，以"-->"结束。
<!-- 注释语句 --> ? 快捷键：command + /
?
特殊字符在HTML中，一些特殊符号很难或不方便直接使用，可以用以下字符代替
?
表格标签 表格用于显示、展示数据对于布局整齐的页面，可以用<table>来帮助对齐
1.基本语法 <table> <tr> <td>单元格内的文字</td> ··· </tr> ··· </table>1.<table></table>是用于定义表格的标签
2.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
3.<td></td>标签用于定义表格中的单元格，必须嵌套在<tr></tr>标签中（td指table data）
?
2.表头单元格标签<th>一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示，如
<table> ? ? <tr> ? ? ? ? <th>姓名</th> ? ? ? ? ··· ? ? </tr> ? ? <tr> ? ? ? ? <td>张三</td> ? ? ? ? ··· ? ? </tr> ? ? ··· </table>?
3.表格相关属性实际开发中不常用，后面通过CSS来设置 ！这些属性写在<table>标签里
?
4.表格结构标签为了更好的表示表格的语义/结构，可将表格分割成表格头部和表格主体两大部分，用<thead>标签表示表格的头部区域，<tbody>标签表示表格的主体区域
<table> <thead> ? ? <tr> ? ? ? ? <th>姓名</th> ? ? ? ? ··· ? ? </tr> </thead> <tbody> ? ? <tr> ? ? ? ? <td>张三</td> ? ? ? ? ··· ? ? </tr> ? ? ··· </tbody> </table>?
5.合并单元格把多个单元格合并为一个单元格
1.合并单元格方式
跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"
2.目标单元格
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码
3.合并单元格步骤
第一步 确定跨行还是跨列
第二步 找到目标单元格，写上合并方式=合并的单元格数量，比如<td colspan="2"></td>
第三步 删除多余的单元格
?
列表 双标签用于布局，列表最大的特点就是整齐、整洁、有序根据使用场景的不同，列表可分为三大类：无序列表、有序列表和自定义列表 1.无序列表 <ul>标签表示HTML页面中项目的无序列表，而列表项使用<li>标签定义无序列表的基本语法格式： <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ··· </ul> 注意： 无序列表的各个列表项之间没有顺序，是并列的<ul></ul>中只能嵌套<li></li><li>与</li>之间相当于一个容器，可以嵌套所有元素无序列表会带有自己的样式属性，但在实际使用时，使用CSS设置?
2.有序列表 <ol>标签用于定义有序列表，列表排序以数字来显示，使用<li>标签来定义列表项有序列表的基本语法格式： <ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ··· </ol> 注意： <ol></ol>中只能嵌套<li></li><li>与</li>之间相当于一个容器，可以嵌套所有元素有序列表会带有自己的样式属性，但在实际使用时，使用CSS设置?
3.自定义列表 使用场景：用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号<dl>标签用于定义列表，<dt>标签定义项目/名字，<dd>标签描述每一个项目/名字基本语法： <dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> <dt>名词2</dt> <dd>名词2解释1</dd> <dd>名词2解释2</dd> ··· </dl> 注意： <dl></dl>中只能包含<dt>和<dd><dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd><dt>与<dd>是并列关系?
表单标签 使用场景：注册页面使用表单的目的是为了与用户进行交互，收集用户信息一个完整的表单通常由表单域、表单控件（表单元素）和信息元素3个部分构成?
1.表单域 表单域是一个包含表单元素的区域<form>标签用于定义表单域，以实现用户信息的收集和传递，<form>会把他范围内的表单元素信息提交给服务器（双标签）基本语法 <form action="url地址" method="提交方式" name="表单域名词"> 各种表单元素控件 </form>常用属性（学习js后重新详细解释）：
?
2.表单元素 允许用户在表单中输入或者选择的内容控件1.input输入表单元素
<input />标签用于收集用户信息（单标签）?<input>标签包含一个type属性，根据不同的type属性值，来指定不同的控件类型?
除type属性外，<input>标签还有其他很多属性，其常用属性如下：?
name和value是每个表单元素都有的属性值，主要给后台人员使用
checked属性主要针对于单选按钮和复选框
?
额外知识：<label>标签
双标签<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验语法： <label for="sex">男</label> <input type="radio" name="sex" id="sex" />核心：<label>标签的for属性应当于相关元素的id属性相同
?
2.select下拉表单元素
双标签使用场景：如果有多个选项让用户选择，并且想要节约页面空间时，使用<select>标签定义下拉列表语法 <select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ··· </select><select>至少包含一对<option></option>，<select>包含在<form></form>中
在<option>中定义selected="selected"时，当前项为默认选中项
3.textarea文本域元素
双标签使用场景：当用户输入内容较多的情况下，就不能使用文本框表单了，可以使用<textarea>标签定义多方文本输入控件，常用于留言板、评论语法 <textarea rows="3" cols="20"> 这里显示默认文本内容，且会显示于标签间的空格 </textarea>包含在<form></form>中
cols="每行中的字符树"，rows="显示的行数"（并不是所有行数，超过显示行数后会自动加上滚动条），在实际开发中不会使用，都是用CSS来改变大小
?
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #HTML标签
