HTML
1.HTML5概述
HTML（HyperText Markup Language，超文本标记语言）是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言
- HTML5是构建Web内容的一种语言描述方式，HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
- HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息，HTML5在从前HTML4.01的基础上进行了一定的改进。
1.1 HTML5新增特性
| HTML5 | 新增特性 |
|---|---|
| 绘画 canvas | HTML5 标签用于绘制图像(通过脚本，通常是 JavaScript) |
| 用于媒介回放的video和audio元素 | HTML5 DOM 为audio和video元素提供了方法、属性和事件。这些方法、属性和事件允许您使用 JavaScript 来操作audio和video元素。 |
| 本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失 | localStorage ：没有时间限制的数据存储 |
| sessionStorage的数据在浏览器关闭后自动删除 | sessionStorage ：针对一个session的数据存储 |
| 语意化更好的内容元素，如 article、footer、header、nav、section | 1. 标签定义外部的内容。 2. 标签定义文档或者文档的一部分区域的页眉，元素应该作为介绍内容或者导航链接栏的容器。 3.Nav元素可以用作页面导航的链接组，在导航链接组里面有很多的链接，点击每个链接可以链接到其他页面或者当前页面的其他部分。 4.section是带有语义的标签。 |
| 表单控件，calendar、date、time、email、url、search | —————————— |
| 新的技术，webworker, websocket, Geolocation | —————————— |
1.2 化复杂为简洁
- 化繁为简的优势
- HTML5尽可能地简化，严格遵循了“简单至上”的原则，主要体现在这几个方面：
- 新的简化的字符集声明
- 新的简化的DOCTYPE
- 简单而强大的HTML5 API
- 以浏览器原生能力替代复杂的JavaScript代码。 为了实现这些简化操作，HTML5规范需要比以前更加细致、精确。为了避免造成误解，HTML5对每一个细节都有着非常明确的规范说明，不允许有任何的歧义和模糊出现。
2.HTML5的基本结构
HTML5文件的基本结构如下：
（1）文件类型声明；
（2）<html>标签对；
（3）<head>标签对；
（4）<body>标签对；
- 文件类型声明：
- 此标签用来说明该文件是HTML5文件。所有的HTML5文件开始于文件声明之后，他说明了文件的类型及其所遵守的标准规范集。
在HTML5中，其文件类型声明如下：
<!DOCTYPE html> - 注意：请保持向HTML5文件添加<!DOCTYPE>声明，这样浏览器才能获取文件类型。
- 此标签用来说明该文件是HTML5文件。所有的HTML5文件开始于文件声明之后，他说明了文件的类型及其所遵守的标准规范集。
- <html>标签对：
- <html>标签位于HTML5文件的最前面，用来标识HTML5文件的开始；</html>标签位于HTML5文件的最后面，用来标识HTML5文件的结束；这两个标签成对存在，中间的部分是文件的头部和主体。
- <head>标签对：
- <head>标签可以包含一些辅助性标签，如<title>，<link>，<meta>，<style>，<script>等。浏览器会在标题栏显示<title>元素的内容。
- <body>标签对：
- <body>标签是HTML5文件的主体部分，在此标签中可以包含<p>，<h1>，<div>，<ul>，<li> 等众多标签，<body>便签出现在</head>便签之后，且必须在标签</html>之前闭合。
- <body>标签还有很多属性，用于设置文件的背景颜色，文本颜色，超链接颜色，边距等。
3.网页的基本标签
一个完整的网页通常由标题，段落，图片，列表，图标等内容构成，下面介绍一些基本标签
3.1.标题标签
- 标题标签用来定义页面文档的标题，可以分为6个不同的级别，即<h1>，<h2>，<h3>，<h4>，<h5>，<h6>，其中<h1>字体为最大号，<h6>字体则为最小号。
下面举例说明标题标签在页面中的具体使用
<!-- 声明文档类型为 HTML5 -->
<!-- Ctrl+? 为注释 -->
<!DOCTYPE html>
<!-- <html> </html>成对出现,代表一个html的文档结构
lang等于语言，en为英文，zh cn中文
最大的结构，也是根节点-->
<html lang="en">
<!-- head表示网页的头部信息
有title：网页的标题
link：引入其他的内容
meta：网页的属性配置，也可以叫元数据配置
style：用于编写我们的css的代码
script：用于编写js的代码
等... -->
<head>
<!-- 设置了网页的编码格式为UTF-8 -->
<meta charset="UTF-8">
<!-- 为了兼容ie edge浏览器的 ie6,7,8,9,10 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 移动端流行以后，需要做自适应，添加的属性， -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网页标题 -->
<title>HTML标题标签</title>
</head>
<body>
<!-- h1标签为最大
h6标签为最小 -->
<h1>一级标题<h1>
<h2>二级标题<h2>
<h3>三级标题<h3>
<h4>四级标题<h4>
<h5>五级标题<h5>
<h6>六级标题<h6>
</body>
</html>
在浏览器中运行代码，效果如图所示：
3.2.段落标签
在网页布局中，常常需要分段换行，这时可在内容前加<p>，在内容后加</p>即可实现。
<p>标签定义段落，<p>会自动在其前后创建一些空白，浏览器会自动添加这些空间，也可以在样式表中规定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1> 满江红·写怀 </h1>
<p>怒发冲冠注，凭栏处、潇潇注雨歇。抬望眼、仰天长啸注，壮怀激烈。三十功名尘与土注，八千里路云和月注。莫等闲注、白了少年头，空悲切。</p>
<!-- <p>会自动在其前后创建一些空白，浏览器会自动添加这些空间 -->
<p>靖康耻注，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山注缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙注</p>
</body>
</html>
在浏览器中运行代码，效果如图所示：
3.3.水平线标签
当一个网页上同时出现多个主题时，为了分隔每个主题，可以在主题之间加一个<hr>标签，<hr>标签用于插入水平线，与<br>标签（换行标签）一样，都没有结束标签。
在曹和蜀中间的线就是水平线，用于分隔
3.4.字体样式标签
网页中有些字体是加粗显示或倾斜显示的，我们可以使用<strong>标签让文本加粗，使用<em>标签则让文本倾斜
<strong>标签和<em>标签都是成对出现的
<strong>加粗字体</strong>
<em>倾斜字体</em>
效果如下：
加粗字体
倾斜字体
3.5.字符实体
字符实体是指在HTML5代码中用一个编号代替一个字符，在使用浏览器访问网页时，这个编号会被解析还原为字符以供阅读。
下面为HTML5中常用的特殊符号及其对应的字符实体：
| 特殊符号 | 字符实体 |
|---|---|
| 空格 |  ； |
| 大于号（>） | >； |
| 小于号（<） | <； |
| 引号（"） | " |
| 版权符号（©） | © |
4.图像标签
常用的图像格式如下：
1.JPG格式：常见的图像格式
2.PNG格式：支持透明效果
3.GIF格式：可构成一种最简单的动画图片
4.BMP格式：Windows操作系统中的标准图像文件格式
4.1.图像标签的基本语法
- <img>标签：
- <img src=“图像的地址”>
图像标签的其他常用属性：
| 属性 | 描述 |
|---|---|
| width | 定义图像的宽度 |
| height | 定义图像的高度 |
| alt | 图像不能显示显示的文字 |
| title | 鼠标指针悬停时显示的文字 |
5.超链接标签
- 语法：
<a href=“链接地址” target=“目标窗口位置”>文字或者图像</a>
用于跳转到指定的网页
5.1.4种href路径：
绝对路径：绝对路径是网页上的文件或目录在硬盘上的完整路径。例：<img src=“D:\xxx.jpg”>
网络路径：在互联网上的图片，要输入对应的图片地址。例：<img src=“（图片对应的网络地址）”>
相对路径：相对路径就是相对于当前文件的路径，相对路径不带有盘符，通过层级文件关系描述目标图像的位置 例：<img src=“./img/hhhh.jpg”>
服务路径：<img src=“\img\20221215065548_33e732b6e205b533977abbdddce7d2d2_1.jpg”>
# 的作用：可以想要跳转到其他的页面，但是不想要影响本页，那么就可以进行添加＃就可以跳转到自己所想要的页面，是重新打开一个网页。
6.锚点链接
锚记/锚点是网页制作中超级链接的一种，又叫命名锚记。它就像定位器一样是一种页面内的超级链接，可以迅速跳到某个节点。
- 使用 id=“content” 添加锚点id属性
- 设置锚点，方式与页面内锚点跳转一致，在目标网页的指定位置设置使用 id 或 name 属性
7.行内元素和块级元素
-
行内元素有：a、b、u、span、img、input、strong、select、sub、sup、label、em、button、textarea、tt、var、samp、br、cite、code、font、strike等等。
-
行内元素特点：
1、和其他元素都在一行上；
2、高度、行高和顶以及底边距都不可改变；
3、宽度就是它的文字或图片的宽度，不可改变。
-
块级元素有：address、blockquote、center、dir、div、fieldset、form、h1–h6、hr、isindex、menu、noscript、ol、p、pre、table等
-
块级元素特点：
1.独占一行，普通流中不予许有和它同占一行的
2.可以设置其宽度、高度，内外边距
3.嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致
4.可以容纳其他元素，p元素是例外
786
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
