HTML笔记-常用元素

基础元素

标题

使用 h1~h6 元素标记六个等级标题。

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

标题使用的最佳方案：

1. 每个页面顶级标题 （h1）只使用一次
2. 确保在层次结构中以正确的顺序使用标题 h1 -> h2 -> h3
3. 可用的六个标题级别中，每页使用不超过三个

段落

使用 p 元素来标记段落

<p>我是一个段落，千真万确。</p>

列表

总共分为三种列表：有序列表、无序列表、描述列表

有序列表

有序列表需要按照项目的顺序列出来。

• ol 元素(order list): 有序列表, 直接子元素只能是 li 元素
• li 元素 (list item): 列表中的每一项

    <ol>
        <li>步骤1</li>
        <li>步骤2</li>
    </ol>

无序列表

用于标记列表项目顺序无关紧要的列表。

• ul 元素 (unordered list): 无序列表, 直接子元素只能是 li 元素
• li 元素 (list item): 列表中的每一项

	  <ul>
        <li>豆浆</li>
        <li>油条</li>
    </ul>

描述列表

用来标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等。

• dl 元素(definition list): 描述列表, 直接子元素只能是 dt 元素， dd 元素
• dt 元素(definition term): 列表中每一项的项目名
• dd 元素(definition description): 列表中每一项的具体描述
• 常见组合： dt 元素后面紧跟 dd 元素

    <dl>
    <dt>Coffee<dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
    <dl>

无语义元素

span元素

span 元素默认情况下跟普通文本无差别，用来对普通文本进行分类。

div元素

div 元素一般作为其他元素的父容器，将元素包住代表一个整体。用来把网页分割成多个独立的部分。

强调

斜体强调

用 em元素来标记斜体字来达到强调某些字效果。

 <p>I am <em>glad</em> you weren't <em>late</em>.</p>

粗体强调

用 strong 元素来标记粗体字来达到强调的效果。

 <p>This liquid is <strong>highly toxic</strong>.</p>

超链接

创建超链接

通过将文本或者其他内容包裹在 a 元素内，并给它一个 href 属性来创建一个基本链接。

• href 属性：指向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL
• title 属性：关于链接的补充信息
• target 属性：指定在何处显示链接的资源

<a href="https://www.baidu.com">baidu</a>

<!-- 添加title补充信息 -->
<a href="https://www.google.com" title="谷歌一下">google</a>

 <!-- 添加target， 默认_self当前页面， _blank 在新标签中打开 -->
<a href="https://www.baidu.com" target="_blank">baidu 打开新标签</a>

<!-- 图像转换为链接：使用超链接包裹图片 -->
<a href="https://www.google.com">
    <img src="images/japser.webp" alt="japser">
</a>

指向文档片段

超链接除了可以链接到文档外，也可以链接到文档片段（HTML 文档的特定部分）

1. 给要链接到的元素分配一个 id 属性
2. 同一文件：使用一个井号指向它
3. 非同一文件：URL 的结尾使用一个井号指向它

<h2 id="Mailing_address">邮寄地址</h2>
<a href="#Mailing_address">我们的地址（同一个页面）</a>
<a href="contact.html#Mailing_address">我们的地址（非同一个页面）</a>

其他使用方式

下载，邮件等使用方式

    /<!-- 下载 -->/
    <a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
    download="firefox-latest-64bit-installer.exe">
   下载最新的 Firefox 中文版 - Windows（64 位）
    </a> 
    /<!-- 邮件 -->/
    <a href="mailto:nowhere@mozilla.org?> Send nowhere</a>

伪链接

当我们点击链接时不希望打开URL而是希望干点儿别的事情。

• 没有指向具体地址链接
• 用来执行js代码（href中有js代码/使用onclick）
• 有时候可以当按钮使用

<a href="javascript:;" onclick="alert(`Hello HTML`)">弹出弹窗</a>

统一资源定位符

统一资源定位符（Uniform Resource Locator，URL）定义了在网络上的位置的一个文本字符串。

• URL 使用路径查找文件
• 绝对URL和相对URL
  • 绝对URL： 指向由其在 Web 上的绝对位置定义的位置
  • 相对URL：指向与链接的文件相关的位置

文件路径

文件路径指在文件系统中文件所在的位置。

• 指向当前目录：指定想要链接的文件名（ 例如： contact.html）
• 指向子目录：先进入文件的项目目录，再指定想要链接的文件名（例如：project/contact.html）
• 指向上级目录：返回上一个目录级使用两个英文点号表示（..）（例如：.._project_contact.html）

其他元素

引用

HTML 也有用于标记引用的特性，分为块引用、行内引用

块引用

块级内容从其他地方被引用，应使用 blockquote 元素包裹元素，再用 cite 属性指向引用的资源

