HTML常用标签

注释

• vscode快捷键： ctrl+/

• <!-- <h2>这是一个二级标题</h2> -->
  

文本格式化

• b：加粗

  <p><b>这是b标签</b></p>
  

• big：加大

  <p><big>这是big标签</big></p>
  

• em：着重，自带斜体

  <p><em>这是em标签</em></p>
  

• i：斜体

  <p><i>这是i标签</i></p>
  

• small：小号

  <p><small>这是small标签</small></p>
  

• strong：着重，自带加粗

  <p><strong>这是strong标签</strong></p>
  

• sub：下标

  <p>这是一个下标的化学分子式H<sub>2</sub>O</p>
  

• sup：上标

  <p>这是一个上标的计算式2<sup>3</sup></p>
  

• ins：下划线

  <p><ins>这是ins标签</ins></p>
  

• del：删除线

  <p><del>这是del标签</del></p>
  

标题

• 双标签，容器级

• 作用：只添加语义

• 权重：一般只设置一个h1

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
  

段落与换行

段落

<p>这是一个段落</p>

换行

<p>这是一个段落，在这里进行换行，<br>这是第二段落</p>

图像

标签

• 单标签

• 图片类型：jpg、png、gif

<img src="01.jpg" />

属性

• src：路径

  • 绝对路径

    • 在计算机的路径

     <img src="C:/Users/%E5%82%BB%E5%82%BB%E5%88%86%E4%B8%8D%E6%B8%85/Documents/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/HTML5%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91/img/01.jpg" />
    

    • 互联网上的路径

     <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.IiId9vE8cXMlE_msERXPVQHaEK?w=328&h=185&c=7&r=0&o=5&dpr=1.25&pid=1.7" />
    

  • 相对路径：相对该HTML的位置（建议）

  <img src="img/02.jpg" />
  

• width：宽度

  <img src="img/01.jpg" width="100px" />
  

• height：高度

  <img src="img/01.jpg" height="300px"/>
  

• border：边框

   <img src="img/01.jpg" height="300px" border="20px"/>
  

• title：鼠标悬停时提示文本

   <img src="img/01.jpg" height="300px" title="点击查看源网页"/>
  

