HTML5

Frank
  • 前端基石
  • HTML5
大约 13 分钟约 3844 字...

修订进度

  • [ ] 2021.9.30 meta的具体功能

html5 骨架

注意

请始终向 HTML 文档添加 <!DOCTYPE> 声明,这样浏览器才能获知文档类型。

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>

  <body>
    文档的内容......
  </body>
</html>
  • <!DOCTYPE>声明必须是 HTML文档的第一行,位于 html标签之前。
  • <!DOCTYPE>声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
  • HTML 4.01中,<!DOCTYPE>声明引用 DTD,因为 HTML 4.01基于SGMLDTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。
  • HTML5不基于SGML,所以不需要引用DTD,在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种:<!DOCTYPE html>

<!DOCTYPE html>的重要性

声明文档的解析类型(document.compatMode),避免浏览器的怪异模式

document.compatMode

  • BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。
  • CSS1Compat:标准模式,浏览器使用 W3C 的标准解析渲染页面。

这个属性会被浏览器识别并使用,但是如果你的页面没有<!DOCTYPE>的声明,那么compatMode默认就是BackCompat,

浏览器按照自己的方式解析渲染页面,那么,在不同的浏览器就会显示不同的样式。

如果你的页面添加了<!DOCTYPE html>那么,那么就等同于开启了标准模式,那么浏览器就得老老实实的按照W3C的标准解析渲染页面,这样一来,你的页面在所有的浏览器里显示的就都是一个样子了。

字符集

注意

无论使用哪种字符集,一定要在Vscode编辑器中将文件也设置为相同字符集,否则会岀现乱码,然后更改meta标签

字符集涵盖字符一个汉字字节数适用场景
UTF-8涵盖全球所有国家、民族的文字和大量图形字符3制作有非汉字文字的网页
Gb2312(gbk)收录所有汉字字符(包括简体、繁体)和英语、少量韩文、日语和少量图形字符2制作只有汉语和英语的网页 由于 1 个汉字仅占 2 字节,网页文件尺寸明显减少
<!-- meta:元标签,表示网页的基本配置 -->
<!-- charset:字符集 -->
<meta charset="UTF-8" />

title,关键词及页面描述

title 的用途

  1. title标签用来设置网页的标题,文字会显示在浏览器的签栏上
  2. title也是搜索引擎收录网站时显示的标题,为了吸引用户点击,合理设置title是必要的

网页关键词和页面描述

  1. 合理设置网页的网页的关键词和页面描述,也是SEO的重要手段

SEOSearch Engine Optimization,搜索引擎优化)利用搜索引擎的规则提高网站在有关搜索引擎內的自然排名,让网站在搜索引擎的结果中占据领先地位,获得品牌收益

  1. 使用meta标签设置网页关键词和描述,name属性非常关键,用来设置meta的具体功能
<meta name="keywords" content="前端,JavaScript,Vue,React" />
<meta name="description" content="一个前端学习博客" />
  1. 其他 meta:HTML meta 标签 看这篇就够了open in new window

标题和段落标签

<h1>
  ~
  <h6></h6>
</h1>
  • 搜索引擎非常看重h1标签的内容,应该将重点内容放到h1中,比如网页的logo

  • h1标签一般只能放置一个

<p>this is a p</p>
  • 任何段落都要放到p标签中,因为HTML中即使代码换行了,页面显示效果也不会换行

  • p元素嵌套任何块级元素都一定会被浏览器错误解析

div 标签

div像是一个容器,什么都可以容纳,因此一般被称呼为盒子

HTML5 特性

空白折叠现象

  1. 文字和文字之间的多个空格、换行会被折叠成一个空格
  2. 标签“内壁”和文字之间的空格会被忽略

转义字符

<!-- //小于号 -->
&lt;
<!-- //大于号 -->
&gt;
<!-- //空格(不会被折叠) -->
&nbsp;
<!--  //版权符号 -->
&copy;

列表标签

<!-- 无序列表 -->
<ul></ul>
<!-- 有序列表 -->
<ol></ol>
<!-- 定义列表 -->
<dl>
  <dt></dt>
  <dd></dd>
</dl>

注意:

  • li标签是不能单独使用的,它必须放到ulol
  • ulol的子标签只能是li
  • li标签中可以放任何标签

有序列表 ol

ol 标签的 type 属性

type 属性值意义
a表示小写英文字母编号
A表示大写英文字母编号
¡表示小写罗马数字编号
表示大写罗马数字编号
1表示数字编号(默认)

ol 标签的 start 属性

1.start属性值必须是一个整数,指定了列表编号的起始值

  1. 此属性的值应为阿拉伯数字,尽管列表条目的编号类型type属性可能指定为了罗马数字编号等其他类型的编号

