[TOC] >[success] # HTML 标签 ~~~ 1.语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。 2.不管是谁都能看懂这块内容是什么。 3.遵循的原则：先确定语义的HTML ，再选合适的CSS。 ~~~ >[success] # 排版标签 ~~~ 1.排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。 ~~~ ~~~ 1.<hn> 标题文本</hn> --- 作为标题使用，并且依据重要性递减（1-6） 2.<p>文本内容 </p> --- 作为段落使用，就像写作可以将段落中换行的内容以换行的形式展示 3.<hr />是单标签 --- 在网页中显示默认样式的水平线。 4.<br />是单标签 --- 强制换行文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 5.<div>没有语义的盒子</div> --- 没有语义的盒子 6.<span>没有语义的盒子</span> --- 没有语义的盒子 ~~~  >[success] # 文本标签 ~~~ 1.在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用 到HTML中的文本格式化标签，使文字以特殊的方式显示。 ~~~ ~~~ 1.<b>加粗</b> <strong>加粗</strong> --- 文字加粗推荐 strong 语义化 2.<i>倾斜</i><em>倾斜</em> --- 文字倾斜推荐em 3.<s>加删除线</s><del>加删除线</del> --- 加删除线推荐del 4.<u>加下划线</u><ins>加下滑线</ins> --- 推荐使用ins ~~~ >[success] # 图片标签 -- img ~~~ 1.<img/> 是一个单标签 --- 是用来展示图片效果的 ~~~ * img 标签中的属性  >[success] # 连接标签 -- a标签 ~~~ 1.<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a> *href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 *target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认在当前窗口打开，_blank为在新窗口中打开方式。 ~~~ >[danger] ##### 锚点属性 ~~~ 1.使用“a href=”#id名>“链接文本"</a>创建链接文本。 2.使用相应的id名标注跳转目标的位置。 ~~~ >[danger] ##### 设置base 控制整个页面a标签是否开启新页面 ~~~ 1.base 可以设置整体链接的打开状态 ~~~  >[success] # 列表标签 ~~~ 1.无序列表 --<ul><li></li><ul> 2.有序列表 -- <ol><li></li><ol> 3.自定义列表 -- <dl><dt>标题</dt><dd>详细内容</dd></dl> ~~~ >[danger] #### 应用场景 * ul  * ol  * dl  >[success] # 表格 -- Table ~~~ 1.数据展示的容器，tr 为行，td为列，th为表头标签，thead用于定义表格的 头部，tbody用于定义表格的头部 2.跨行合并：rowspan 跨列合并：colspan 3.<caption>table的标题属性</caption> 合并单元格的思想： 将多个内容合并的时候，就会有多余的东西，把它删除。例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。 公式： 删除的个数 = 合并的个数 - 1 <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> ~~~ * 常见属性 ~~~ 1.border -- 做整个table的边框设置 2.cellspacing -- 设置td 之间的距离 3.cellpadding -- 设置单元格的内边距 4.width -- 设置table 的宽度可以设置百分百 5.height -- 设置table 的高度 6.align -- 设置table的位置 <table border="1" cellpadding="5" cellspacing="0" width="100%"> <tr> <td>第一列</td> <td>第二列</td> <td>第三列</td> </tr> </table> ~~~  >[success] # HTML 的特殊字符  >[success] # 表单标签 -- input ~~~ 1.spellcheck="true" -- 检查单词是否正确 2.当使用checkbox 和 radio 的时候使用name 属性作为一组标记 ~~~  >[danger] ##### label标签 ~~~ 1.用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点 ~~~ ~~~ 1.label 的for 属性绑定的是 input 的id名称 <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"> ~~~ >[danger] ##### 文本域 -- textarea ~~~ 1.如果需要输入大量的信息，就需要用到textarea&gt;标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下： <textarea cols="每行中的字符数" rows="显示的行数"> 文本内容 </textarea> ~~~ >[success] # 下拉菜单 -- select ~~~ 1.select -- 下拉菜单 2. <select></select>;中至少应包含一对<option></option>。 3. 在option 中定义selected =" selected "时，当前项即为默认选中项。 ~~~ >[success] # 表单域 -- form ~~~ 1.<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件 </form> 常用属性： 1. Action 在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。 2. method 用于设置表单数据的提交方式，其取值为get或post。 3. name 用于指定表单的名称，以区分同一个页面中的多个表单。 注意： 每个表单都应该有自己表单域。 ~~~