HTML常用标签

注释

• 语法
  • <!-- -->
• 注释快捷键
  • ctrl + /

标题标签

• 标签(Heading)

  • <h1>~<h6>
  • <h1>~<h6>标签都是双标签，且是容器级标签。

• 权重

  • <h1>在整个HTML中的权重非常高，内部应该放置HTML中最重要的内容，比如logo
  • <h1>由于非常重要，内部的文字对于提高搜索引擎排名也非常重要，为了防止作弊，如果一个页面出现多个<h1>，反而权重降低。约定俗成的，一个页面中只会出现一个<h1>

段落与换行

• <p></p>

• 段落标签
• 双标签，且为文本级标签。内部只能放置文本、图片、表单元素。

• <br/>

• breaking:强制换行符

文本格式化

• HTML中有部分标签是对文字进行格式化显示设置的，比如粗体和斜体等。
• 文本格式化的标签均为双标签，且为文本级标签，内部只能写文字。
• 包含的所有标签图片

图像标签

• 单标签，本身相当于一个特殊的文本。
• 在HTML文件，插入图片类型：png\jpg\gif
• 标签属性
  • 常用属性

  1. src(source)属性和路径

  • 相对路径：从HTML文件本身出发，根据相对的位置进行查找。

    • 同级查找：文件名+后缀格式

      <img src="hello.jpg">
      

    • 子级查找：先查找同级文件夹目录，然后通过关闭符号/进入文件夹查找里面的文件。

      <img src="img/img属性.jpg">
      

    • 上级查找：跳出当前文件夹到上一层，直到找到文件。

      <img src="../img属性.jpg">
      <img src="../upimg/img属性.jpg">
      

    • 绝对路径

      • 电脑盘符位置

        <img src="C:/Users/teacher/smile02.png">
        

      • 网址形式

        <img src="http://img3.imgtn.com/gp=0.jpg">
        

      • 从盘符出发的绝对路径的缺点：

        1. 盘符出发的路径不可移植，不可移动。
        2. 易出现中文字符，中文路径容易出现错误。
    • 路径实际应用

      1. 建议多使用相对路径，可适当使用网址形成的绝对路径。

      2. 使用相对路径必须将图片或文件与HTML同时上传，而且需要保持相对位置不变。

  2. alt属性

     • 含义：图片查找错误时，出现的替换文本。
     • 属性值：自定义的替换内容。

     <img src="" alt="这是一张微笑的照片">
     

  3. width\height属性

     • 属性值：以px为单位的数值，或者px省略不写。
     • 变换：如果不设置属性值，会以图片的原始尺寸加载；如果只设置了其中一个，另一个会等比例变换；如果两个都设置，按照设置的值加载。

  4. border属性

     • 属性值：数值，表示边框宽度为几像素

  5. title属性

     • 含义：设置的是鼠标悬停时的提示文本。
     • 属性值：自定义的提示文字内容。

       <img src="" title="点击查看源网站">
       

• 总结

  • <img>标签最重要的是src属性，尽量使用alt属性对图片进行说明，添加相对关键词可以有利于SEO搜索引擎优化。

音频标签

• <audio>是双标签,同图像标签有src属性
• 音频支持的格式：.mp3、.ogg、.wav
• 音频加载后需要使用controls属性，属性值controls，才会显示。

<audio src="" controls="controls"></audio>

视频标签

• <video>设置方式与<audio>相似
• 支持格式：.mp4、.ogg、.webm
• 视频也需要使用controls属性设置控制条，属性值也是controls

<video src="" controls="controls"></video>

超级链接

• <a>标签，双标签
• 作用：在指定的位置添加超级链接，提供用户进行点击和跳转。
• 实现两种跳转：跨页面跳转、页面内跳转
• 属性:

  • href属性

    • 超级文本引用，用于规定链接的目标地址。
    • 属性值：可使用相对地址或绝对地址

    //相对路径
    <a href="text.html"></a>
    

  • target属性

    • 含义：定义被链接的文档在何处跳转显示
    • 属性值
      1. _self: 默认值，跳转的页面在当前窗口打开
      2. _blank: 空白的，表示跳转的的页面在新窗口打开。

  • title属性

    • 与<img>标签类似，给用户提示该链接的功能是什么，提高用户体验。
    • 属性值：自定义的文字内容

    <a href="smile.html" title="点击查看源网页"><img src="images/smile.png"/></a>
    

• 两种特殊的锚点跳转方法

  • 页面内锚点跳转

    • 制作方法为两个步骤

      1. 设置锚点
      • 在目标位置找到任意一个标签，添加id属性。id属性值自定义规则：必须以字母开头，后面可以有字母、数字、下划线和横线，不区分大小写。

      <h2 id="mubiao">目标位置</h2>
      

      • 在目标位置添加一个空的<a>标签，只设置一个name属性，name属性值设置方式与id相同，也必须是唯一的。

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

      2. 添加链接
      • 在需要点击的位置设置<a>标签，给a的href属性值为#id或者#加a的name属性值。

      <a href="#mubiao">点击文本</a>
      

  • 跨页面锚点跳转

    • 综合了跨页面跳转和锚点跳转
    • 制作方法为两个步骤：
      1. 设置锚点（同上）
      2. 链接到锚点

      <a href="new.html#mubiao">点击文本</a>
      

