版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013867301/article/details/83592432
HTML
HTML语法规则的构建，基于标签、元素体系
而浏览器根据标签来确定元素
如果标签自身会关闭，那么元素就是<tab到/>的数据
如果标签有开标签<tag>、关标签</tag>，那么元素就是从<tag到</tag>到之间的数据
标签、元素
元素表现为<tag id="idValue" class="classValue" attrName="attrValue">Content</tag>
id，类，属性用来描述标签，对于外界（css、js）而言，它们是选择元素时的过滤器，即选择器
id表示单一的元素，同一个文档不可重复
id命名之后可以在同一个文档中用#来快速索引用定位，在url上的表现为：index.html#idValue
class表示某一类群，可以多处设置
attrName是tag的自带属性，如src
标签带有语义，所以尽管两个标签展示的效果一样，也应当使用语义正确的。如<em>表示强调，展示为斜体；而<i>表示斜体，展示为斜体；又如<span>可以配合样式实现同样的效果，却没有语义。
<em>
<i>
<strong>
<b>
元素分为块级(block)元素和内联(inline)元素：
- 块级元素在页面中以块的形式展现 – 即不与之前和之后的内容显示在一行，会另起一行显示。
通常用于展示页面上结构化的内容，例如
<p></p>,<footer></footer>。
块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
- 内联元素不会导致文本换行 – 。
通常出现在一堆文字之间，例如超链接元素
<a></a>或者强调元素<em></em>
内联元素包裹文档内容的一小部分，而不是一整个段落或者一组内容。
块级元素和内联元素的区别在于是否换行，
但是内联元素<a>实际上可以在开闭标签之内，嵌套一个块级元素，然后表现为块级的效果。
常规标签
<a> 超链接
<hr> 分割线
<br> 换行
<h1>...<h6> h1通常在页面中只应该出现一次；一个页面使用h1-h6的种类尽量不超过三个。
<img>
<ol>、<ul>、<dl> ordered list ； unordered list ； description list
<blockquote> 表示块引用，但是目前只是渲染成缩进的块，而且不支持cite属性
<address> 文档编写者的联系方式
<code> 表示代码
<figure> 用于单独内容单元，内嵌<figcaption>用作说明
<iframe> 嵌入其他网页,可以设置为不允许被嵌入
<embed>、<object> 嵌入PDF,SVG等，属于历史技术，新场景不太常见
<div> 块级无特定语义元素
<!-- 内联 -->
<span> 只是做标记用
<i> 斜体
<em> 强调
<abbr> 缩写
<pre> 保留空格
<q> 表示行内引用，对文本增加引号显示，可以使用<cite>内嵌标签，但超链接还是要配合<a>
<var> 标记具体变量名称
<kbd> 标记输入设备的输入内容（如Ctrl+A）
<samp> 用于标记输出设备的显示内容(如shell内的： $ ping baidu.com)
<time> 可以写入符合时间格式的属性，方便抓取
结构性标签
<!-- 历史遗留标签，表示文档类型 -->
<!DOCTYPE html>
<!-- 根元素 -->
<html lang="zh-CN">
<!-- 非用户可见内容。包括搜索引擎关键字和页面描述，引用CSS和encode等 -->
<head>
<!-- 元数据，可以自定义并利用以提供更好的体验 -->
<meta charset="utf-8">
<meta name="author" content="TpOut">
<meta name="description" content="Mdn learning area">
<meta property="custome" content="custome content">
<!-- 显示在浏览器的标签页 -->
<title>My test page</title>
<!-- 缩略icon的兼容显示方式 -->
<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144"
href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114"
href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72"
href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed"
href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- 默认icon -->
<link rel="shortcut icon"
href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
<!-- 样式表 -->
<link href="./styles/style.css" rel="stylesheet" type="text/css">
<!-- 字体 -->
<link href="https://fonts.googleapis.com/css?family=Roboto"
rel="stylesheet"
type="text/css">
<!--内嵌-->
<style> p { padding: 0% }</style>
</head>
<!-- 用户可见内容 -->
<body>
<!-- 页眉,可以配合<body>,<section>等 -->
<header>
<!-- 主要导航功能 -->
<nav>
<ul>
<li><span>Home</span></li>
<li><a href="#">Get started</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Gear</a></li>
<li><a href="#">Forum</a></li>
</ul>
</nav>
</header>
<!-- 独特内容，一个页面一次，放在<body>中 -->
<main>
<!-- 单独内容，与页面上的其他内容无关 -->
<article class="">
<h2>Welcome</h2>
<p>Welcome</p>
</article>
<!-- 类似<article>,但是一般都是伴随出现 -->
<section>
<!--不要同时添加allow-scripts和allow-same-origin到你的sandbox，不然会被关闭沙盒 -->
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
width="100%" height="500" frameborder="1"
allowfullscreen sandbox>
<p> <a
href="https://developer.mozilla.org/en-US/docs/Glossary">
Fallback link for browsers that don't support
iframes
</a> </p>
</iframe>
</section>
<!-- 和主要内容不会有直接联系，但是也是有间接联系 -->
<aside class="">
<h2>Favourite photos</h2>
<a href="./images/favorite-1.jpg"><img
src="./images/favorite-1_th.jpg" alt="Small black bird,
black claws, long black slender beak, links to larger
version of the
image"></a>
<a href="favorite-2.jpg"><img src="favorite-2_th.jpg" alt="Top
half of a
pretty bird with bright blue plumage on neck, light
colored beak, blue
headdress, links to larger version of the image"></a>
</aside>
</main>
<!-- 页脚 -->
<footer>
<p>Chris Mills, 2016.</p>
<p><a href="http://game-icons.net/lorc/originals/dove.html">Dove
icon</a> by Lorc.</p>
</footer>
</body>
</html>
图像音视频
<!--在img中或者CSS背景中直接引用SVG图片，那么SVG不能被JavaScript操作，同时也需要CSS样式内嵌在SVG中
除非必要，不然不要使用picture的media属性 -->
<picture>
<source media="(max-width: 799px)"
srcset="elva-480w-close-portrait.jpg">
<source media="(min-width: 800px)" srcset="elva-800w.jpg">
<source type="image/svg+xml" srcset="pyramid.svg">
<source type="image/webp" srcset="pyramid.webp">
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter
Elva">
</picture>
<img srcset="elva-fairy-320w.jpg,
elva-fairy-480w.jpg 1.5x,
elva-fairy-640w.jpg 2x"
src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
<!-- srcset是新版属性，实现的浏览器也会支持svg -->
<figure>
<img src="./images/logo-google.png"
srcset="./images/logo-google.png 320w,
./images/logo-google.png 480w,
./images/logo-google.png 800w" sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
alt="My test image"
width="800"
height="300"
title="it's image title">
<figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>
<svg version="1.1"
baseProfile="full"
width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="black"></rect>
<circle cx="150" cy="100" r="90" fill="blue"></circle>
</svg>
<!-- autoplay loop muted preload -->
<!-- audio除了不支持宽高和poster，其他都和video一样 -->
<video controls
poster="./images/logo-google.png">
<source src="./videos/rabbit320.mp4" type="video/mp4">
<source
src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/video-and-audio-content/rabbit320.webm"
type="video/webm">
<p>Your browser doesn't support HTML5 video. Here is a <a
href="rabbit320.webm">link to the video</a> instead.</p>
</video>
表格
最好还是不要使用嵌套表格，会降低可访问性。
<table>
<colgroup>
<col style="background-color: yellow">
</colgroup>
<caption>Dinosaurs in the Jurassic period</caption>
<!-- scope和id都可以用来准确标识行列，大部分情况下用scope就行，id实在太麻烦 -->
<thead>
<tr>
<th scope="col"> </th>
<th scope="colgroup" colspan="4">Ella</th>
</tr>
<tr>
<th scope="col"> </th>
<th scope="col">Knocky</th>
<th scope="col">Flor</th>
<th scope="col">Ella</th>
<th scope="col">Juan</th>
</tr>
<tr>
<th scope="col"> </th>
<th id="purchase">Purchase</th>
<th id="location">Location</th>
<th id="date">Date</th>
<th id="evaluation">Evaluation</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Juan</th>
<td>Hi, I'm your first cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
<td id="nested">
<table id="table2">
<tr>
<td>cell1</td>
<td>cell2</td>
<td>cell3</td>
</tr>
</table>
</td>
</tr>
<tr>
<th id="juan">Juan</th>
<td id="purchase juan">Hi, I'm your first cell.</td>
<td id="location juan">I'm your third cell.</td>
<td id="date juan">I'm your fourth cell.</td>
</tr>
</tbody>
<tfoot>
<th>Juan</th>
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
</tfoot>
</table>
表单
html5支持表单外使用相关部件，只需要添加form属性即可。但是浏览器的支持率还不高
一个部件可以有多个label，但是最好还是不用
action指定提交目的URL，默认（不写）为当前页面URL; method 指定提交方法
校验
required ; pattern(部分无需)
minlength/maxlength min/max ;
自定义
通过js实现，如果旧版不支持js的约束api，可以使用:
https://hyperform.js.org/
novalidate 关闭浏览器本身校验
:valid、:invalid、:in-range 、:out-of-range CSS伪类不会被关闭
aria-live 展示给包括使用ScreenReader的人
小部件
<label>,
<input>, <textarea>, and <button>
对于大多数表单部件，一旦表单提交，所有具有name属性的小部件都会被发送，即使没有任何值被填。对于单选框和复选框，只有在勾选时才发送它们的值。如果他们没有被勾选，就不会发送任何东西，甚至连他们的名字也没有。
通用属性
autofocus,disabled,form,name,value
文本输入
readonly,placeholder,size,length
- input
传递数据的时候，会把文本转换成单行文本。
如果指定了type，但是某个浏览器不兼容，会解读成默认值text - textarea
cols, rows, wrap
和Input的主要区别是，支持回车换行。
html内容只是被显示成纯文本
按钮
button类似于input，但是html值可以被处理。
图像按钮在提交时，不会提交图片，而是提交点击位置，如：
http://foo.com?pos.x=123&pos.y=456
下拉框
select box，autocomplete box
meter
可以使用optimum，配合min,max,high,low来快速确定最优值、平均值
示例
<form action="/my-handling-form-page" method="post"
enctype="multipart/form-data">
<!-- label的for属性值和input的id属性值需要对应 -->
<div>
<label for="name">Name:</label>
<input type="text" value="TpOut" id="name" name="user_name" />
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_email" required />
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"><h1>write something</h1></textarea>
</div>
<!-- <input>元素只允许纯文本作为其标签，而<button>元素允许完整的HTML内容，允许更复杂、更有创意的按钮文本 -->
<div class="button">
<button type="submit">Send your message</button>
<input type="submit" name="tempsubmit" id="btninput" />
</div>
</form>
<form>
<!-- 使用filedset包裹一套类目，ScreenReader会分别读取“Fruit juice size small”，“Fruit juice size medium” ... -->
<fieldset>
<legend>Fruit juice size</legend>
<p>
<label for="size_1">Small</label>
<input type="radio" name="size" id="size_1" value="small">
</p>
<p>
<label for="size_2">Medium</label>
<input type="radio" name="size" id="size_2" value="medium">
</p>
<p>
<label for="size_3">Large</label>
<input type="radio" name="size" id="size_3" value="large">
</p>
</fieldset>
</form>
<form>
<h1>Payment form</h1>
<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
<section>
<h2>Contact information</h2>
<fieldset>
<legend>Title</legend>
<ul>
<li>
<label for="title_1">Mister</label>
<input type="radio" id="title_1" name="title"
value="M.">
</li>
<li>
<!-- 此处使用了嵌套，chrome上显示会有些问题 -->
<label for="title_2">
<input type="radio" id="title_2" name="title"
value="Ms.">
Miss
</label>
</li>
</ul>
</fieldset>
<!-- 没看出来这里加<p>标签有什么用 -->
<p>
<label for="name">
<span>Name: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="name" name="username">
</p>
<p>
<label for="mail">
<span>E-mail: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="email" id="mail" name="usermail">
</p>
<p>
<label for="pwd">
<span>Password: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="password" id="pwd" name="password">
</p>
</section>
<section>
<h2>Payment information</h2>
<p>
<label for="card">
<span>Card type:</span>
</label>
</p><p>
<select id="card" name="usercard">
<option value="visa">Visa</option>
<option value="mc">Mastercard</option>
<option value="amex">American Express</option>
</select>
</p>
<p>
<label for="number">
<span>Card number:</span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="number" name="cardnumber">
</p>
<p>
<label for="date">
<span>Expiration date:</span>
<strong><abbr title="required">*</abbr></strong>
<em>formatted as mm/yy</em>
</label>
<input type="text" id="date" name="expiration">
</p>
</section>
<p> <button type="submit">Validate the payment</button> </p>
</form>
<meter min="0" max="100" value="75" low="33" high="66" optimum="50">32</meter>
<!-- <datalist>元素是HTML表单的最新补充，因此浏览器的支持比我们之前看到的要少一些。
最值得注意的是，它在10以下的IE版本中不受支持，Safari在写作时仍然不支持它
下面是一个最简单的兼容方案-->
<label for="myFruit">What is your favorite fruit? (With fallback)</label>
<input type="text" id="myFruit" name="fruit" list="fruitList">
<datalist id="fruitList">
<label for="suggestion">or pick a fruit</label>
<select id="suggestion" name="altFruit">
<option>Apple</option>
<option>Banana</option>
<option>Blackberry</option>
<option>Blueberry</option>
<option>Lemon</option>
<option>Lychee</option>
<option>Peach</option>
<option>Pear</option>
</select>
</datalist>
<a href="./hello.html" target="_blank" title="float tip">jump to hello</a>
<form novalidate>
<p>
<label for="mail">
<span>Please enter an email address:</span>
<input type="email" id="mail" name="mail">
<span class="error" aria-live="polite"></span>
</label>
</p>
<button>Submit</button>
</form>