html

2021-06-21 本文已影响0人 VicSong

HTML5

HTML5
- 元素分类
  - 内容类型
  - 元素等级
- 页面结构
  - 页面头部
    - <head>
    - <meta>
    - <title>
    - <style>
    - <link>
  - 标签的语义化
  - 页面标题
  - 页眉页脚
    - <header>
    - <footer>
  - 页面导航
    - <nav>
  - 主要区域
    - <main>
  - 内容区域
    - <article>
  - 附加区域
    - <aside>
  - 区块定义
    - <section>
  - 容器DIV
    - <div>
- 文本相关
  - 基本标签
    - <p>
    - <span>
    - <br>
  - 描述文本
    - <time>
    - <big>
    - <small>
    - <sup>
    - <sub>
    - <del>
    - <ins>
    - <code>
    - <progress>
  - 强调文本
    - <strong>
    - <b>
    - <em>
    - <i>
    - <mark>
  - 引用标签
    - <cite>
    - <blockquote>
    - <q>
  - 联系信息
    - <address>
- 链接与图片
  - 链接
  - 图像
    - <img> 标签
- 列表与多媒体
  - 列表
  - 多媒体
    - 声音
    - 视频
- 表格与表单
  - 表格
  - 表单
- 其他
  - HTML实体符号
  - HTML 颜色

元素分类

内容类型

HTML5 中引入了很多的标记元素，根据内容类型的不同，这些元素被分成了7大类：

流内容（Flow）：
包含在文档正常流中的大多数HTML5元素。
元数据（Metadata）：
通常出现在页面的head中，设置页面其他部分的表现和行为。
元素：<base>，<link>，<meta>，<noscript>，<script>，<style>，<title>。
内联（Embedded）：
在文档中添加其他类型的内容。
元素：<audio>，<video>，<canvas>，<iframe>，<img>，<math>，<object>，<svg>。
交互（Interactive）：
与用户交互的内容。
元素：<a> , <audio> , <video> , <button> , <details> , <embed> , <iframe> , <img> , <input> , <label> , <object> , <select> , <textarea>。
标题（Heading）：
定义段落标题。
元素：<h1>，<h2>，<h3>，<h4>，<h5>，<h6>，<hgroup>。
短语（Phrasing）：
文本和文本标记元素。
元素：<img>，<span>，<strong>，<label>，<br />，<small>，<sub>等。
区段内容（Sectioning) ：
定义标题，内容，导航和页脚的范围。
元素：<article>，<aside>，<nav>，<section>

相同的元素可以属于多个内容模型。
各种内容类型在某些区域重叠，具体取决于它们的使用方式。

元素等级

HTML5 的元素按优先等级定义为结构性元素、级块性元素、行内语义性元素和交互性元素四大类。

结构性元素
结构性元素主要负责 Web 的上下文结构的定义，确保 HTML 文档的完整性，这类元素包括以下几个：

section
header
footer
nav
article
等等

级块性元素
级块性元素主要完成 Web 页面区域的划分，确保内容的有效分隔，这类元素包括以下几个：

行内语义性元素
行内语义性元素主要完成 Web 页面具体内容的引用和表述，是丰富内容展示的基础，这类元素包括以下几个：

交互性元素
交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础，这类元素包括以下几个：

页面结构

常用H5页面结构布局

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/common/layout.css">
    <link rel="stylesheet" type="text/css" href="css/common/general.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script src="js/head.js"></script>
</head>
<body>
    <div id="container">
        <header id="gHeader">
            <h1></h1>
            <nav></nav>
        </header>
        <div id="main">
            <article id="conts">
                <section class="company">
                    <h2></h2>
                </section>
                <section class="about">
                    <h2></h2>
                </section>                
            </article>
            <aside id="sideBar"></aside>
        </div>
        <footer id="gFooter"> </footer>
    </div>
    <script src="js/jquery.js"></script>
    <script src="js/common.js"></script>
</body>
</html>

<!doctype html> 声明HTML文档类型，最好小写。
<html lang="ja"> lang:网页的语言，如en/ja等，非必选项目

页面头部

<head>

<head>标签定义文档的头部，包含了所有的头部标签元素。
在 <head> 标签中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以在头部区域的添加 <title>,<meta>,<link>,<style>,<script>等。

<meta>

<meta>标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
<meta>元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta> 一般放置于<head>区域

为搜索引擎定义关键词：

<meta name="keywords" content="HTML, CSS, JavaScript">

为网页定义描述内容：

<meta name="description" content="一个神奇的网站">

定义字符编码：

<meta charset="utf-8">

