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.特殊字符实体

<（大于号） &lt;     >（小于号）&gt;     &（和）&amp;   “”（引号） &quot;      （空格） &nbsp;

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基本语法

 <img src="URL" usemap="#mymap"/>
 <map name="mymap">
       <area shape="形状" coords="坐标值" href="URL"/>
 </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.特殊字符实体

显示结果                   描述                    实体名                  实体号

空格                      &nbsp;                 

<                     小于号                      &lt;                   <

>                     大于号                      &gt;                  >

&                     and符号                 &amp;                 &

“”                      引号                      &quot;                "

详细参考：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简化版

 <table border="1">
     <tr>
         <td>单元格1</td>
         <td>单元格2</td>
         <td>单元格3</td>
     </tr>
 </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可以省略不写，浏览器会自动生成