ol 标签的 reversed 属性

  1. reversed属性指定列表中的条目是否是倒序排列的

  2. reversed属性不需要值,只需要写reversed单词即可,这是HTML5的全新特性

定义列表 dl

  • 需要逐条给出定义描述的列表就是定义列表
  • 只要语义上有“解释说明”含义的文字,且为列表形态,应该使用定义列表。
<!-- 定义列表 -->
<dl>
  <!-- 数据项  -->
  <dt></dt>
  <!--数据定义  -->
  <dd></dd>
</dl>
  • 一个例子:
<!-- <dl>是定义列表标签,内容交替出现<dt>、<dd>标签 -->
<dl>
  <dt>手机</dt>
  <dd>iphone</dd>
  <dd>xiaomi</dd>
  <dd>huawei</dd>
  <dt>电脑</dt>
  <dd>联想</dd>
  <dd>HP</dd>
  <dd>DELL</dd>
</dl>
<!-- 也允许dt和dd不交替出现,而是分别处于不同的定义列表中 -->
<dl>
  <dt>手机</dt>
  <dd>iphone</dd>
  <dd>xiaomi</dd>
  <dd>huawei</dd>
  <dt>电脑</dt>
</dl>
<dl>
  <dd>联想</dd>
  <dd>HP</dd>
  <dd>DELL</dd>
</dl>

多媒体标签

img 标签

提示

如果需要回退层级,使用../这样的写法,./是当前目录

  1. alt属性:由于某种原因无法加载图像,浏览器会在页面上显示alt属性中的备用文本
  2. 相对路径:描述从网页出发,如何找到图片
  3. 绝对路径:描述图片精准地址

a 标签

注意

a元素嵌套a 元素会导致所有浏览器解析错误,但a 元素可以嵌套其他的内联元素(比如:img)

  1. href属性:规定链接的目标地址,支持相对路径绝对路径

  2. title属性:用于设置鼠标的悬停文本

  3. 在新窗口打开网页:将target属性设置为blank

  4. 给图片设置超级链接:用 a 标签包裹 img 标签

  5. 页面内锚点:较长的页面,可以适当的给 h 系列标签添加 id属性,它将成为页面的“锚点”;当网址后面添加#时,页面将自动滚动到锚点所在位置;其他页面的超级链接,可以链接到指定锚点

<a href="1.html#baoji">baoji</a>

audio 标签

<audio controls src="音频地址"></audio>
  1. autoplay属性:声明 autopaly 会自动播放音乐
  2. loop属性:声明 loop 属性会循环播放音频
  3. controls属性: 显示控制面板
  4. muted: 静音

video 标签

使用方法,属性和audio类似,不赘述。

语义化标签

语义化的标签,旨在让标签有自己的含义

<p>一行文字</p>
<span>一行文字</span>

如上代码,p 标签与 span 标签都区别之一就是,p 标签的含义是:段落。而 span 标签责没有独特的含义。

语义化标签的优势

  • 代码结构: 使页面没有 css的情况下,也能够呈现出很好的内容结构

  • 有利于 SEO: 爬虫依赖标签来确定关键字的权重,因此可以和搜索引擎建立良好的沟通,帮助爬虫抓取更多的有效信息

  • 提升用户体验: 例如 titlealt 可以用于解释名称或者解释图片信息,以及 label 标签的灵活运用。

  • 便于团队开发和维护: 语义化使得代码更具有可读性,让其他开发人员更加理解你的 html 结构,减少差异化。

  • 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等,以有意义的方式来渲染网页。

常见的语义化标签

语义化

h1~h6 元素

定义页面的标题,h1 元素具有最高等级,h6元素具有最低的等级

header 标签

用于定义页面的介绍展示区域,通常包括网站 logo、主导航、全站链接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记。

<header>
  <h1>HTML Reference</h1>
  <nav>
    <a>Home</a>
    <a>About</a>
    <a>Contact</a>
  </nav>
</header>

定义导航链接的部分

<nav>
  <a>Home</a>
  <a>About</a>
  <a>Contact</a>
</nav>

article 标签

标签定义外部的内容。

外部内容可以是来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。

<article>
  <header>
    <h3>
      <a href="">My blog</a>
    </h3>
  </header>
  <section>
    <p>这是我的个人博客地址</p>
  </section>
  <footer>
    <small>
      Posted on
      <time datetime="2021-011-20T19:00">Apr 20</time> in
      <a href="https://www.zfhblog.top">点我访问</a>
    </small>
  </footer>
</article>

main 标签

定义页面的主要内容,一个页面只能使用一次.

注意

在一个文档中,不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代:<article><aside><footer><header><nav>

<main>
  <h1>My blog test</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec
    nulla vitae mollis.
  </p>
  <p>etc.</p>
</main>

section 标签