列表（三种）

• 无序列表

  • <ul>和<li>
  • 快捷键：ul>li
  • 注意事项：
    1. <ul>内部只能嵌套<li>,<li>标签不能脱离
       单独书写。
       • <li>标签是经典的容器级标签，内部可以放置任意内容，甚至可以放一组ul>li无序列表结构。
       • 无序列表的作用只是搭建列表结构，没有添加样式前缀的功能，样式是由css负责。

• 有序列表

  • <ol>和<li>
  • 快捷键：ol>li
  • 注意事项：
    1. <ol>内部只能放<li>,<li>不能脱离<ol>单独书写。
    2. <li>是一个经典的容器级标签，内部可任意放置内容，甚至可以放ol>li
    3. 有序列表的作用只是搭建有顺序的列表结构，前面的数字排序样式不是<ol>标签的作用，而是css负责的。

• 定义列表

  • <dl>、<dt>和<dd>
  • 快捷键：dl>dt+dd (同级关系用+)
  • 含义：自定义列表不仅仅是一列项目，而是项目及其注释的组合。
  • 注意事项：
    1. <dl>内部只能嵌套<dt>和<dd>,<dt>和<dd>不能脱离<dl>单独书写。
    2. dl内部可以放多组dt和dd，每个dd解释说明的是前面的距离最近的一个dt。
    3. 每个dt后面dd可有0~多个，每个dd解释的都是前面距离最近的一个dt
    4. dt和dd也是容量级标签，内部可以放置任意内容。
    5. 定义列表中的缩进样式由css负责，标签只负责搭建语义结构。
    6. 配合css布局效果，最好每个dl只添加一组dt和dd，便于后期管理。

布局标签div和span

• <div>和<span>标签常用于布局工具，俗称盒子，是没有具体明确的语义的。

• <div>

  • 俗称大盒子。
  • 双标签，是最经典的容器级标签，内部可以放置任意内容。
  • 作用：多用于划分网页区域，进行结构布局。一搬将相关内容使用<div>包裹起来，整体设置大的布局效果。

• <span>

  • 俗称小盒子。
  • 双标签，容器级标签。
  • 作用：在不改变整体效果的情况下，可以辅助进行局部调整。

表格制作

• 表格基础

  • 创建一个简单的表格至少有三个标签：<table>、<tr>、<td>
  • 三者的关系：table>tr>td
  • <table>属性
    1. border属性
    2. 属性值：数字，表示像素值
  • 注意事项：表格的单元格之间有默认的空隙，会导致双线边框。
  • 解决方法：设置标签样式属性style,属性值：border-collapse:collapse;表示边框塌陷。
  • 表头单元格
    • 如果绘制表头，使用<th>(table head data)
    • 替换<td>的位置
    • <th>标签中自带默认的css样式效果，文字显示粗体居中。

• 合并单元格

  • 单元格属性，通过<th>和<td>的两个属性进行合并设置。
  • rowspan:跨行合并(上下的合并)
  • colspan:跨列合并(左右的合并)
  • 属性值：数字，表示跨几行或跨几列合并
  • 案例：

• 合并单元格案例源码：

  • 制作技巧

      1. <table border="1" style="collapse:collapse"></table>
      2. 列出所有行<tr></tr>
      3. 列出所有的列<th></th>、<td></td>，技巧：顶边对齐属于同一行
      4. 写完所有的列和所有的行之后，再查看哪个单元格有跨行或跨列，添加属性值（属性值的个数参考最小的单元格）。<td colspan="2"></td>
    

• 表格分区

  • 一个完整的表格分为四大区域

    1. 表格标题 caption
    2. 表格头部 thead,内部嵌套: tr>th
    3. 表格主体 tbody,内部嵌套：tr>td
    4. 表格页脚 tfoot,内部嵌套：tr>td

  • 四个分区可以选择性的进行组合

  • 注意：不论书写顺序如何颠倒，浏览器中的加载顺序都是按照caption、thead、tbody、tfoot执行的。

  • 案例

  • 制作技巧

      1. <table border="1" style="collapse:collapse"></table>
      2. 写caption、thead、tbody、tfoot四个大分区标签
      3. thead找行数、找列数,为单元格添加合并属性
      4. tbody找行数
    

表单的了解和制作