• alt：没找到图像的替换文本(建议使用）

  <img src="img/03.jpg" alt="刘亦菲"/>
  

音频和视频

音频

• 双标签

• src设置路径

• 支持音频格式：mp3、ogg、wav

• 必须要有控制条

    <audio src="01.mp3"       controls="controls"></audio>
  

视频

• 双标签

• src设置路径

• 支持视频格式：mp4、ogg、webm

• 必须要有控制条

    <video src="01.mp4" controls="controls"></video>
  

超链接

标签

• 双标签

• 添加超链接，进行跳转

  <a href="http://www.lagou.com">跳转到拉勾</a>
  

  跳转到拉勾

属性

• href：超文本引用</mark>，即路径。href="目标地址 "

• 何处跳转

  • _self：默认值，在当前窗口打开

  • _blank:在新的窗口打开

  <a href="http://www.baidu.com" target="_blank">跳转到百度</a></pre>
  

  跳转到百度

• title：悬停时的提示文本

锚点

1. 设置锚点

   • 方法一：目标位置添加id="mubiao"

    <h2 id="mubiao">纯文本格式</h2>
   

   • 方法二超链接添加name="mubiao"

     <a name="mubiao"></a>
   

2. 在要点击的超链接添加href="#mubiao"

   a href="#mubiao">纯文本格式</a>
   

无序列表

• ul内部嵌套li，li里面可以接着嵌套

• 只搭建结构，没有样式

• 无先后之分

  <ul>    
      <li>
        <h4>红楼梦</h4>
        <ul>
          <li>林黛玉</li>
          <li>薛宝钗</li>
          <li>王熙凤</li>
        </ul>
      </li>
      <li>西游记</li>
      <li>水浒传</li>
      <li>三国演义</li>
    </ul>
  

有序列表

• <ol><li></li><li></li></ol>

• ol内部嵌套li，li里面可以接着嵌套

• 有先后之分

  <h3>国土面积排行</h3>
    <ol>
      <li>俄罗斯</li>
      <li>加拿大</li>
      <li>
        <h4>中国</h4>
        <ol>
          <li>新疆</li>
          <li>西藏</li>
          <li>内蒙古</li>
        </ol>
      </li>
    </ol>
  

定义列表

• dl：结构、dt：主题、dd：解释项

• dl内部只能嵌套dt和dd

• dd是对dt的进一步解释，解释的是离得最近的那个dt

• dl后面可以多个dt，dt后面可以多个dd

• dt和dd都是容器级

  <dl>
      <dt>张三</dt>
      <dd>城市：北京</dd>
      <dd>年龄：18</dd>
      <dt>李四</dt>
      <dd>城市：上海</dd>
      <dd>年龄：20</dd>
      <dd>学校：外国语学校</dd>
      <dt>王五</dt>
    </dl>
  

布局标签

div标签

• 双标签，容器级

• 划分网页区域

  <div style="color:blue; background: red;">哈哈哈</div>
  

  <div style="color:blue; background: red;">哈哈哈</div>

span标签

• 双标签，容器级

• 局部调整

  <h2>心情：<span style="color:red;">哈哈哈</span></h2>
  

表格

表格基础

table属性

• 可以添加border边框属性

• th：表头自带CSS样式效果，文字显示粗体加粗

• 表格的单元格之间有默认的空隙， 会导致双线边框。

  • 解决方法： style="border-collapse: collapse;"表示边框塌陷

  <table border="1" style="border-collapse: collapse;">
      <tr>
        <th>1</th>
        <th>2</th>
      </tr>
      <tr>
        <td>(1，1)</td>
        <td>(1，2)</td>
      </tr>
      <tr>
        <td>(2，1)</td>
        <td>(2，2)</td>
      </tr>
    </table>
  

合并单元格

• 左右合并：colspan="2"

• 上下合并：rowspan="2"

• 技巧

  1. 先写出所有tr
  2. 再添加所有td，数统一线上数目
  3. 看是如何合并的

    <table border="1" style="border-collapse: collapse;">
      <tr>
        <td colspan="2">1</td>
        <td rowspan="2">2</td>
      </tr>
      <tr>
        <td rowspan="2">3</td>
        <td>4</td>
      </tr>
      <tr>
        <td colspan="2">5</td>
      </tr>
    </table>
  

表格分区

• 分区标签

  • caption：标题
  • th：头部
  • td：主题
  • tfoot：页脚

• 技巧

  • 先写各个分区
  • 再填充分区
  • 如有合并单元格，便合并

  <table border="1" style="border-collapse: collapse;">
      <caption>各地区固定资产投资情况</caption>
      <thead>
        <tr>
          <th rowspan="2">地区</th>
          <th colspan="2">按总量分</th>
        </tr>
        <tr>
          <th>自年初累计(亿元)</th>
          <th>比去年同期增长(%)</th>
        </tr>
      </thead>
      
      <tbody>
        <tr>
          <td>全国</td>
          <td>123456.78</td>
          <td>9.5</td>
        </tr>
        <tr>
          <td>全国</td>
          <td>123456.78</td>
          <td>9.5</td>
        </tr>
        <tr>
          <td>全国</td>
          <td>123456.78</td>
          <td>9.5</td>
        </tr>
        <tr>
          <td>全国</td>
          <td>123456.78</td>
          <td>9.5</td>
        </tr>
        <tr>
          <td>全国</td>
          <td>123456.78</td>
          <td>9.5</td>
        </tr>
      </tbody>
    </table>
  

表单

表单域标签

• 功能性标签，最终信息提交到服务器

• 双标签，容器级

• 属性

  • action：服务器地址（url）
  • method：提交方式（get/post）
  • name：名称

  <form action=""></form>
  

表单元素

input标签

• 单标签，特殊文本
• 通过标签属性实现功能

标签属性

type

• text：单行文本框

  <input type="text" value="默认输入文本" >  
  

• password：密码

  <input type="password">  
  

• radio：单选框（==几个一起用==）

  <input type="radio" name="sex" /> 男
  <input type="radio" name="sex" /> 女  
  

• checkbox：复选框（==同name，方便CSS==）

  <input type="checkbox" name="hobby" /> 唱歌
  <input type="checkbox" name="hobby" /> 代码
  <input type="checkbox" name="hobby" /> 运动  
  

• button：普通按钮

  <input type="button" value="普通按钮">
  

• reset：重置按钮

  <input type="reset" value="重置按钮">
  

• submit：提交按钮

  <input type="submit" value="提交按钮">
  

• image：图片按钮（与提交一样）

  <input type="image" src="01.jpg">
  

• file：文件上传（==multiple="multiple"设置了则可以选择多个文件==）

  <input type="file" multiple="multiple" />  
  

• hidden：隐藏输入字段

• name：名称

• value：默认文本

• size：宽度

• checked：默认备选中项

  <input type="radio" name="sex" checked="checked" /> 男  
  

• maxlenght：最大输入字符

文本域<textarea>

• 输入多行文字
• 双标签，本身是特殊文字
• 可以设置默认的文字，双标签之间的文字就是默认的文字

属性

• rows：最大行数

• cols：最大列数，即每行最多多少个字节

  <textarea rows="5" cols="30">请书写一个200字的自我介绍</textarea>
  

下拉菜单

• 双标签，文本级

• 默认选中项：selected="selected"

  <option selected="selected">北京</option>  
  

• 分组管理：select>optgroup>option

  • optgroup可以设置label属性，添加分组标签名

  <select>
        <optgroup label="国内">
          <option>北京</option>
          <option>上海</option>
          <option selected="selected">广州</option>
          <option>厦门</option>
        </optgroup>
        <optgroup label="国外">
          <option>伦敦</option>
          <option>东京</option>
          <option>纽约</option>
        </optgroup>
      </select>
  

label标签

• 标记或者是绑定几个元素

• 方法一：

  • 设置id，绑定内容用<label>包裹，label设置for属性，值为id属性值

    <input type="radio" name="sex" checked="checked" id="nan"><label for="nan"> 男</label>
    

• 方法二

  • 包裹住需要绑定的元素和内容（绑定对象离得近时使用）

    <label><input type="checkbox" name="hobby"> 绘画</label>
    

字符实体

• &开头，；结尾

• 区分大小写

• 空格：&nbsp；

• 版权：&copy；

  <p>这是一个连续的空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</p>
    <p>这是一个版权符号&#169;</p>