HTML基本标签归纳总结

1. HTML发展史

• HTML是什么
  • HyberText Markup Language
  • 使用 标签 来描述页面的 内容 和 结构
• HTML 4.01, 1998
  • 样式与内容分离，CSS支持
  • Doctype（当前页面遵循什么版本）
• Doctype的作用
  • 指定html页面使用的标准和版本
  • 浏览器根据doctype决定使用哪种渲染模式（不写是怪异模式）
• 渲染模式
  • Quirks Mode 怪异模式（html4之前）
  • Almost Standard Mode 准标准模式（针对严苛的版本）
  • Standard Mode 标准模式
• XHTML 1.0, 2000
  • 用XML语法重新定义HTML
  • 语法严格要求
• XHTML 2.0
  • 不兼容历史，去除样式标签，去除 img a，彻底修改form，开发者不欢迎 浏览器不支持
• HTML 5
  • 2008年 html5草案发布
• HTML 5设计思想
  • 兼容已有内容
  • 避免不必要的复杂性（例如doctype写法简洁化）
  • 解决现实问题（本地存储 定位等）
  • 优雅降级（canvas里可以写html，根据浏览器支持决定与否解析，或者不支持canvas时图片代替）
  • 尊重事实标准
  • 用户》开发者》浏览器厂商》标准制定者》理论完美（从用户出发逐层完善）
• HTML 5中的变化
  • doctype meta
  • 新增语义化标签和属性
  • 去掉纯展示型标签
  • canvas，video，audio，离线，本地存储，拖拽等
• 语法
  • 标签不区分大小写，推荐小写
  • 空标签可以不闭合，比如input是通过属性指定的，meta
  • 属性不必引号，推荐双引号
  • 某些属性可以省略，比如required，readonly

2. HTML中的文本标签

• p标签，p会自动闭合，但推荐写闭合

• h1 ~ h6

• hr段落级别的话题切换（横线）

  <h3>title</h3>
  <p>paragraphe of topic one</p>
  <hr>
  <p>paragraphe of topic two</p>
  复制代码
  

• 列表

  • 有序列表

    <h1>university list</h1>
    <ol start="1">
        <li>THU</li>
        <li>PKU</li>
        <li>FDU</li>
    </ol>
    <!--start属性表示从什么开始-->
    复制代码
    

  • 无序列表

    <h1>university list</h1>
    <ul>
        <li>THU</li>
        <li>PKU</li>
        <li>FDU</li>
    </ul>
    <!--列表嵌套会产生实心以及空心圆点-->
    复制代码
    

  • 定义列表

    <h3>霸王别姬</h3>
    <dl>
        <dt>导演：</dt>
        <dd>陈凯歌</dd>
        <dt>主演：</dt>
        <dd>张国荣</dd>
        <dd>张丰毅</dd>
        <dd>巩俐</dd>
        <dt>上映日期：</dt>
        <dd>1993-01-01</dd>
    </dl>
    <!--描述键值对-->
    <!--要遵循嵌套规则，浏览器会容错（其他样式可能会乱）-->
    复制代码
    

• 引用

  <blockquote cite="http://www.google.com">
      <p>paragraphe</p>
  </blockquote>
  <p>My favourite color is <cite>golden</cite> , and <q>blue</q> </p>
  复制代码
  

• 预格式化文本

  <!--保留格式-->
  <pre>第一行  空   格 
  第二行</pre>
  复制代码
  

• 代码

  <pre><code></code></pre>
  <!--格式不变的展示代码-->
  复制代码
  

• figure

  <figure>
      <img src="https://xxx" alt="xx表">
      <figcaption>xx表</figcaption>
  </figure>
  复制代码
  

• 网页总体结构

  <header>
      <nav></nav>
  </header>
  <main>
      <article>
          <section>
              <h2></h2>
              <p></p>
          </section>
      </article>
      <article></article>
  </main>
  <aside></aside>
  <footer></footer>
  复制代码
  

