一、HTML简介

　　 http://www.cnblogs.com/linhaifeng/articles/8973878.html

二、HTML标签与文档结构

　　http://www.cnblogs.com/linhaifeng/articles/8982242.html

三、body内常用标签

一 HTML语义化

body中的标签是会显示到浏览器窗口中的，body内的标签只有一个作用就是用来标记语义的，语义指的是从字面意思就可以理解被标记的内容是用来做什么的

虽然不同的标签会有不同的显示样式，但我们一定要强制自己忘记所有标签的显示样式，只记它的语义。因为每个标签的样式各不相同，记忆不同标签的样式来控制显示样式，对前端开发来说将会是一种灾难，更何况添加样式并不是HTML擅长的事情

对于那些只用来修改样式的标签将会被淘汰掉，比如以下标签都是没有语义的，都是用来修改样式的

  1. #1、<br> 换行
  2.         我是帅气逼人的Egon老师
  3.         <br>
  4.         我是帅气逼人的Egon老师
  5.         我是帅气逼人的Egon老师
  6.         我是帅气逼人的Egon老师
  7.  
  8. #2、<hr> 分割线
  9.  
  10. #3、<font> 修改文字大小，颜色
  11.         <font color="red" size="10px">我是哈哈哈</font>
  12.  
  13. #4、<b> 加粗
  14.         <b>论颜值，我秒杀宇宙</b>
  15.  
  16. #5、<u> 下划线
  17.  
  18. #6、<i> 倾斜
  19.  
  20. #7、<s> 删除线

html5中推出了一些新的标签

  1.         strong == b
  2.  
  3.         ins == u
  4.  
  5.         em == i
  6.  
  7.         del == s
  8.  
  9. 新的标签是有语义的，而老的只是单纯的添加样式（这是CSS干的事）
  10.         strong的语义：定义重要性强调的文字
  11.         ins的语义（inserted）：定义插入的文字
  12.         em的语义（emphasized）：定义强调的文字
  13.         del的语义（deleted）：定义被删除的文字 

二 字符实体

  1. #1、在HTML中对空格／回车／tab不敏感，会把多个空格／回车／tab当作一个空格来处理
  2.  
  3. #2、字符实体指的是
  4. 在HTML中
  5. 有的字符是被HTML保留的比如大于号小于号
  6. 有的HTML字符，在HTML中是有特殊含义的，是不能在浏览器中直接显示出来的，那么这些东西想显示出来就必须通过字符实体，如下

注释：实体名称对大小写敏感！

内容 代码
空格 &nbsp;
> &gt;
< &lt;
& &amp;
¥ &yen;
版权 &copy;
注册 &reg;

HTML特殊符号对照表

三 h系列标签

语义：标记内容为一个标题，全称headline

h系列标签从h1-h6共6个，没有h7标签，标记内容为1~6级标题

虽然h1-h6标签的显示样式是从大到小，但再次强调：记忆HTML标签的显示样式是没有意义的

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head lang='en'>
  4.         <meta charset="utf-8">
  5.         <title>Egon才华无敌</title>
  6.     </head>
  7.     <body>
  8.         <h1>一级标题</h1><h2>二级标题</h2>
  9.         <h3>三级标题</h3>
  10.         <h4>四级标题</h4>
  11.         <h5>五级标题</h5>
  12.         <h6>六级标题</h6>
  13.         <h7>没有七级标题</h7>
  14.         没有七级标题
  15.     </body>
  16. </html> 

注意：在企业开发中一定要慎用h系列标签，特别是h1标签，在企业开发中一般一个界面中只能出现一个h1标签（出于SEO考虑）,比如www.163.com。

四 p标签

语义：标记内容为一个段落，全称paragraph

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head lang='en'>
  4.         <meta charset="utf-8">
  5.         <title>Egon无敌</title>
  6.     </head>
  7.     <body>
  8.         <h1>Egon</h1>
  9.         <p>论颜值，鹤立鸡群</p>
  10.         <p>论才华，天下无敌</p>
  11.     </body>
  12. </html>

五 img标签

语义：标记一个图片，全称image

  1. #1、用法
  2. <img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容" />
  3.  
  4. #2、注意
  5. 2.1 src指定的图片地址可以是网络地址，也可以是一个本地地址，本地地址可以用绝对或相对路径，但通常用相对路径，相对路径是以html文件当前所在路径为基准进行的
  6.  
  7. 2.2 图片的格式可以是png、jpg和gif
  8.  
  9. 2.3 alt="图片加载失败时显示的内容"
  10.  
  11. 2.4 title = "鼠标悬停到图片上时显示的内容"
  12.  
  13. 2.5 如果没有指定图片的width和height则按照图片默认的宽高显示，如果指定图片的width和height则可能让图片变形
  14. 那如果又想指定宽度和高度，又不想让图片变形，我们可以只指定宽度和高度的一个值即可
  15. 只要指定了一个值，系统会根据该值计算另外一个值，并且都是等比拉伸的，图片将不会变形