section 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

<section>
  <h2>Section title</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec
    nulla vitae mollis.
  </p>
</section>

aside 标签

定义与主要内容相关的内容块。通常显示为侧边栏。

定义文档的底部区域,通常包含文档的作者,著作权信息,链接的使用条款,联系信息等

small 标签

为较不重要的内容定义小字体。如果被包围的字体已经是字体模型所支持的最小字号,那么small 标签将不起任何作用。

strong 标签

把文本定义为语气更强的强调的内容,以表示内容的重要性。

em 标签

标记内容着重点(大量用于提升段落文本语义),通常呈现为斜体文字。

blockquote 标签

定义块引用,浏览器会在 blockquote 元素前后添加换行,并增加外边距。cite 属性可用来规定引用的来源

<blockquote cite="https://en.wikiquote.org/wiki/Marie_Curie">
  Here is a long quotation here is a long quotation here is a long quotation
  here is a long quotation here is a long quotation here is a long quotation
  here is a long quotation here is a long quotation here is a long quotation.
</blockquote>

abbr 标签

解释缩写词。使用 title 属性可提供全称,只在第一次出现时使用就 ok。

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

表格标签

⛔️

table作为块级元素,其在没有指定宽度的情况并不会继承父元素的宽度,其默认的宽度是根据表格中填写的数据所控制的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 这种写法已被废弃 -->
    <table border="1">
      <!-- 表格的标题 -->
      <caption>
        数字表
      </caption>
      <tr>
        <!-- 标题单元格 -->
        <th>1</th>
        <th>2</th>
        <th>3</th>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>5</td>
        <td>8</td>
        <td>9</td>
      </tr>
    </table>
  </body>
</html>

单元格的合并

  • colspan属性:用来设置 td 或 th 的列跨度
  • rowspan属性:用来设置 td 或 th 的行跨度

表格的其他特征

  • < thead >标签定义表头
  • < tbody >标签定义表核心内容
  • < tfoot >标签定义表脚,通常是汇总行
<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

表单标签

表单的创建

表单用来收集信息,比如注册、登录、发送评论反馈、购买商品等等

  • action属性表示表单要提交到的后台程序的网址(现在基本用不到了)
  • method属性表示表单提交的方式,有 get 或 post(现在基本用不到了)
  • onsubmit:onsubmit 事件在表单提交时触发
<form action="" method="" onsubmit="myFunction()"></form>

单行文本框

  • value属性表示已经填写好的值
<input type="text" value="zfh" />
  • placeholder属性表示提示文本,将以浅色文字写在文本框中,并不是文本框中的值
<input type="text" placeholder="请输入姓名" />
  • disabled 属性表示用户不能与元素交互,即“锁死"
<input type="text" disabled />

单选按钮

  • 互斥的单选按钮应该设置它们的name为相同值
  • 单选按钮要有value属性值,向服务器提交的就是 value 值
  • 单选按钮如果加上了checked属性,表示默认被选中
<input type="radio" name="sex" value="" /><input
  type="radio"
  name="sex"
  value=""
  checked
/>

label 标签

label标签用来将文字和单选按钮进行绑定,用户单击文字的时候也视为点击了单选按钮

<label><input type="radio" name="sex" value="" /> </label>

<label><input type="radio" name="sex" value="" /> </label>

复选框

  • 同组复选框应该设置它们的name为相同值
  • 复选框要有 value属性值,向服务器提交的就是 value 值
  • 多选按钮如果加上了 checked属性,表示默认被选中
<input type="checkbox" name="province" value="sx" />陕西
<input type="checkbox" name="province" value="sc" />四川
<input type="checkbox" name="province" value="hb" checked />湖北

密码框

使用type属性值被设置为passwordinput 元素可以创建密码框

下拉菜单

  • <select>标签表示下拉菜单,<option>是它内部的选项
  • value是提交到服务器的值
  • selected表示默认被选中
<select>
  <option value="alipay">支付宝</option>
  <option value="vx">微信</option>
  <option value="dy" selected>抖音</option>
</select>

多行文本框

<textarea></textarea>表示多行文本框;rowscols属性,用于定义多行文本框的行数和列数

三种按钮

// 普通按钮 ,可以简写为<button></button>
// value代表按钮上的文字
<input type="button" value="普通按钮" />
// 重置按钮
<input type="reset" value="重置按钮" />
// 提交按钮
<input type="submit" value="提交按钮" />

datalist 控件

datalist控件可以为输入框提供一些备选项,当用户输入的内容与备选项文字相同时,将会显示智能感应

<input type="text" list="province-list" />
<datalist id="province-list">
  <option value="山东"></option>
  <option value="陕西"></option>
  <option value="云南"></option>
  <option value="贵州"></option>
</datalist>
上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1