定义网页作者：

<meta name="author" content="VicSong">

在 iPhone 上默认会自动把一串数字加链接样式、并且点击这个数字还会自动拨号，为了不让手机自动将网页中的电话号码显示为拨号的超链接，设置如下:

<meta name="format-detection" content="telephone=no"><!--默认开启 -->
<meta name="format-detection" content="email=no"><!-- 告诉设备不识别邮箱，点击之后不自动发送，默认开启 -->
<meta name="format-detection" content="adress=no"><!--禁止跳转至地图 -->

通知IE 以最高级别的可用模式显示内容：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

在iPhone的浏览器中页面将以原始大小显示，不允许缩放:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- content属性值 :
     width:可视区域的宽度，值可为数字或关键词device-width
     height:同width
     intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
     maximum-scale=1.0,允许用户缩放到的最大比例,1.0将禁止
     minimum-scale=1.0;允许用户缩放到的最小比例，1.0将禁止
     user-scalable:用户是否可以手动对页面进行缩放，no 禁止缩放 -->

<title>

<title>标签定义网页标题，在所有 HTML 文档中是必需的。

定义浏览器工具栏中的标题
提供页面被添加到收藏夹时的标题
显示在搜索引擎结果中的页面标题

<style>

在<style> 元素中也可以直接添加样式来渲染HTML文档。

<head>
<style type="text/css">
body {
    background-color:yellow;
    }
p {
    color:blue;
    }
</style>
</head>

<link>

<link rel="stylesheet" type="text/css" href="css/common/layout.css">

<link rel="shortcut icon" href="图片url">

标签的语义化

什么是HTML语义化
根据网页内容的结构（内容语义化），选择合适的html标签（代码语义化）便于开发者浏览,代码更具可读性，同时最重要的是对搜索引擎友好，让爬虫和浏览器很好地解析。
为什么要标签语义化

页面结构清晰：技术上网页内容全部用p标签也能表示大部分内容，但选择合适的语义标签更容易让开发者看懂,页面也能呈现出清晰的内容结构和代码结构，比如：h1表示标题、p标签表示内容、强调内容使用em标签。
便于团队开发和维护：语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
利于SEO优化：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

常用的语义化的页面结构标签

<header>~</header> 头部
<h1>~<h6>标题
<nav>~</nav>导航栏
<section>~</section>区块（有语义化的div）
<main>~</main>主要区域
<artical>~</artical>主要内容
<aside>~</aside>侧边栏
<footer>~</footer>底部

页面标题

标题（Heading）是通过 <h1> ~ <h6> 等标签进行定义的。

标题很重要
搜索引擎使用标题为网页的结构和内容编制索引。
用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

规范：

<h1> 标题
- 页面里面必须要有且只有一个<h1>。
- <h1> 标题的位置，在页眉，通常网站的LOGO作为<h1>标题
H标题不能跳级，比如页面里面有h3，必须有h1和h2标题

页眉页脚

<header>

<header> 标签定义页面的页眉，通常网页的头部作为页眉。

<footer>

<footer> 标签定义页面的页脚，通常网页的底部作为页脚。

页面导航

<nav>

<nav> 标签定义页面导航链接集合。

<nav id="gNavi">
    <ul>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
</nav>

主要区域

<main>

<main> 标签定义页面的主要内容。

==注意==：<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。