• 含义: 表单是用来收集用户输入的的信息的。
• 表单的组成(三部分组成)

  • 表单域

    1. 含义：相当于一个容器，用来容纳所有的表单控件和提示信息。可定义表单数据提交的url地址、数据提交到服务器的方法。

    2. <form>标签为双标签，容器级标签

    3. 属性值

       属性名	属性值	描述
       action	url	指定接收并处理表单数据的服务器程序的url地址
       method	get/post	用于设置表单数据的提交方式
       name	自定义名称	规定表单的名称

    4. 示例

       <form action="xxx.php" method="post/get" name="message">
         提示信息及表单控件书写位置
       </form>
       

  • 提示信息

    1. 含义：提示用户进行填写和操作

       <p>
         姓名：<input type="text">
       </p>
       

  • 表单控件(也称为表单元素)

    • 含义: 包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

    • <input>标签

      • 单标签，本身相当于一个特殊的文本。

      • input标签常用属性 由图可看出，type属性的值不同，决定了<input>标签的形态不同。

    • type属性的变化

      1. type = "text" (单行文本输入框)

         • 用户输入的单行文本的输入框，不能输入多行文字。
         • value属性定义默认的输入文字。

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

      2. type = "password"(密码输入框)

           <input type="password">
         

      3. type = "radio"(单选框)

      • 单选框一般都是成组出现。

      • 同一组单选框之间必须是互斥的关系，通过给同一组单选框都设置相同的name属性值实现。

          <input type="radio" name="sex"/>男
          <input type="radio" name="sex"/>女
          <!-- 设置相同的name属性值实现两个单选框的绑定 -->
        

      4. type = "checkbox"(复选框)
      • 复选框允许用户在有限数量的选项中选择零个或者多个选项。
      • 同一组复选框最好也设置相同的name属性值，这并不是为了保证互斥关系，而是便于后期维护与查看。

          <input type="checkbox" name="hobby"/>唱歌
          <input type="checkbox" name="hobby"/>跑步
          <input type="checkbox" name="hobby"/>瑜伽
        

      • 默认选中设置：checked = "checked"

          <input type="checkbox" name="hobby" checked="checked"/>唱歌
        

    • input按钮

      5. type = "button"

      6. type = "reset"

         • 重置按钮：将同一个<form>中填写的表单内容清空，恢复成默认。

      7. type = "submit"

         • 提交按钮：将填写数据提交到<from>中指定的后台服务器，并重置(reset)表单中填写的信息。

      8. type = "image"

         • 图片按钮：默认与提交按钮的效果相同，使用的图片需要利用src属性查找正确路径。

      9. type = "file"

         • 文件上传按钮，可以提供用户选择本地文件进行上传服务器。

         • multiple属性，选择多个文件上传

             <input type="file" multiple="multiple"/>
             <!-- 会显示已选择几个文件 -->
           

    • 文本域<textarea>

      • 双标签，本身相当于一个特殊的文字。
      • 文本域可以设置默认输入的文字，在双标签之间书写默认文字。
      • 两个标签属性，可以设置显示区域大小

        1. rows: 行，属性值是数字。

           • 数字是几表示文本框显示的最大行数，如果超过了行数会被隐藏并且出现滚动条。

        2. cols: 列，属性值是数字。

           • 数字是几，表示出现滚动条之后，每一行显示的最大字节数(一个汉字按2字节计算)

           <!-- 表示超过10行之后，滚动条确定每行20字节数 -->
            <textarea rows="10" cols="20">默认输入文字</textarea>
           

    • 下拉菜单

      • 需要至少两个标签完成结构

        1. <select>: 定义下拉菜单的整体结构
        2. <option>：定义下拉菜单的每一项

      • 均为双标签，文本级标签

      • select > option,option可以有任意多项。

      • 默认选中项，为第一项。但是可通过selected="selected"来设置

          <select>
            <option>成都</option>
            <option selected="selected">上海</option>
            <option>北京</option>
          </select>
        

      • 分组管理

        1. <optgroup>双标签
        2. select > optgroup > option
        3. <optgroup>可设置label属性，表示给这一组选项添加一个分组标签名，分组标签是不能被点击选择的。

          <select>
            <optgroup label="国内">
              <option>北京</option>
              <option>成都</option>
            </optgroup>
            <optgroup label="国外">
              <option>巴黎</option>
              <option>荷兰</option>
            </optgroup>
          </select>
        

    • label标签

      • 所有表单元素都可以通过绑定其他内容去扩大触发点击范围，只是需要使用<label>标签。

      • 如果将表单控件与提示内容使用<label>进行绑定后，当用户鼠标点击<label>内的提示内容时，浏览器就会自动将焦点转到和标签相关的表单控件上。

      • 绑定方法

        1. 表单元素设置id属性；label标签包裹其他内容；给label设置for属性(适合绑定：距离远的)

             <input type="radio" id="sport"/><label for="sport">运动</label>
           

        2. 直接使用<label>标签将绑定内容与表单元素一起进行嵌套（绑定距离近的）

             <label><input type="radio"/>运动</label>
           

了解字符实体

• 含义：不能直接书写，但是HTML中提前预留好的替换字符进行书写。

• 查询所有的字符实体(W3cshool在线手册)

• 使用方法

• 规则和建议

  • 规则：都是以&开头，以;结尾
  • 注意：实体名称大小写敏感
  • 建议：

    1. 使用实体名称，容易记忆。坏处：浏览器也许并不支持所有实体名称（对实体数字的支持却很好）

    2. 不需要强制记忆，查手册。