html

作者: VicSong | 来源:发表于2021-06-21 09:54 被阅读0次

基础编程语言学习线路图
HTML头部-10
html 大纲
web 前端学习线路图
2018-06-04——HTML简介
HTML 基础
html常用的基本标签
Html 学习笔记
HTML：基础（2）元素
2018-10-29 第二阶段 day1 htm

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)]

基础编程语言学习线路图
HTML HTML教程HTML简介HTML编辑器HTML基础HTML元素HTML属性 HTML标题HTML段落HT...
HTML头部-10
HTML 元素 HTML 元素 HTML 元素 HTML 元素 HTML 元素 HTML ...
html 大纲
html 通用 html 简介 html 常用标签 html 属性 html 表格 html 字体 html 表单...
web 前端学习线路图
一、HTML 教程 HTML教程HTML简介HTML编辑器HTML基础HTML元素HTML属性 HTML标题HTM...
2018-06-04——HTML简介
HTML 简介 HTML 标签 ·HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 ·HTML...
HTML 基础
HTML 标题 HTML 段落 HTML 链接 HTML 图像 HTML 文本格式化标签 HTML ...
html常用的基本标签
HTML基础包括web工作原理，HTML概述，HTML基本标签和HTML高级标签。〈html〉...〈/html...
Html 学习笔记
HTML基础 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag) HTML 标签通...
HTML：基础（2）元素
HTML 元素 HTML 文档由 HTML 元素定义。 HTML 元素语法 HTML 元素以开始标签起始 HTML...
2018-10-29 第二阶段 day1 htm
1.html说明说明html版本html5-- ...