六 a标签

语义：标记一个内容为超链接，全称anchor，锚

  1. #1、超链接标签是超文本文件的精髓，可以控制页面与页面之间的跳转，语法如下
  2. <a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片</a>
  3.  
  4. #2、注意：
  5. 2.1 a标签不仅可以标记文字，也可以标记图片
  6.     <a href="https://www.baidu.com"><img src="mv.png" />百度一下，你就知道</a>
  7.  
  8. 2.2 a标签必须有href属性，href的值必须是http://或https://开头
  9.  
  10. 2.3 a标签还可以跳转到自己的页面
  11.     <a href="template/aaa.html">锤你胸口</a>
  12.  
  13. 2.4 target="_blank"代表在新页面中打开，其余的值均无需记忆，
  14.     如果页面中大量的a标签都需要设置target="_blank",那么我们可以在head标签内新增一个base标签进行统一设置
  15.     <base target="_blank">
  16.     如果a标签自己设置了target，那么就以自己的为准，否则就会参照base的设置
  17.  
  18. 2.5 title="鼠标悬浮显示的内容"

假链接

  1. #1、什么是假链接？
  2.     就是点击之后不会跳转的链接，我们称之为假链接
  3.  
  4. #2、假链接存在的意义：
  5.     在企业开发前期，其他界面都还没有写出来，
  6.     那么我们就不知道应该跳转到什么地方，所以就只能使用假链接来代替
  7.  
  8. #3、假链接的定义格式
  9.     1、href="#"   :会自动回到网页的顶部
  10.     2、href="javascript:" ：不会返回顶部

页面内锚点

  1. #1、要想通过a标签跳转到指定的位置，那么必须告诉a标签一个独一无二的身份证号码，
  2. 这样a标签才能在当前界面中找到需要跳转到的目标位置
  3.  
  4. #2、如何为html中的标签绑定一个独一无二的身份证号码呢？
  5. 在html中，每一个标签都有一个名称叫做id的属性
  6. 这个属性就是用来给标签指定一个独一无二的身份证号码的
  7.  
  8. #3、所以要想实现通过a标签跳转到指定的位置，分为两步
  9. 3.1、给目标位置的标签添加一个id属性，然后指定一个独一无二的值
  10. 3.2、告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
  11.  
  12. #4、a标签除了可以跳转当前页面，还可以跳转到其他页面的指定位置 