• 强调

  • strong：重要性、严重性和紧急性
  • em：从一句话中突出某个词语
  • b：将词语从视觉上和其他部分区分，比如一篇论文摘要中的关键词
  • i：换一种语调去说一句话时，比如其他语言翻译，对话中的旁白

• 定义与缩写

  • 定义：dfn

    <p><dfn> HTML是blablabla </dfn></p>
    复制代码
    

  • 缩写：abbr

    <p><abbr title="World Wide Web Consortium">W3C</abbr></p>
    复制代码
    

• 上标和下标

  <p>E = MC<sup>2</sup></p>
  <p>CO<sub>2</sub></p>
  复制代码
  

• mark

  • 和用户当前行为相关的突出，比如在搜索结果中匹配到的词
  • 一部分内容需要在后面引用时

• 插入和删除

  <p><del>原价：299元</del><ins>双11特价：999元</ins></p>
  复制代码
  

• 换行控制

  • 尽量避免，手机上可能会乱，br标签
  • wbr标签模拟空格单词换行

• div和span

  • 实在找不到其它更符合语义的标签时使用

• 实体(Entity)字符

3. HTML链接

<a href="http://www.google.com">google</a>
复制代码

• www.example.com/post/2016/f…

  • Scheme => http
  • Host => www.example.com
  • Path => post/2016/fe.html
  • Query => print=1&color=no
  • Hash => heading

• 省略协议

  • 浏览器会根据当前页面的链接的协议补充

  <a href="//po.ssl.qhing.com/xxx.png">查看图片</a>
  复制代码
  

• 省略协议和Host

  • 浏览器会根据当前页面的链接的协议和host补充

  <a href="/index.html">返回首页</a>
  复制代码
  

  • 调试模式=>选中元素节点=>consol中输入0.href)

• 相对路径与绝对路径

  • href="/a/b/c.html" => 绝对路径
  • href="../../c.html" => 相对路径

• 页面内链接（锚点）

  <h1>锚点</h1>
  <p><a href="#test">到test</a></p>
  <p>0</p><p>0</p>
  <p>0</p><p>0</p>
  <p>0</p><p>0</p>
  <p id="test">test</p>
  <p><a href="#">回顶部</a></p>
  <p>0</p><p>0</p>
  <p>0</p><p>0</p>
  <p>0</p><p>0</p>
  复制代码
  

• 链接目标

  <a href="http://www.google.com" target="_self">google(当前窗口)</a>
  <a href="http://www.google.com" target="_blank">google(新窗口)</a>
  <a href="http://www.google.com" target="abc">google(abc)</a>
  <a href="http://www.baidu.com" target="abc">baidu(abc)</a>
  复制代码
  

4. HTML图片

    <img src="path/img.jpg" alt="替代文字" width="300" height="200">
    <!--图片未加载时先占位 防止加载变形 有时CSS中指定宽高不合适-->
    <figure>
        <img src="path/img.jpg" alt="替代文字">
        <figcaption>图片说明</figcaption>
    </figure>
复制代码

• 指定图片宽高
  • 不指定宽高：原图大小显示
  • 指定宽度：按比例缩放到指定宽度
  • 指定高度：按比例缩放到指定高度
  • 指定高宽：强制按指定宽高显示
• 常用图片格式
  • jpg 照片，适合色彩丰富的图片
  • png 色彩较少时使用，png24可以半透明
  • gif 无法半透明，可以多帧做动画
  • webp google出的图片压缩格式

5. HTML表格

<table border="1">
    <thead>
        <tr>
            <th>浏览器</th>
            <th>渲染引擎</th>
            <th>JS引擎</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Chrome</th>
            <td>Blink</td>
            <td>V8</td>
        </tr>
        <tr>
            <th>Opera</th>
            <td>Blink</td>
            <td>V8</td>
        </tr>
        <tr>
            <th>Firefox</th>
            <td>Gecko</td>
            <td>SpiderMonkey</td>
        </tr>
        <tr>
            <th>Edge</th>
            <td>EdgeHTML</td>
            <td>Chakra</td>
        </tr>
    </tbody>
