【HTML】HTML5从入门到深入（复习查漏向

HTML5从入门到深入（复习查漏向

冷知识

万维网之始：第一个网站·蒂姆伯纳斯-李

HTML5

html5文档类型声明:

头部：

字符集(charset)：编码与解码采用的规则

UTF-8：万国码

常用html实体

w3school-html实体大全

显示结果	描述	实体名称
	空格
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
"	引号	`"`
'	撇号	`' (IE不支持)`
￠	分（cent）	`¢`
￡	镑（pound）	`£`
￥	元（yen）	`¥`
€	欧元（euro）	`€`
§	小节	`§`
?	版权（copyright）	`©`
?	注册商标	`®`
?	商标	`™`
×	乘号	`×`
÷	除号	`÷`

重要标签

??HTML决定网页结构，因此多注意标签意义，而不是决定大小形态颜色等属性

`元标签`

属性Attribute	用法Usage	例Exaples
name - content	一起使用设置网站元数据	、为百度等搜索引擎提供`关键字key`以及`描述description`
charset	定义网站字符编码形式	`utf-8`、`gb2322`
http-equiv	容纳一些特殊 `HTTP headers`	2秒后跳转指定url

块元素包裹行内元素，块元素默认上下换行

`布局标签-结构化语义标签`

标签名	语义
header	网页头部
footer	网页底部
main	网页主体
nav	网页导航
aside	网页侧边栏
article	文章
section	独立区块
div	块（主要使用
span	同div（行内元素，其他是块元素

`列表`

标签（均为块元素	语义
ul	无序列表
ol	有序列表
li	列表项
dl	定义列表
dd	dl解释说明
dt	dl内容

`超链接-`

Attribute	语义
href	链接url
target	链接显示窗口（如默认本窗口 `_blank => 新窗口`
href="#`id`"	`id：`标签唯一标识，重复则第一个生效
--	跳转到当前页面指定`id`位置
href="`javascript:;`"	占位

`图片元素-`

自结束标签
属性Attribute 语义

src ≈href

alt 图片获取失败会默认显示
图片形式：gif、png、jpg、webp、base64

属性Attribute	语义
src	≈href
alt	图片获取失败会默认显示

内联框架-</code></h4> <table> <thead> <tr> <th>属性Attribute</th> <th>语义</th> </tr> </thead> <tbody> <tr> <td>src</td> <td>≈href</td> </tr> <tr> <td>width-height</td> <td>定义长宽</td> </tr> <tr> <td><code>frameborder</code></td> <td>定义边框厚度</td> </tr> </tbody> </table> <h4 id="音视频"><code>音视频</code></h4> <pre><code class="language-html"><audio src="your music" controls autoplay loop></audio> <audio controls autoplay loop> <source src="···" type="···"> <embed src="···" ··· width ···> </audio> <video controls autoplay loop> <source src="···" type="···"> <embed src="···" ··· width ···> </video> // controls 用户可控 // autoplay 自动播放 // loop 循环播放 </code></pre> <h4 id="table"><code>table</code></h4> <pre><code class="language-html"><table border="1" width='50%' align="center">  <tr>  <td rowspan="2">B1</td> <td>C1</td> <td>D1</td> </tr> <tr>  <td colspan="2">C4</td> </tr> </table> </code></pre> <p><strong>结构固定-长表格</strong></p> <pre><code class="language-html"><table border="1" width='50%' align="center">  <thead> <tr> <th>日期</th> <th>收入</th> <th>支出</th> <th>合计</th> </tr> </thead> <tbody> <tr> <td>2000.1.1</td> <td>500</td> <td>200</td> <td>300</td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> <td>合计</td> <td>300</td> </tr> </tfoot> </table> </code></pre> <h4 id="form"><code>form</code></h4> <pre><code class="language-html">  <form action="target.html"> 文本框 <input type="text" name="username"> <br><br> 密码框 <input type="password" name="password"> <br><br>  单选按钮 <input type="radio" name="hello" value="a"> <input type="radio" name="hello" value="b" checked> <br><br> 多选框 <input type="checkbox" name="test" value="1"> <input type="checkbox" name="test" value="2"> <input type="checkbox" name="test" value="3" checked> <br><br>  <select name="haha"> <option value="i">选项一</option> <option selected value="ii">选项二</option> <option value="iii">选项三</option> </select> <br><br>  <input type="submit" value="注册">   //button按钮无效果，需要其他效果需要自行设置 <button type="submit">提交</button> <button type="reset">重置</button> <button type="button">按钮</button> </form> //常用属性 autocomplete="off" 关闭自动补全 readonly 将表单项设置为只读，数据会提交 disabled 将表单项设置为禁用，数据不会提交 autofocus 设置表单项自动获取焦点 </code></pre> <p><code>其他标签查询文档</code></p> </div>  <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid49-0.html' class='tagbtn' target='_blank'>前端</a><a href='/t/etagid2155-0.html' class='tagbtn' target='_blank'>HTML5</a><a href='/t/etagid614-0.html' class='tagbtn' target='_blank'>开发</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div>  <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-566393.html">eclipse搭建springboot开发环境</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564641.html">Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564195.html">socket编程之TCP开发中的PEEK_MSG的使用与见解</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-563931.html">STM32 开发板资源梳理</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-563694.html">nodejs 一个简单的web服务器，用于前端自己快速测试部署</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-563404.html">深入理解前端跨域方法和原理</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-562684.html">【前端单元测试入门04】Karma</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-561163.html">Asp.Net Mvc + ComBoost.Mvc快速开发</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="">我的软件开发中经验教训</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-559591.html">前端MVC Vue2学习总结（六）——axios与跨域HTTP请求、Lodash工具库</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-559642.html">前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-558966.html">廉颇老矣尚能饭否，30岁放弃高薪转Java开发，从零开始的程序员之路</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div>   </div>  </div> <div class="col-lg-3 col-12 p-0 ps-lg-2">     <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div>  </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="/skin/bootstrap.bundle.js"></script> </body> </html>