跳到首页

  1. #1、跳到首页
  2. <a href="">刷新页面，回到顶部，人类感觉不出来区别</a>
  3. <a href="#">回到顶部</a>
  4.  
  5. #2、注意点：
  6.     通过我们的a标签跳转到指定的位置，是没有过度动画的
  7.     是直接一下子就跳转到了指定位置,比如京东主页
  8.     如果跳到首页需要过渡动画，则不用a标签做，比如天猫主页
  1. <!--
  2.     <a href="">刷新页面，回到顶部</a> 刷新页面，人类感觉不出来区别
  3.     <a href="#">回到顶部</a>
  4.  
  5. -->
  6.  
  7. <!DOCTYPE html>
  8. <html lang="en">
  9. <head>
  10.     <meta charset="UTF-8">
  11.     <title>Title</title>
  12. </head>
  13. <body>
  14.     <p>我上山是虎，我下海是龙</p>
  15.     <p>我上山是虎，我下海是龙</p>
  16.     <p>我上山是虎，我下海是龙</p>
  17.     <p>我上山是虎，我下海是龙</p>
  18.     <p>我上山是虎，我下海是龙</p>
  19.     <p>我上山是虎，我下海是龙</p>
  20.     <p>我上山是虎，我下海是龙</p>
  21.     <p>我上山是虎，我下海是龙</p>
  22.     <p>我上山是虎，我下海是龙</p>
  23.     <p>我上山是虎，我下海是龙</p>
  24.     <p>我上山是虎，我下海是龙</p>
  25.     <p>我上山是虎，我下海是龙</p>
  26.     <p>我上山是虎，我下海是龙</p>
  27.     <p>我上山是虎，我下海是龙</p>
  28.     <p>我上山是虎，我下海是龙</p>
  29.     <p>我上山是虎，我下海是龙</p>
  30.     <p>我上山是虎，我下海是龙</p>
  31.     <p>我上山是虎，我下海是龙</p>
  32.     <p>我上山是虎，我下海是龙</p>
  33.     <p>我上山是虎，我下海是龙</p>
  34.     <p>我上山是虎，我下海是龙</p>
  35.     <p>我上山是虎，我下海是龙</p>
  36.     <p>我上山是虎，我下海是龙</p>
  37.     <p id="sb1">alex是个大SB</p>
  38.     <p>我上山是虎，我下海是龙</p>
  39.     <p>我上山是虎，我下海是龙</p>
  40.     <p>我上山是虎，我下海是龙</p>
  41.     <p>我上山是虎，我下海是龙</p>
  42.     <p>我上山是虎，我下海是龙</p>
  43.     <p>我上山是虎，我下海是龙</p>
  44.     <p>我上山是虎，我下海是龙</p>
  45.     <p>我上山是虎，我下海是龙</p>
  46.     <p>我上山是虎，我下海是龙</p>
  47.     <p>我上山是虎，我下海是龙</p>
  48.     <p>我上山是虎，我下海是龙</p>
  49.     <p>我上山是虎，我下海是龙</p>
  50.     <p>我上山是虎，我下海是龙</p>
  51.     <p>我上山是虎，我下海是龙</p>
  52.     <p>我上山是虎，我下海是龙</p>
  53.     <p>我上山是虎，我下海是龙</p>
  54.     <p>我上山是虎，我下海是龙</p>
  55.     <p>我上山是虎，我下海是龙</p>
  56.     <p>我上山是虎，我下海是龙</p>
  57.     <p>我上山是虎，我下海是龙</p>
  58.     <p>我上山是虎，我下海是龙</p>
  59.     <p>我上山是虎，我下海是龙</p>
  60.     <p>我上山是虎，我下海是龙</p>
  61.     <p>我上山是虎，我下海是龙</p>
  62.     <p>我上山是虎，我下海是龙</p>
  63.     <p>我上山是虎，我下海是龙</p>
  64.     <p>我上山是虎，我下海是龙</p>
  65.     <p>我上山是虎，我下海是龙</p>
  66.     <p>我上山是虎，我下海是龙</p>
  67.     <p>我上山是虎，我下海是龙</p>
  68.     <p>我上山是虎，我下海是龙</p>
  69.     <p>我上山是虎，我下海是龙</p>
  70.     <p>我上山是虎，我下海是龙</p>
  71.     <p>我上山是虎，我下海是龙</p>
  72.     <p>我上山是虎，我下海是龙</p>
  73.     <p>我上山是虎，我下海是龙</p>
  74.     <p id="sb2">wxx是个大SB</p>
  75.     <p>我上山是虎，我下海是龙</p>
  76.     <p>我上山是虎，我下海是龙</p>
  77.     <p>我上山是虎，我下海是龙</p>
  78.     <p>我上山是虎，我下海是龙</p>
  79.     <p>我上山是虎，我下海是龙</p>
  80.     <p>我上山是虎，我下海是龙</p>
  81.     <p>我上山是虎，我下海是龙</p>
  82.     <p>我上山是虎，我下海是龙</p>
  83.     <p>我上山是虎，我下海是龙</p>
  84.     <p>我上山是虎，我下海是龙</p>
  85.     <p>我上山是虎，我下海是龙</p>
  86.     <p>我上山是虎，我下海是龙</p>
  87.     <p>我上山是虎，我下海是龙</p>
  88.     <p>我上山是虎，我下海是龙</p>
  89.     <p>我上山是虎，我下海是龙</p>
  90.     <p>我上山是虎，我下海是龙</p>
  91.     <p>我上山是虎，我下海是龙</p>
  92.     <p>我上山是虎，我下海是龙</p>
  93.     <p>我上山是虎，我下海是龙</p>
  94.     <p>我上山是虎，我下海是龙</p>
  95.     <p>我上山是虎，我下海是龙</p>
  96.     <p>我上山是虎，我下海是龙</p>
  97.     <p>我上山是虎，我下海是龙</p>
  98.     <p>我上山是虎，我下海是龙</p>
  99.     <p>我上山是虎，我下海是龙</p>
  100.     <p>我上山是虎，我下海是龙</p>
  101.     <p>我上山是虎，我下海是龙</p>
  102.     <p>我上山是虎，我下海是龙</p>
  103.     <p>我上山是虎，我下海是龙</p>
  104.     <p>我上山是虎，我下海是龙</p>
  105.     <p>我上山是虎，我下海是龙</p>
  106.     <p>我上山是虎，我下海是龙</p>
  107.     <p>我上山是虎，我下海是龙</p>
  108.     <p>我上山是虎，我下海是龙</p>
  109.     <p>我上山是虎，我下海是龙</p>
  110.     <p>我上山是虎，我下海是龙</p>
  111.     <p>我上山是虎，我下海是龙</p>
  112.     <p>我上山是虎，我下海是龙</p>
  113.     <p>我上山是虎，我下海是龙</p>
  114.     <p>我上山是虎，我下海是龙</p>
  115.     <p>我上山是虎，我下海是龙</p>
  116.     <p>我上山是虎，我下海是龙</p>
  117.     <p>我上山是虎，我下海是龙</p>
  118.     <p>我上山是虎，我下海是龙</p>
  119.     <p>我上山是虎，我下海是龙</p>
  120.     <p>我上山是虎，我下海是龙</p>
  121.     <p>我上山是虎，我下海是龙</p>
  122.     <p>我上山是虎，我下海是龙</p>
  123.     <p>我上山是虎，我下海是龙</p>
  124.     <p>我上山是虎，我下海是龙</p>
  125.     <p>我上山是虎，我下海是龙</p>
  126.     <p>我上山是虎，我下海是龙</p>
  127.     <a href="#sb1">找第一个SB</a>
  128.     <br>
  129.     <a href="#sb2">找第一个SB</a>
  130.     <br>
  131.     <a href="#">不刷新，跳回首页</a>
  132.     <br>
  133.     <a href="">刷新，跳回首页</a>
  134. </body>
  135. </html>

