zoukankan      html  css  js  c++  java
  • 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基本语法

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

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

                                  空格                      &nbsp;                &#160;

          <                     小于号                      &lt;                   &#60;

          >                     大于号                      &gt;                  &#62;

          &                     and符号                 &amp;                 &#38;

          “”                      引号                      &quot;                &#34;

    详细参考: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可以省略不写,浏览器会自动生成

    浩瀚海平面上,是无止尽的波涛跟风平浪静,那是一艘船,战胜艰险与孤寂。
  • 相关阅读:
    关于json操作,这里再为大家推荐几款比较实用的json在线工具
    JS操作JSON总结
    HTML WebSocket
    HTML应用程序缓存
    前段也能学习网址
    简述jpg。Gif。png-8.png-24的区别,分别使用场景
    HTML相关问题
    html5移动端知识点总结
    html5本地存储(localStorage)使用介绍
    node环境变量----新全局包管理配置
  • 原文地址:https://www.cnblogs.com/nightnight/p/10592476.html
Copyright © 2011-2022 走看看