对于IE浏览器11版本和低于11的版本，推荐向 <main> 元素添加 "main" 这一 ARIA 角色，以保证其可访问性。(屏幕阅读器，如 JAWS，当与较旧版本的 Internet Explorer 一起使用时，需包括此 role 属性<main role="main">才能理解 <main> 元素的语义含义）

内容区域

<article>

<article> 标签定义独立的自包含内容，像之前的conts部分。

附加区域

<aside>

<aside> 标签定义页面主内容（article/conts）之外的某些内容（比如侧栏的广告等）。

区块定义

<section>

<section> 标签定义文档中的区块。

容器DIV

<div>

<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。有些布局有语义的容器不好表达时可以采用div容器，比如图文混排。

文本相关

基本标签

<p>

定义文本段落

<span>

<span> 元素是内联元素，可用作文本的容器。
<span> 标签与 div 标签都是没有语义的，span 常用于对某些文本特殊控制，但该文本又没有适合的语义标签。

<br>

定义文本换行

描述文本

<time>

<time> 标签定义时间（或日期。

<big>

<big> 标签定义大号字体效果。

<small>

<small> 标签定义小号字体效果。

<sup>

<sup> 标签定义上标文本。

<sub>

<sub> 标签定义下标文本。

<del>

<del> 标签定义已被删除的文本。

<s> 标签也定义加删除线文本，已==不赞成使用==。
<del>请与 <ins> 标签配合使用，来描述文档中的更新和修正。

原价 <del>200元</del> 现价 <ins>100元</ins>

<ins>

<ins> 标签定义被插入页面中的文本，与 <del> 一同使用，来描述文档中的更新和修正。

<u> 标签也定义下划线文本，已==不赞成使用==。

<code>

<code>标签用于显示代码块内容，一般需要代码格式化插件完成。

<progress>

<progress> 标签定义运行中的任务进度（进程）。当游览器不支持时显示内容。

<progress> 标签的属性有：

max：规定需要完成的值。
value：规定进程的当前值。

实例：正在进行中的下载，下载进度的当前值为 60。

<progress value="60" max="100">完成60%</progress>

强调文本

<strong>

<strong> 定义==语气更强==的强调的内容。

<b>

<b> 定义粗体文本。

<em>

<em> 定义强调的内容。

<i>

<i> 定义斜体字。

标签	说明
<strong>与<b>	如果仅定义文本加粗，推荐使用<strong>更具有语义化，对SEO友好。
<em>与<i>	如果仅定义文本倾斜，推荐使用<i>更具有语义化，对SEO友好。

<mark>

<mark> 标签定义带有记号的文本。

引用标签

<cite>

<cite> 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。

<blockquote>

<blockquote> 标签定义块引用。
<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

<q>

<q> 标签定义短的引用。
用于表示行内引用文本，在大部分浏览器中会加上引号。

联系信息

<address>

用于设置联系地址等信息，一般将address 放在footer 标签中，例如：copyright。

链接与图片

链接

页面超链接

<a href="http://www.w3school.com.cn/" target="_blank" title="W3School">Visit W3School</a>

href ----- 跳转地址
target ----- _blank 新窗口打开, _self 当前窗口打开
title ------ 链接提示文本 没有指定，实际项目不用加

锚点链接

锚点可以设置跳转到页面中的某个部分。

为元素添加id 属性来设置锚点
设置 a 标签的 href 属性

<a href="#h2Ttl">跳转标题2</a>

<h2 id="h2Ttl">这是标题2</h2>

也可以跳转到其他页面的锚点

<a href="company.html#h2Ttl">跳转company页面的标题2</a>

邮箱链接

<a href="mailto:邮箱地址">邮箱地址</a>

==邮箱地址通常要加密==

加密网址：
[http://www.luft.co.jp/cgi/coding.php]

电话链接

<a href="tel:12345678">12345678</a>

图像

<img> 标签

<img src="coding.png" alt="coding"/>

<img> 标签有两个必需的属性：src 属性和 alt 属性。

src 属性显示图像的 URL。
alt 属性图像的替代文本。

列表与多媒体

列表

有序列表

<ol> 标签定义有序列表，列表排序以数字来显示。使用 <li> 标签来定义列表选项。

<ol>
    <li>apple</li>
    <li>banana</li>
    <li>orange</li>
</ol>

无序列表

<ul> 标签定义无序列表，列表项目以黑色圆点标记，使用 <li> 标签定义列表项目，
。

<ul>
    <li>apple</li>
    <li>banana</li>
    <li>orange</li>
</ul>

定义列表

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的描述以 <dd> 开始。

<dl>
    <dt>2020-01-02</dt>
    <dd>news text</dd>
    <dt>2020-01-01</dt>
    <dd>news text</dd>
</dl>

多媒体

声音

<audio> 标签定义声音，比如音乐或其他音频流。
目前，<audio> 元素支持的 3 种文件格式：MP3、Wav、Ogg。

<audio> 常见属性：

属性	描述
autoplay	如果出现该属性，则视频在就绪后马上播放。
preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。如果视频观看度低可以设置为 preload="none" 不加载视频数据减少带宽。如果设置为 preload="metadata"值将加载视频尺寸或关键针数据，目的也是减少带宽占用。设置为preload="auto" 时表示将自动加载视频数据
controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	规定视频的音频输出应该被静音。
src	要播放的视频的 URL。

<audio controls autoplay loop preload="auto">
    <source src="/statics/demosource/horse.ogg" type="audio/ogg">
    <source src="/statics/demosource/horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

<source> 标签用来定义多种媒体资源。
<audio> 元素允许使用多个 <source> 元素。<source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。
可以在 <audio> 和 </audio> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。

视频

<video> 标签定义视频，比如电影片段或其他视频流。
目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

<video> 常见属性：

属性	描述
autoplay	如果出现该属性，则视频在就绪后马上播放（需要指定类型如 type="video/mp4")。
preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。如果视频观看度低可以设置为 preload="none" 不加载视频数据减少带宽。如果设置为 preload="metadata"值将加载视频尺寸或关键针数据，目的也是减少带宽占用。设置为preload="auto" 时表示将自动加载视频数据
controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	设置视频播放器的高度。
width	设置视频播放器的宽度。
poster	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	规定视频的音频输出应该被静音。
src	要播放的视频的 URL。

<video src="movie.mp4" autoplay="autoplay" loop muted controls width="800" height="200">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>

<video> 元素与 <audio> 元素一样，支持多个 <source> 元素，<source> 元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式。
<video> 元素也可以在 <video> 标签之间放置文本内容，这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。

表格与表单

表格

HTML 表格由 <table> 标签来定义。

<table>
    <caption>表格标题</caption>
    <col width="20%">
    <col width="30%">
    <col width="50%">
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2">合并列单元格</td>
            <td>表格单元3</td>
        </tr>
        <tr>
            <td rowspan="2">合并行单元格</td>
            <td>表格单元2</td>
            <td>表格单元3</td>
        </tr>
        <tr>
            <td>表格单元2</td>
            <td>表格单元3</td>
        </tr>
        <tr>
            <td>表格单元1</td>
            <td>表格单元2</td>
            <td>表格单元3</td>
        </tr>
    </tbody>
</table>

显示如下：

[图片上传失败...(image-99c8ec-1623318404810)]

属性	说明
<caption>	表格的标题
<colgroup>	定义表格列的组
<col>	定义表格列的属性
<thead>	表格的页眉
<tbody>	表格的主体
<tfoot>	表格的页脚
<tr>	行
<th>	表格的表头
<td>	表格的单元格
<td colspan="2">	合并列单元格
<td rowspan="2">	合并行单元格

表单

表单是服务器收集用户数据的方式。

<form> 标签用于创建供用户输入的 HTML 表单。

<form action="" method="post" class="mailForm">
    <table>
        <tbody>
            <tr>
                <th>お名前<span>＊</span></th>
                <td><input type="text" value="" name="name"></td>
            </tr>
            <tr>
                <th>性別<span>＊</span></th>
                <td><label>
                        <input type="radio" value="男" name="sex">
                        男</label>
                    <label>
                        <input type="radio" value="女" name="sex">
                        女</label></td>
            </tr>
            <tr>
                <th>電話番号<span>＊</span></th>
                <td><input type="tel" value="" name="input_main_tp" maxlength="13"></td>
            </tr>
            <tr>
                <th>メールアドレス<span>＊</span></th>
                <td><input type="email" value="" name="input_main_em"></td>
            </tr>
            <tr>
                <th>郵便番号<span>＊</span></th>
                <td><input type="text" name="zip" value="" placeholder="例）451-0045（半角）" maxlength="8">
                    <input type="button" value="番号検索" name="search"></td>
            </tr>
            <tr>
                <th>住所<span>＊</span></th>
                <td>都道府県：
                    <select name="area">
                        <option value="">選択してください</option>
                        <option value="北海道">北海道</option>
                        <option value="青森県">青森県</option>
                    </select>
                    市区町村：
                    <input type="text" value="" name="address"></td>
            </tr>
            <tr>
                <th>ご希望方法<span>＊</span></th>
                <td><label>
                        <input type="checkbox" name="method1" value="電話">
                        電話</label>
                    <label>
                        <input type="checkbox" name="method2" value="メールアドレス">
                        メールアドレス</label></td>
            </tr>
            <tr>
                <th>お問い合わせ内容<span>＊</span></th>
                <td><textarea name="content" rows="5" cols="10"></textarea></td>
            </tr>
        </tbody>
    </table>
    <ul class="submit">
        <li>
            <input type="submit" value="入力内容を確認する" name="__submit__">
        </li>
        <li>
            <input type="reset" value="リセット" name="__reset__">
        </li>
    </ul>
</form>

其他

HTML实体符号

下面是常见的 HTML 实体列表：

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

提示：虽然 HTML 不区分大小写，但实体名称对大小写敏感。

HTML 颜色

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是 0（十六进制：#00），最大值是 255（十六进制：#FF）。
HTML 三种颜色红，绿，蓝的组合从 0 到 255，一共有1600万种不同颜色(256 x 256 x 256)。

RGB 模型如下图所示：
[图片上传失败...(image-db8fb7-1623318404810)]