页面锚点+跳回首页练习

七 列表标签

语义：标记一堆数据是一个整体/列表

html中列表标签分为三种

1、无序列表（列表标签中使用最多的一种，非常重要）：unordered list

  1. #1、作用：
  2. 制作导航条、商品列表、新闻列表等
  3. #2、组合使用ul>li
  4.     <ul>
  5.         <li>秒杀</li>
  6.         <li>优惠券</li>
  7.         <li>PLUS会员</li>
  8.         <li>闪购</li>
  9.         <li>拍卖</li>
  10.         <li>京东服饰</li>
  11.         <li>京东超市</li>
  12.         <li>生鲜</li>
  13.         <li>全球购</li>
  14.         <li>京东金融</li>
  15.     </ul>
  16.  
  17. #3、ul标签的属性type（这属于列表的样式，所以了解即可）
  18. type：列表标识的类型
  19.         disc：实心圆(默认值)
  20.         circle：空心圆
  21.         square：实心矩形
  22.         none：不显示标识
  23. 可以通过css直接去掉小圆点
  24. <style type="text/css">
  25.             ul {
  26.                 list-style: none;
  27.             }
  28. </style>
  29.  
  30. #4、注意
  31. ul与li是组合标签应该一起出现，并且ul的子标签只应该是li，而li的子标签则可以是任意其他标签
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <h1>物品清单</h1>
  9.     <ul>
  10.         <li>
  11.             <h2>蔬菜</h2>
  12.             <ul>
  13.                 <li>西红柿</li>
  14.                 <li>花瓜</li>
  15.                 <li>芹菜</li>
  16.             </ul>
  17.         </li>
  18.         <li>
  19.             <h2>水果</h2>
  20.             <ul>
  21.                 <li>香蕉</li>
  22.                 <li>菠萝</li>
  23.                 <li>火龙果</li>
  24.             </ul>
  25.         </li>
  26.     </ul>
  27.  
  28. </body>
  29. </html>

无序列表练习

2、有序列表（极少使用）

  1.     <h1>智商排名</h1>
  2.     <ol>
  3.         <li>Egon</li>
  4.         <li>刘清正</li>
  5.         <li>武佩奇</li>
  6.         <li>alex</li>
  7.         <li>元昊</li>
  8.     </ol>
  9.  
  10.     <!--有序列表能干的事，完全可以用无序列表取代-->
  11.     <h1>智商排名</h1>
  12.     <ul style="list-style: none">
  13.         <li>1. Egon</li>
  14.         <li>2. 刘清正</li>
  15.         <li>3. 武佩奇</li>
  16.         <li>4. alex</li>
  17.         <li>5. 元昊</li>
  18.     </ul>

3、自定义列表（也会经常使用）

  1. #1、作用分析
  2. 选择用什么标签的唯一标准，是看文本的实际语义，而不是看长什么样子
  3. 无序列表：内容是并列的,没有先后顺序
  4. 有序列表：内容是有先后顺序的
  5. 自定义列表：对一个题目进行解释说明的时候，用自定义列表,可以做网站尾部相关信息，网易注册界面的输入框
  6.  
  7. #2、自定义列表也是一个组合标签：dl>dt+dd
  8. dl:defination list，自定义列表
  9. dt：defination title，自定义标题
  10. dd：defination description，自定义描述
  1. <dl>
        <dt>自定义标题1<dt>
        <dd>描述1<dd>
        <dd>描述2<dd>
        <dd>描述3<dd>

        <dt>自定义标题2<dt>
        <dd>描述1<dd>
        <dd>描述2<dd>
        <dd>描述3<dd>

        <dt>自定义标题3<dt>
        <dd>描述1<dd>
        <dd>描述2<dd>
        <dd>描述3<dd>
    </dl>
  1.  #3、注意: 3.1 dl>dt+dd应该组合出现，dl中只应该存放dt和dd，而可以在dt和dd中添加任意其他标签 3.2 一个dt可以可以没有对应的dd，也可以有多个，但建议一个dt对应一个dd
  1. <dl>
  2.     <dt><h5>购物流程</h5></dt>
  3.     <dd>购物流程</dd>
  4.     <dd>会员介绍</dd>
  5.     <dd>生活旅行</dd>
  6.  
  7.     <dt><h5>配送方式</h5></dt>
  8.     <dd>上门自提</dd>
  9.     <dd>211限时达</dd>
  10.     <dd>配送服务查询</dd>
  11.  
  12.     <dt><h5>支付方式</h5></dt>
  13.     <dd>货到付款</dd>
  14.     <dd>在线支付</dd>
  15.     <dd>分期付款</dd>
  16. </dl>