• 默认会增加缩进，作为引用的一个指示符
• cite 属性内容需使用 JavaScript 或 CSS，浏览器才会显示cite的内容。

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
        <p>The <strong>HTML <code>&lt;blockquote&gt;</code> 	Element</strong></p>
 </blockquote>

行内引用

行内元素从其他地方被引用，使用 q 元素包裹元素，再用 cite 属性指向引用的资源

• 默认将其作为普通文本放入引号内表示引用

<p>The quote element — <code>&lt;q&gt;</code> — is
        <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
        intended for short quotations that don't require paragraph breaks.  
        </q>
</p>

缩略语

使用 abbr 元素包裹一个缩略语或缩写， 并在 title 属性中提供解释。

 <p><abbr title=“National Aeronautics and Space Administration”>NASA</abbr>做了一些动人心弦的事情。</p>

标记联系方式

使用 address 元素 用于标记联系方式。

<address>
    <p>Chris Mills, Manchester, The Grim North, UK</p>
 </address>

上标和下标

使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标。

• sup 元素： 上标
• sub 元素： 下标

<p>咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。</p>
<p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>

多媒体嵌入

图片

通过 img 元素把图片放到网页上，并给它一个 src 属性来使其生效。* img 元素素为空元素，也是可替换元素。

• src 属性：图片来源，可以使用远程图片地址&本地图片地址（绝对路径/相对路径）
• alt 属性： 备选文本，图片失效的时候显示的文本
• width和height 属性(不常用)：可以指定宽度和高度
• title 属性: 提供需要更进一步的支持信息

<img src="./images/0d19c1f8c4894a6db13bec41759041dd.jpeg" 
        alt="萌娃" 
        width="100px"
        height="100px"
        title="多看萌娃,你将拥有一只软萌崽">

图片说明 为图片搭配说明可使用可附标题内容figure 元素 和相关标题 figcaption 元素

<figure>
    <img src="./images/0d19c1f8c4894a6db13bec41759041dd.jpeg" 
    alt="jasper" 
    width="100px" 
    title="多看jasper,你将拥有一只软萌崽" 
    >
   <figcaption>多看jasper,你将拥有一只软萌崽</figcaption>
</figure>

视频

使用 video 元素嵌入一段视频。

• src 属性： 指向你想要嵌入网页当中的视频资源
• controls 属性： 用户必须能够控制视频和音频的回放功能
• 后备内容：当浏览器不支持video 元素的时候显示

<video src="rabbit320.webm" controls>
            <p>你的浏览器不支持 HTML5 视频。可点击<a 	href="rabbit320.mp4">此链接</a>观看</p>
</video>

多个播放源使用

 <video controls>
            <source src="rabbit320.mp4" type="video/mp4">
            <source src="rabbit320.webm" type="video/webm">
            <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

音频

使用 audio 元素嵌入一段音频。

• 不支持 width/height 属性（没有视觉部件）
• 不支持 poster 属性

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>你的浏览器不支持 HTML5 音频，可点击<a href="viper.mp3">此链接</a>收听。</p>
</audio>

表格

表格元素

• able 元素：用来定义表格内容
• tr 元素：用来定义表格中的行
• td 元素： 用来定义表格中的单元格
• th元素：用来定义表格内的表头单元格
• caption 元素：用来定义表格的标题

<table>
    <tr>
      <th>&nbsp;</th>
      <td>Knocky</td>
    </tr>
    <tr>
      <th>Breed</th>
      <td>Jack Russell</td>
    </tr>
</table>

单元合并

• 合并要领：向右、向下延伸
• colspan 属性: 单元格纵跨高度
• rowspan 属性: 单元格横跨宽度

<table>
  <tr >
    <th colspan="2" scope="row">Animals</th>
  </tr>
  <tr>
    <th colspan="2">Hippopotamus</th>
  </tr>
  <tr>
    <th rowspan="2">Horse</th>
    <td>Mare</td>
  </tr>
</table>

表格常用属性

• table-layout 属性 :用于布局表格单元格，行和列的算法
  • auto : 大多数浏览器采用自动表格布局算法,宽度取决于其包含的内容
  • fixed : 某一列的宽度仅由该列首行的单元格决定
• border 属性: 边框
• border-collapse 属性:边框合并
  • collapse:共享
  • separate:分开
• boder-spacing 属性: 设置单元格之间水平、垂直间距（设置到table上）
• scope 属性:可以添加在 th 元素中，用来标记标题单元格到底是列标题呢，还是行标题
• id 和 headers 属性：可以使用来创造标题与单元格之间的联系

结构化表格

• thead 元素,tfoot 元素, tbody 元素（少用，浏览器支持比较糟糕）: 表格中的部分标记为表头、页脚、正文部分
• 必须使用全部的元素，出现次序是： thead 元素,tfoot 元素, tbody 元素