20190322-a标签、img标签、三列表、特殊字符实体、表格
目录
1.a标签
a标签的属性
锚点
2.img标签
img标签的属性
图像热区
3.三列表
有序列表（Ordered List） ol>li
无序列表（Unordered List） ul>li
定义列表（Definition List） dl>dt/dd
列表样式（list-style-type）
4.特殊字符实体
<（大于号） < >（小于号）> &（和）& “”（引号） " （空格）
5.HTML表格
<caption> 表格标题
<table> 表格
<thead>或<th> 表头
<tbody> 表体
<tfoot> 表注（底部）
<tr> 行
<td> 单元格
内容
1.a标签
1.1a标签的属性： href、target、title、hreflang、type
1.1.1href属性
href="" （跳转不成功，Default property）
href="https://www.baidu.com/" （具体地址）
href="mailto:953889703@qq.com" （邮箱地址，Foxmail）
href="#" （禁止跳转）
1.1.2target属性
target="_self" （当前窗口打开，Default property）
target="_blank" （新窗口打开）
target="_parent" （父级框架集中打开）
target="_top" （整个窗口打开）
target="frame name" （指定框架打开）
1.1.3title属性
title="logo" （附加的备注描述性信息）
1.2锚点
1.2.1跳转本页面
<a href="#myname">跳转到本页面的name点上</a>
<a name="myname"></a>
1.2.2跳转另一个页面
<a href="demo.html#myname">跳转到demo的name点上</a>
<a name="myname"></a>
2.img标签
2.1img的属性：src、alt、width、usemap、ismap
2.1.1src属性
src="URL"
src="http://www.baidu.com/1.png" （相对路径，网站路径）
src="./images/1.png" （相对路径，文档路径）
src="F:/H1901/1.png" （绝对路径，物理路径，网盘出发）
2.1.2alt属性
alt="logo" （附加的备注描述性信息）
2.1.3width属性
width="100" （图像大小）
2.2图像热区
2.2.1热区：网页上进行链接的一个区域，如中国地区用热区分割每一个带链接的省市
2.2.2热点：在图像地图中设定作用域的标记
2.2.3基本语法
1 <img src="URL" usemap="#mymap"/> 2 <map name="mymap"> 3 <area shape="形状" coords="坐标值" href="URL"/> 4 </map>
area标签
<area shape="rect" coords="x1，y1，x2，y2" href="URL"/> （rect：矩形；x1，y1：第一个点；x2，y2：第二个点）
<area shape="circle" coords="x，y，r" href="URL"/> （circle：圆形；x，y：圆点；r：半径）
<area shape="poly" coords="x1，y1，x2，y2，x3，y3" href="URL"/> （poly：多边形；x1，y1：第一个点；x2，y2：第二个点；x3，y3：第三个点，故该图形为三角形）
3.三列表
3.1有序列表
<ol type="标记类型" start="步进值" reversed="是否倒序排列"> <li></li> <li></li> <li></li> </ol>
3.1.1type属性
type="1" （标记是数字，Default property）
type="a" （标记是小写英文字母）
type="A" （标记是大写英文字母upper-alpha）
type="i" （标记是小写罗马字母lower-roman）
type="I" （标记是大写罗马字母）
3.1.2start属性
start="2"（从数字2开始排列）
3.1.3reversed属性
reversed="reversed" （倒置排列）
3.2无序列表
<ul type="标记类型"> <li></li> <li></li> <li></li> </ul>
3.2.1type属性
type="disc"（标记是实心圆，Default property）
type="square"（标记是实心方形）
type="circle"（标记是空心圆）
type="none"（去掉标记）
3.3定义列表
<dl> <dt>HTML</dt> <dd>超文本标记语言</dd> <dd>写给浏览器</dd> </dl>
3.4列表样式
3.4.1list-style-type : "disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin"；
3.4.2自定义项目符号list-style-image : none | url ( URL)；
3.4.3自定义列表符号位置list-style-position: outside | inside | inherit（位于文本的左侧。列表项目标记放置在文本以外，且环绕文本 不根据标记对齐 | 放置在文本以内，且环绕文本根据标记对齐 | 继承）
4.特殊字符实体
显示结果 描述 实体名 实体号
空格  
< 小于号 < <
> 大于号 > >
& and符号 & &
“” 引号 " "
详细参考：https://www.jb51.net/onlineread/htmlchar.htm
5.HTML表格
5.1基本语法
5.1.1完整版
<table border="1"> <!--Table Header--> <thead> <tr> <!--定义单元行--> <th> <!--定义标题单元格--> </th> </tr> </thead> <!--Table Body--> <tbody> <tr> <td> <!--定义单元格--> </td> </tr> </tbody> <!--Table Footer--> <tfoot> <tr> <td> </td> </tr> </tfoot> </table>
5.1.2简化版
1 <table border="1"> 2 <tr> 3 <td>单元格1</td> 4 <td>单元格2</td> 5 <td>单元格3</td> 6 </tr> 7 </table>
5.2表格的属性
5.2.1border属性
border="1" （数值越大，边框越大，取值为1-6）
5.2.2cells-属性
cellspacing="0" （单元格间距）
cellpadding="0" （边框与内容间间距）
5.2.3border--属性
border-spacing="0" （table边框与单元格边框间间距）
border-collapse="separate" （分离边框）
border-collapse="collapse" （合并单一边框，忽略border-spacing、empty-cells）
5.2.4宽高背景属性
width="100" （宽100像素）
height="100" （高100像素）
bgcolor="red"（背景红色）
background="url()" （背景图）
5.2.5文字排列属性
align="left/center/right" （居左/中/右）
valign="top/middle/bottom" （居顶/中/底）
5.2.6跨行列属性
colspan="3" （跨列，算上自己，即跨2列）
rowspan="3" （跨行，即跨3行）
5.3特性
独占一行 display：table
不给宽高，由内容撑开
支持margin：0 auto;
padding使用效果奇怪
单元格默认根据内容百分比平分table宽高
行列宽取决于当前行列中最高最宽的单元格
th内容上下居中 居中对齐 文字加粗
td内容上下居中 居左对齐
td给固定宽时，完全等分table宽度
td不支持margin，padding效果奇怪
table到td之间不能嵌套任意其他元素
thead、tbody、tfoot可以省略不写，浏览器会自动生成