自定义列表练习

八 table标签

语义：标记一段数据为表格

  1. #1、作用
  2. 表格标签是一种数据的展现形式，当数据量非常大的时候，使用表格的形式来展示被认为是最清晰的
  3.  
  4. #2、格式
  5. <table>
  6.     <tr>
  7.         <td></td>
  8.     </tr>
  9. </table>
  10.  
  11. tr代表表格的一行数据
  12. td表一行中的一个单元格
  13.  
  14. #3、注意点：
  15. 表格标签有一个边框属性，这个属性决定了边框的宽度。默认情况下这个属性的值为0，所以看不到边框 
  1. <table border="1px" >
  2.     <tr>
  3.         <td>姓名</td>
  4.         <td>性别</td>
  5.         <td>年龄</td>
  6.     </tr>
  7.  
  8.     <tr bgcolor="white" >
  9.         <td>Egon</td>
  10.         <td>male</td>
  11.         <td>18</td>
  12.     </tr>
  13.  
  14.     <tr bgcolor="white">
  15.         <td>ALex</td>
  16.         <td>male</td>
  17.         <td>73</td>
  18.     </tr>
  19.  
  20.     <tr bgcolor="white">
  21.         <td>Wxx</td>
  22.         <td>female</td>
  23.         <td>84</td>
  24.     </tr>
  25. </table>

小练习

表格属性

  1. #1、宽度和高度
  2.     可以给table和td设置width和height属性
  3.  
  4.     1.1 默认情况下表格的宽高是按照内容的尺寸来调整的，也可以通过给table标签设置widht和height来手动指定表格的宽高
  5.  
  6.     1.2 如果给td标签设置width和height属性，会修改当前单元格的宽度和高度，只要不超过table的宽高，则不会影响整个表格的宽度和高度
  7.  
  8. #2、水平对齐和垂直对齐
  9.     水平对齐align可以给table、tr、td标签设置
  10.     垂直对齐valign只能给tr、td标签设置
  11.  
  12.     ========水平对齐===========
  13.     取值
  14.     align=“left”
  15.     align=“center”
  16.     align=“right”
  17.  
  18.     2.1 给table标签设置水平对齐，可以让表格在水平方向上对齐
  19.           强调：table只能设置水平方向
  20.  
  21.     2.2 给tr设置水平对齐，可以控制当前行所有单元格内容都水平对齐
  22.  
  23.     2.3 给td设置水平对齐，可以控制当前单元格内容水平对齐，tr与td冲突的情况下，以td为准
  24.  
  25.     ========垂直对齐===========
  26.     取值
  27.     valign=“top”
  28.     valign=“center”
  29.     valign=“bottom”
  30.  
  31.     2.4 给tr设置垂直对齐可以让当前行所有单元格内容都垂直对齐
  32.     2.5 给td设置垂直对齐可以让当前单元格内容垂直对齐
  33.  
  34. #3、外边距和内边距
  35.     只能给table设置
  36.  
  37.     3.1 外边距：单元格与单元格之间的间隔，cellspacing="3px"，默认值为2px
  38.     3.2 内边距：单元格边框与文字之间的距离:cellpadding="200px"

表格属性（了解知识点）

  1. #1、方式一
  2.     在标签中，想通过指定外边距为0来实现细线表格是不靠谱的，其实他是将2条线合成了一条线.所以看上去很不舒服,如下实现
  3. <table width="200px" height="200px" bgcolor="black" border="1" cellspacing="0px">
  4.     <tr bgcolor="white">
  5.         <td>姓名</td>
  6.         <td>性别</td>
  7.         <td>年龄</td>
  8.     </tr>
  9.  
  10.     <tr bgcolor="white" >
  11.         <td>Egon</td>
  12.         <td>male</td>
  13.         <td>18</td>
  14.     </tr>
  15.  
  16.     <tr bgcolor="white">
  17.         <td>ALex</td>
  18.         <td>male</td>
  19.         <td>73</td>
  20.     </tr>
  21.  
  22.     <tr bgcolor="white">
  23.         <td>Wxx</td>
  24.         <td>female</td>
  25.         <td>84</td>
  26.     </tr>
  27. </table>
  28. #2、方式二（推荐使用）
  29.  细线表格的制作方式：
  30.         1、给table标签设置bgcolor
  31.         2、给tr标签设置bgcolor
  32.         3、给table标签设置cellspacing="1px"
  33.  
  34.       注意：
  35.       table、tr、td标签都支持bgcolor属性
  36.  
  37. <table width="200px" height="200px" bgcolor="black" cellspacing="1px">
  38.     <tr bgcolor="white">
  39.         <td>姓名</td>
  40.         <td>性别</td>
  41.         <td>年龄</td>
  42.     </tr>
  43.  
  44.     <tr bgcolor="white" >
  45.         <td>Egon</td>
  46.         <td>male</td>
  47.         <td>18</td>
  48.     </tr>
  49.  
  50.     <tr bgcolor="white">
  51.         <td>ALex</td>
  52.         <td>male</td>
  53.         <td>73</td>
  54.     </tr>
  55.  
  56.     <tr bgcolor="white">
  57.         <td>Wxx</td>
  58.         <td>female</td>
  59.         <td>84</td>
  60.     </tr>
  61. </table>