</table>
复制代码

• 合并行

<table border="1">
    <thead>
        <tr>
            <th>浏览器</th>
            <th>渲染引擎</th>
            <th>JS引擎</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Chrome</th>
            <td rowspan="2">Blink</td>
            <td rowspan="2">V8</td>
        </tr>
        <tr>
            <th>Opera</th>
        </tr>
        <tr>
            <th>Firefox</th>
            <td>Gecko</td>
            <td>SpiderMonkey</td>
        </tr>
        <tr>
            <th>Edge</th>
            <td>EdgeHTML</td>
            <td>Chakra</td>
        </tr>
    </tbody>
</table>
复制代码

• 表格说明

  • caption是table的第一个元素

    <tanble>
        <caption></caption>
        <thead></thead>
    </table>
    复制代码
    

• 列组（colgroup）

  <colgroup>
      <col class="browser">
      <col class="xxx" span="2">
  </colgroup>
  
  

6. HTML表单

使用form获取让用户提供数据

    <form action="/echo" method="POST">
        <p>用户名: <input type="text" name="username"></p>
        <p>密码: <input type="password" name="password"></p>
        <p><button type="submit">登录</button>></p>
    </form>

GET请求:从服务器获取，安全，不会对服务器改动，每次操作返回结果相同，浏览器会缓存get请求，数据传输在url中用键值对拼接（一次性发送）

POST请求: 每次提交数据，会修改，浏览器不会缓存post请求，因为会提交改动，不会把数据放在路径中，会编码后放在http的body中（先发送head再body）

form表单中不写method默认是GET

• URL编码

  • 提交数据中有空格或者/以及+等，会进行转义，再传输会出现%20之类的转义字符
  • 解码：js提供decodeURIComponent('a%2Bb&password=a+b') => a+b&password=a+b

• HTTP method

  • GRT/POST/HEAD/PUT/DELETE/OPTIONS

• 单行文本框

  <input name="username" value="xyf" autofocus>
  <!--name是发送数据的key，必填，默认值可以先写value-->
  <!--placeholder属性-->
  <!--autofocus 焦点直接移到input框-->
  

• 多行文本框

  <textarea cols="40" rows="8"></textarea>
  

• 输入验证

  <form action="/echo">
      <p><input required minlength="2" maxlength="10"></p>
      <p><input pattern="1\d{10}" placeholder="输入手机号"></p>
      <p><button type="submit">提交</button></p>
  </form>
  

• type

  • type= search/email/url/submit
  • 作用：手机端键盘布局，以及验证

• novalidate禁止原生验证

  <form novalidate> </form>
  

• 单选框 radio

   <form action="/echo">
      <p>你最喜欢什么水果？</p>
      <p>
          <input type="radio" name="fruit" value="apple">苹果
          <input type="radio" name="fruit" value="banana">香蕉
          <input type="radio" name="fruit" value="mango">芒果
      </p>
      <p><button>提交</button></p>
  </form>
  

• 复选框 checkbox

   <form action="/echo">
      <p>你最喜欢什么水果？</p>
      <p>
          <input type="checkbox" name="fruit" value="apple">苹果
          <input type="checkbox" name="fruit" value="banana" checked>香蕉
          <input type="checkbox" name="fruit" value="mango">芒果
      </p>
      <p><button>提交</button></p>
  </form>
  

  GET /echo?fruit=apple&fruit=banana&fruit=mango

• label标签（提升可用性和易用性）

点击label也可以切换选中元素状态
label也可以与input关联，方便读屏软件识别要求输入内容
label通过for和id进行关联

 <form action="/echo">
        <p>你最喜欢什么水果？</p>
        <p>
            <input type="checkbox" name="fruit" value="mango" id="mango">
            <label for="mango">芒果</label>
            <label>
                <input type="checkbox" name="fruit" valeu="apple">苹果
                <input type="checkbox" name="fruit" valeu="banana">香蕉
            </label>
        </p>
        <p>
            <label for="name">请输入你的名字：</label>
        </p>
        <p><input id="name"></p>
        <p><button>提交</button></p>
    </form>

