HTML5基本介绍

1.定义

HTML5（Hypertext markup language）就是html语言，又称为超文本标记语言，其中的超指的就是它能表达的内容不仅仅只是文字，还包括图片、音频、视频、超链接等等。html语言开发的文件是以.html为后缀，可以双击直接在浏览器中打开，被浏览器解析被显示给用户查看。

2.组成：由转义字符、指令、标签三大部分组成

转义字符：特殊字符数字的组合，会被解析为特殊的含义。被&;包裹，内容为特殊的字母或数字组成。详细的转义字符可点击转义字符查看

1. 空格：&nbsp;
2. 字符"：&quot;
3. 字符&：&amp;
4. 字符<：&lt;
5. 字符>：&gt;
6. 版权©：&copy;

指令：被<>包裹，以!开头的特殊符号，称之为指令，指令中不区分大小写

1.文档指令：<!doctype html>  <!--需要出现在一个html文件的最上方，代表该文件采用html5语法进行编写文件的-->
2.注释指令：<!-- -->  <!--这里书写的就是注释内容，不会被浏览器解析展示给用户看-->

标签：被<>包裹，以字母开头，可以结合数字、-连接符等合法字符的特殊字符，称之为标签。标签中不区分大小写，有系统标签与自定义标签两种

<!-- 页面结构相关的系统标签 -->
1. 页面根标签：<html></html>
2. 页面头标签：<head></head>
3. 页面体标签：<body></body>
4. 页面标题标签：<title></tile>
5. 元标签：<meta />
6. 链接标签：<link />
7. 样式标签：<style></style>
8. 脚本标签：<script></script>

<!-- 简单的系统标签 -->
1. 标题标签：<h1></h1> ... <h6></h6>
2. 段落标签：<p></p>
3. 换行标签：<br />
4. 分割线标签：<hr />
5. 行文本标签：<span></span>
6. 斜体标签：<i></i>
7. 加粗标签：<b></b>
8. 图片标签：<img />
9. 超链接标签：<a></a>
7. "架构"标签：<div></div>

<!-- 复杂的系统标签 -->
1. 无需列表标签：<ul><li></li></ul>
2. 表格标签：<table><!-- 包含大量的表格子标签 --></table>
3. 表单标签：<form><!-- 包含大量的表单子标签 --></form>

自定义标签：满足合法命名的所有标签
<num></num>
<s1-t></s2-t>

注释：html语言中，系统建议只使用系统标签，不建议使用自定义标签

Html网页骨架

<!--文档指令，必须出现在html文件的最上方，一个html文件只出现一次，html表示该文件采用html5语法进行编写-->
<!DOCTYPE html>
<!--根标签,一个html文件只出现一次，只有head和body两个子标签-->
<html lang="en">
    
<!--头标签：样式、脚本、后勤操作：页面编码、页面标签标题图标，一个html文件只出现一次-->
<head>  
    <!--声明编码，代表标签结束的/可省略-->
    <meta charset="UTF-8" />  
    <!--页面标题标签，用来显示页面标签标题-->
    <title>Title</title> 
    <!--用来存放出现在head中的CSS3样式代码的标签-->
    <style></style>
    <!--用来存放出现在head中的JavaScript脚本代码的标签-->
    <script></script>
<!--页面头标签的结束标识-->  
</head>
    
<!--体标签：页面显示内容存放区域、样式、脚本，一个html文件只出现一次-->   
<body>
    ...  <!-- 页面内容-->
<!--页面体标签的结束标识-->
</body>
    
<!--页面根标签的结束标识-->
</html>

补充

<!-- 关键词元标签，让该页面更容易被百度这样的搜索引擎通过关键词搜索到 -->
<meta name="keywords" content="8-12个以英文逗号隔开的单词或词语">
<!-- 网页描述元标签，也是辅助于让页面更容易被搜索引擎搜索到 -->
<meta name="description" content="80字以内的一段话，介绍该网站">
<!-- 屏幕适配元标签，让该页面适配移动端屏幕尺寸 -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<!-- 设置页面标签图片链接标签 -->
<link rel="shortcut icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico" />

下一篇：https://www.cnblogs.com/863652104kai/p/11265904.html