两种方式实现细线表格

表格的结构

  1. 为了方便管理维护以及提升语义，我们将表格中存储的数据分为四类：
  2. #1、表格的标题:caption
  3.     特点:相对于表格宽度自动居中对齐
  4.     注意:
  5.         1.1 该标签一定要写在table标签里，否则无效
  6.         1.2 caption一定要紧跟在table标签内的第一个
  7.  
  8. #2、表格的表头信息:thead
  9.     特点：专门用来存储每一列的标题，只要将当前列的标题存储在这个标签中就会自动居中+加粗文字
  10.  
  11. #3、表格的主体信息:tbody
  12.     注意：
  13.         3.1 如果没有添加tbody，浏览器会自动添加
  14.         3.2 如果指定了thread和tfoot，那么在修改整个表格的高度时，thead和tfoot有自己默认的高度，不会随着
  15.             表格的高度变化而变化
  16.  
  17. #4、表尾信息:tfoot
  18.  
  19. <html>
  20. <head>
  21.     <meta charset="utf-8"/>
  22. </head>
  23. <body>
  24.     <table bgcolor="black" border="1" width="300px" height="300px" cellspacing="1px">
  25.  
  26.         <caption>学员信息统计</caption>
  27.         <thead>
  28.             <tr bgcolor="white">
  29.                 <th>姓名</th>
  30.                 <th>性别</th>
  31.                 <th>年龄</th>
  32.             </tr>
  33.         </thead>
  34.  
  35.         <tbody>
  36.             <tr bgcolor="white">
  37.                 <td>egon</td>
  38.                 <td>male</td>
  39.                 <td>18</td>
  40.             </tr>
  41.  
  42.             <tr bgcolor="white">
  43.                 <td>egon</td>
  44.                 <td>male</td>
  45.                 <td>18</td>
  46.             </tr>
  47.  
  48.             <tr bgcolor="white">
  49.                 <td>egon</td>
  50.                 <td>male</td>
  51.                 <td>18</td>
  52.             </tr>
  53.         </tbody>
  54.  
  55.         <tfoot>
  56.             <tr bgcolor="white">
  57.                 <td>3</td>
  58.                 <td>3</td>
  59.                 <td>3</td>
  60.             </tr>
  61.         </tfoot>
  62.     </table>
  63.  
  64. </body>
  65. </html>

表格结构详解

单元格合并

  1. #1、水平向上的单元格colspan
  2.     可以给td标签添加一个colspan属性，来把水平方向的单元格当做多个单元格来看待
  3.     <td colspan="2"></td>
  4.  
  5. #2、垂直向上的单元格rowspan
  6.     可以给td标签设置一个rowspan属性，来把垂直方向的的单元格当成多个去看待
  7.  
  8. #注意注意注意:
  9. 1、由于把某一个单元格当作了多个单元格来看待，所以就会多出一些单元格，所以需要删掉一些单元格
  10. 2、一定要记住，单元格合并永远是向后或者向下合并，而不能向前或向上合并

