HTML 5一篇就够
Posted 一纸旧时光
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML 5一篇就够相关的知识，希望对你有一定的参考价值。
简述
user@Debian:~/Vue3Project$ yarn dev # 运行测试服务器，就可以在浏览器内访问应用了
Vue.js 会自动将编写好的 Vue 组件挂载到 html 模板中的<div id="app"></div>标签下。
打开 Vue 组件，可以看到 Vue 组件分为三区块 template、script 和 style，分别对应 HTML、javascript 和 CSS。
Q：HTML 是什么？
A：HTML 全称 HyperText Markup Language，是用于描述网页结构的超文本标记语言，最新版本为 HTML 5。
Q：CSS 是什么？
A：CSS 全称 Cascading Style Sheets，层叠样式[1]表，用于描述网页样式，最新版本为 CSS 3。
Q：HTML5 和 CSS3 的版本标准由谁制定？
A：W3C 万维网联盟(World Wide Web Consortium)说了算，以确保网页在任何浏览器内均可正常显示。
HTML5
HTML 是通过标签[2]来描述网页结构的，大多数的 HTML 元素都有一个开头标签和一个结尾标签，唯一区别就是结尾标签有个/。
HTML 模板详解
<!-- HTML5版本声明标签 -->
<！DOCTYPE html>
<!-- 文档标签，标明默认语言 -->
<html lang="en">
<!-- 头部标签，书写页面信息 -->
<head>
<!-- 元数据标签，标明文档字符集 -->
<meta charset="UTF-8" />
<!-- 视口，标明文档初始宽度和缩放值 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文档标题</title>
</head>
<!-- 主体标签，描述网页结构 -->
<body>
</body>
</html>
常用标签
可以直接写在<body></body>标签里，也可以写在 Vue 组件的 template 中。
<!-- 注释 -->
<h1>主标题</h1> <h2>副标题</h2> <h3>三级标题</h3>
<h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
<p>段落</p>
<!-- 块元素 -->
<div>
<span>行内元素</span>
</div>
<!-- 换行符 -->
<br />
<!-- 分割线 -->
<hr />
<center>居中</center>
<i>倾斜</i> <b>加粗</b>
<em>强调</em> <strong>严正强调</strong>
<s>删除</s> <del>这个也是删除</del>
<u>下划线</u>
<sup>上标</sup> <sub>下标</sub>
<big>变大</big> <small>变小</small>
HTML5 新增部分语义化[3]标签
<!-- 主体 -->
<main>
<!-- 头部 -->
<header>
<nav>导航</nav>
</header>
<!-- 文章 -->
<article>
<time datetime="2020-02-02">2020/02/02</time>
<section>章节</section>
</article>
<footer>脚注</footer>
</main>
媒体类标签
<!-- 图表 -->
<figure>
<!-- alt属性可以在图片加载失败时显示，也可以被屏幕阅读器读取 -->
<img
src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
alt="百度一下，你就知道"
/>
<figcaption>图表名</figcaption>
</figure>
<!-- 音频 -->
<audio controls>
<!-- type支持video/ogg、video/mp4、video/webm、audio/ogg、audio/mpeg -->
<source
src="http://lhttp.qingting.fm/live/1739/64k.mp3"
type="audio/mpeg"
/>
</audio>
<!-- 视频，poster属性为视频封面-->
<video
src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mi10ultra/index_08.mp4"
autoplay="autoplay"
muted="muted"
loop="loop"
poster="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
></video>
<!-- target可取_blank和_self，分别表示是否新建窗口打开链接-->
<a href="#" target="_blank">超链接</a>
列表类标签
<ul>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>自定义名词</dt>
<dd>自定义描述</dd>
</dl>
表单类标签
<!-- action指向提交数据服务器地址，method表明请求方法 -->
<form action="https://www.baidu.com/" method="post">
<!-- 表单域边框 -->
<fieldset>
<legend>表单域标题</legend>
<!-- 输入框，placeholder是占位文本 -->
<input type="text" placeholder="姓名" required tabindex="0" />
<!--
单选框和复选框常与label标签连用，for指向所关联的选项id
选框的name表明相关选项集合归属，value表示表单数据传递值，checked表示默认勾选
-->
<label for="developer">开发者</label>
<!-- 单选框 -->
<input type="radio" id="developer" value="developer" name="identity" />
<label for="user">用户</label>
<input type="radio" id="user" value="user" name="identity" />
<label for="eat">吃</label>
<!-- 复选框 -->
<input type="checkbox" id="eat" value="eat" name="hobby" checked />
<label for="drink">喝</label>
<input type="checkbox" id="drink" value="drink" name="hobby" />
<!-- 下拉菜单 -->
<select name="country" id="country">
<option value="China">China</option>
<option value="Foreign">Foreign</option>
</select>
<textarea name="textarea" id="textarea" cols="30" rows="10">
文本框
</textarea>
<!-- 按钮，accesskey指定快捷键聚焦 -->
<button type="submit" accesskey="b">提交</button>
</fieldset>
</form>
表格类标签
<table>
<caption>表格标题</caption>
<!-- 表头 -->
<thead>
<th>列一表头</th>
<th>列二表头</th>
</thead>
<!-- 表身 -->
<tbody>
<!-- 表行 -->
<tr>
<td>列一</td>
<td>列二</td>
</tr>
<tr>
<td>列一</td>
<td>列二</td>
</tr>
</tbody>
</table>
? Ask More...
层叠样式: 子元素继承父元素样式，样式如有冲突，后写的会屏蔽之前的。
[2]标签: 支持多层嵌套。
[3]语义化: 可望文生义，便于理解。
以上是关于HTML 5一篇就够的主要内容，如果未能解决你的问题，请参考以下文章