• select标签

<select name="fruit">
            <option value="1">one</option>
            <option value="2">two</option>
            <option value="3">three</option>
            <option value="4">four</option>
            <option value="5">five</option>
            <option value="6">six</option>
        </select>

提交数据：fruit=3
select可以多选，需要command，size是显示个数，不写默认显示一个

<select name="fruit" multiple size="3">
</select>

• select分组

<label>目的城市：</label>
    <select name="country">
        <optgroup label="美洲">
            <option>多伦多</option>
            <option >温哥华</option>
            <option>里约热内卢</option>
        </optgroup>
        <optgroup label="亚洲">
            <option>北京</option>
            <option >上海</option>
            <option>新加坡</option>
        </optgroup>
        <optgroup label="欧洲">
            <option>伦敦</option>
            <option >巴黎</option>
            <option>柏林</option>
        </optgroup>
    </select>

select分组效果.png

• 隐藏 hidden

  希望数据提交但是不在页面上展示
  GET/echo?fruit=banana&secret=1

   <form action="/echo">
      <p>你最喜欢什么水果？</p>
      <p>
          <input type="checkbox" name="fruit" value="apple">苹果
          <input type="checkbox" name="fruit" value="banana" checked>香蕉
          <input type="checkbox" name="fruit" value="mango">芒果
      </p>
      <p><button>提交</button></p>
      <input type="hidden" name="secret" value="1">
  </form>
  

• 文件选择上传

<form action="/echo" method="POST" enctype="multipart/form-data">
        <p>
          <label>您的姓名：</label>
          <input name="fullname">
        </p>
        <p>
           <label>请选择简历：</label>
           <input type="file" name="resume">  
        </p>
        <p><button>提交</button></p>
    </form>

multipart分割文件提交接收后再合成

POST /echo
------WebKitFormBounadryMTXE8T65X0       //分割标识+乱码（起始标识）
Content-Disposition: from-data; name="fullname"     //form-data表示form表单提交的数据， 第一个input里是fullname

aa                            //input框的值是aa 会空一行
------WebKitFormBounadryMTXE8T65X0       //第一段结束
Content-Disposition: from-data; name="resume"; filename="resume.txt"
Content-Type: text/plain          //文件上传格式

This is my resume.                  //文件正文上下会空行
   
------WebKitFormBounadryMTXE8T65X0       //第二段结束

input中加multiple属性可以多选上传
accept 接收文件格式设置

<input type="file" name="resume" multiple accept="image/*">  

• 日期时间 date & time

<form action="/echo">
       <p>date:<input type="date"></p>
       <p>datetime-local: <input type="datetime-local"></p>
       <p>month: <input type="month"></p>
       <p>week: <input type="week"></p>
       <p>time: <input type="time"></p>
    </form>

• 数字区间 number & range

<form action="/echo">
       <p>
            <label>身高(m):</label>
            <input type="number" min="0.5" max="2.5" step="0.01" name="height" value="1.7">
       </p>
       <p>
            <label>体重(kg):</label>
            <input type="range" min="10" max="150" step="0.1" name="weight" value="62">
            <output for="weight"></output>   <!--显示拖动数值 for表示源自哪里输入-->
       </p>
       <p>
            <label>BMI:</label>
            <output for="weight height"></output>
       </p>
    </form>

• 颜色选择 color

<input type="color">   //以#xxxx输出

• 提交button

不指定type 提交 => GET/echo?fullname=xxx&fruit=xxx&fruit=yyy
不写type默认submit
type="button" 行为要js实现
type="reset" 清空到最初状态

• form表单中回车默认提交

如果多个button 会默认触发第一个button的submit

• disable/readonly状态

• 表单设计原则

  • 帮助用户不出错
  • 尽早提示错误
  • 扩大选择、点击区域
  • 控件较多时要分组
  • 主要动作和次要动作区分