练习：

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head lang='en'>
  4.         <meta charset="utf-8">
  5.         <title>Egon无敌</title>
  6.         <base target="_blank">
  7.         <style>
  8.  
  9.         </style>
  10.     </head>
  11.     <body>
  12.  
  13.     <table border="0" cellspacing="1" bgcolor="#D7A7EE"  width="500px" height="200px">
  14.         <tr bgcolor="white">
  15.             <td colspan="3" align="center">星期一菜谱</td>
  16.         </tr>
  17.         <tr bgcolor="white">
  18.             <td rowspan="2">素菜</td>
  19.             <td>情操茄子</td>
  20.             <td>花椒扁豆</td>
  21.         </tr>
  22.  
  23.         <tr bgcolor="white">
  24.             <td>小葱豆腐</td>
  25.             <td>炒白菜</td>
  26.         </tr>
  27.  
  28.         <tr bgcolor="white">
  29.             <td rowspan="2">荤菜</td>
  30.             <td>油焖大虾</td>
  31.             <td>海参鱼翅</td>
  32.         </tr>
  33.  
  34.         <tr bgcolor="white">
  35.             <td>
  36.                 红烧肉<img src="hsr.jpeg" alt="">
  37.             </td>
  38.             <td>烤全羊</td>
  39.         </tr>
  40.     </table>
  41.  
  42.     </body>
  43. </html>

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head lang='en'>
  4.         <meta charset="utf-8">
  5.         <title>Egon无敌</title>
  6.         <base target="_blank">
  7.     </head>
  8.     <body>
  9.  
  10.     <table border="0" cellspacing="1" bgcolor="blue"  width="500px" height="200px">
  11.         <caption>课程表</caption>
  12.         <tr bgcolor="white" align="center">
  13.             <td>项目</td>
  14.             <td colspan="6">上课</td>
  15.             <td align="center">休息</td>
  16.         </tr>
  17.         <tr bgcolor="white" align="center">
  18.             <td>星期</td>
  19.             <td>星期一</td>
  20.             <td>星期二</td>
  21.             <td>星期三</td>
  22.             <td>星期四</td>
  23.             <td>星期五</td>
  24.             <td>星期六</td>
  25.             <td>星期日</td>
  26.         </tr>
  27.         <tr bgcolor="white" align="center">
  28.             <td rowspan="4">上午</td>
  29.             <td>语文</td>
  30.             <td>数学</td>
  31.             <td>英语</td>
  32.             <td>英语</td>
  33.             <td>物理</td>
  34.             <td>计算机</td>
  35.             <td rowspan="4">休息</td>
  36.         </tr>
  37.         <tr bgcolor="white" align="center">
  38.             <td>数学</td>
  39.             <td>数学</td>
  40.             <td>地理</td>
  41.             <td>历史</td>
  42.             <td>化学</td>
  43.             <td>计算机</td>
  44.         </tr>
  45.         <tr bgcolor="white" align="center">
  46.             <td>化学</td>
  47.             <td>语文</td>
  48.             <td>体育</td>
  49.             <td>计算机</td>
  50.             <td>英语</td>
  51.             <td>计算机</td>
  52.         </tr>
  53.         <tr bgcolor="white" align="center">
  54.             <td>语文</td>
  55.             <td>数学</td>
  56.             <td>英语</td>
  57.             <td>英语</td>
  58.             <td>物理</td>
  59.             <td>计算机</td>
  60.         </tr>
  61.         <tr bgcolor="white" align="center">
  62.             <td rowspan="2">下午</td>
  63.             <td>数学</td>
  64.             <td>数学</td>
  65.             <td>地理</td>
  66.             <td>历史</td>
  67.             <td>化学</td>
  68.             <td>计算机</td>
  69.             <td rowspan="2">休息</td>
  70.         </tr>
  71.         <tr bgcolor="white" align="center">
  72.             <td>数学</td>
  73.             <td>数学</td>
  74.             <td>地理</td>
  75.             <td>历史</td>
  76.             <td>化学</td>
  77.             <td>计算机</td>
  78.         </tr>
  79.     </table>
  80.  
  81.     </body>
  82. </html>

九 form标签

语义：标记表单

  1. #1、什么是表单？
  2.     表单就是专门用来接收用户输入或采集用户信息的
  3.  
  4. #2、表单的格式
  5.     <form>
  6.         <表单元素>
  7.     </form>

链接：https://www.processon.com/view/link/5aeea789e4b084d6e4bf6911

图片:https://pan.baidu.com/s/1db6o--q557aKmtYJSBsyqA

  1. 在form内还可以添加一种标签
  2. <fieldset>添加边框
  3.     <legend>注册页面</legend>
  4.     表单控件......
  5. </fieldset>

补充知识（了解即可）

  1. <html>
  2.     <head>
  3.         <title>表单练习</title>
  4.         <meta charset="utf-8"/>
  5.     </head>
  6.     <body>
  7.         <form action="http://www.baidu.com">
  8.             <fieldset>
  9.                 <legend>注册页面</legend>
  10.                 <p>
  11.                     账号：<input type="text" placeholder="请输入你的用户名" name="user">
  12.                 </p>
  13.  
  14.                 <p>
  15.                     密码：<input type="password" placeholder="请输入你的密码" name="password">
  16.                 </p>
  17.  
  18.                 <p>
  19.                     性别：
  20.                     <input type="radio" name="gender" value="male">男
  21.                     <input type="radio" name="gender" value="female">女
  22.                     <input type="radio" name="gender" checked="checked" value="none">保密
  23.                 </p>
  24.  
  25.                 <p>
  26.                     <!--注意点：单选框or复选框都需要指定相同的name值-->
  27.                     爱好：
  28.                     <input type="checkbox" name="sport" value="basketball">篮球
  29.                     <input type="checkbox" name="sport" value="football">足球
  30.                     <input type="checkbox" checked="checked" name="sport" value="crazy">足浴
  31.                 </p>
  32.  
  33.                 <p>
  34.                     简介：
  35.                     <textarea name="" id="" cols="30" rows="10" name="desc"></textarea>
  36.                 </p>
  37.  
  38.                 <p>
  39.                     生日：
  40.                     <input type="date" name="birth">
  41.                 </p>
  42.  
  43.                 <p>
  44.                     邮箱：
  45.                     <input type="email" name="email">
  46.                 </p>
  47.  
  48.                 <p>
  49.                     电话：
  50.                     <input type="number" name="phone">
  51.                 </p>
  52.  
  53.                 <p>
  54.                     <input type="submit" value="注册">&nbsp;&nbsp;&nbsp;&nbsp;
  55.                     <input type="reset" value="清空">
  56.                 </p>
  57.  
  58.             </fieldset>
  59.         </form>
  60.  
  61.     </body>
  62. </html>

练习

 
 
 

5月25日 python学习总结 HTML标签的更多相关文章

  1. 4月25日 python学习总结 互斥锁 IPC通信 和 生产者消费者模型

    一.守护进程 import random import time from multiprocessing import Process def task(): print('name: egon') ...

  2. 4月2日 python学习总结

    昨天内容回顾: 1.迭代器 可迭代对象: 只要内置有__iter__方法的都是可迭代的对象 既有__iter__,又有__next__方法 调用__iter__方法==>得到内置的迭代器对象 调 ...

  3. 4月8日 python学习总结 模块与包

    一.包 #官网解释 Packages are a way of structuring Python's module namespace by using "dotted module n ...

  4. 4月12日 python学习总结 继承和派生

    一.继承 什么是继承:   继承是一种新建类的方式,在python中支持一个子类继承多个父类   新建类称为子类或派生类   父类可以称之为基类或者超类   子类会遗传父类的属性 2.  为什么继承 ...

  5. 4月11日 python学习总结 对象与类

    1.类的定义 #类的定义 class 类名: 属性='xxx' def __init__(self): self.name='enon' self.age=18 def other_func: pas ...

  6. 6月15日 python学习总结 Django模板语言相关内容

    Django模板语言相关内容   Django模板系统 官方文档 常用语法 只需要记两种特殊符号: {{  }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 {{ 变量名 }} ...

  7. 5月31日 python学习总结 JavaScript概述

    JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...

  8. 6月11日 python学习总结 框架理论

    Web框架本质及第一个Django实例   Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web ...

  9. 4月3日 python学习总结

    1. 列表生成器 l=['egg%s' %i for i in range(100) if i>20 ] print(l) 若将 [ ] 换成 ( ),则为生成器表达式,结果是一个迭代器 #求文 ...

随机推荐

  1. SQL代码规范

    1.  建表规约 1)   表中字段名称 a)    表达是否概念的字段,必须使用is_xxx的方式命名,数据类型是bit b)    小数类型为decimal,禁止使用float和double. 说 ...

  2. Bootstrap提供的CDN服务标签与下载文档

    目录 1.引入Bootstrap提供的CDN服务 1.选择下载Bootstrap CDN 二:下载Bootstrap官方文档 1.进入Bootstrap官网,选择3版本中文档. 1.引入Bootstr ...

  3. 5.1 Paralles 为虚拟机设置静态ip

    一.配置独立ip的环境 前面研究了k8s的组件,核心概念,网络模型,都了解了一遍,现在就要进入实战了,摆在面前的一座大山,必须克服才行---虚拟机搭建,及网络环境配置. 先说说本文的运行环境: mac ...

  4. Solution -「SV 2020 Round I」「SRM 551 DIV1」「TC 12141」SweetFruits

    \(\mathcal{Description}\)   link.   给定 \(n\) 个水果,每个结点可能有甜度 \(v_i\),或不甜(\(v_i=-1\)).现在把这些水果串成一棵无根树.称一 ...

  5. 利用 kubeasz 给 suse 12 部署 kubernetes 1.20.1 集群

    文章目录 1.前情提要 2.环境准备 2.1.环境介绍 2.2.配置静态网络 2.3.配置ssh免密 2.4.批量开启模块以及创建文件 2.5.安装ansible 2.5.1.安装pip 2.5.2. ...

  6. Error from server error dialing backend remote error tls internal error

    # kubectl exec -it mysql-master-8cfb64ff9-ct4dx -n prophet -- /bin/bash Error from server: error dia ...

  7. 超简单集成 HMS ML Kit 实现最大脸微笑抓拍

    前言 如果大家对 HMS ML Kit 人脸检测功能有所了解,相信已经动手调用我们提供的接口编写自己的 APP 啦.目前就有小伙伴在调用接口的过程中反馈,不太清楚 HMS ML Kit 文档中的 ML ...

  8. 【计理01组04号】JDK基础入门

    java.lang包 java.lang包装类 我们都知道 java 是一门面向对象的语言,类将方法和属性封装起来,这样就可以创建和处理相同方法和属性的对象了.但是 java 中的基本数据类型却不是面 ...

  9. ESP32-S3 arduino 开发环境搭建

    ESP32-S3 arduino 简要描述 在github上搜索arduino-esp32,找到并打开espressif/arduino-esp32仓库,从master主分支切换到esp32-s3-s ...

  10. csaw密码

    题目:AAoHAR1TIiIkUFUjUFQgVyInVSVQJVFRUSNRX1YgXiJSVyJQVRs=写python脚本: import base64 ciphertext="AAo ...