实体
我们在网页中编写的多个空格默认会自动地被浏览器解析为一个空格，并且有时候不能直接书写一些特殊符号，比如连续多个空格或字母两侧的大于号、小于号等等。这个时候如果要显示这些特殊字符就需要用到实体。
一些常用的实体语法如下：
空格；<小于号；>大于号；©版权符号；"引号
meta标签
meta标签主要用于设置网页中的一些元数据，元数据不是给用户看的。
常用属性如下：
- charset：指定网页字符集
- name：指定的数据的名称
- content：指定的数据的内容
name属性中，“keywords” 是一个经常被用到的名称。它为文档定义了一组关键字，关键字之间使用，（逗号）隔开。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。例如京东的关键字：
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>
description同样也是被经常用到，用于指定网页的描述。网站描述的内容会显示在搜索引擎的搜索结果中。
<meta name="description"
content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/>
语义化标签
在网页中，HTML负责网页的结构，所以在使用html标签时，应该关注的是标签的语义，而不是它的样式。
先说两个概念，块元素和行内元素。
块元素（block element）：
①在页面中独占一行的元素。
②在网页中一般通过块元素进行布局。
行内元素（inline element）：
①行内元素主要用来包裹文字。
②在页面中不会独占一行的元素。
一般情况下会在块元素中放行内元素，不会在行内元素中放块元素；块元素中基本上什么都能放；比较特殊的就是：p元素中不能放任何的块元素。
- 标题标签（块元素）：
h1~h6：一共六级标题
h1在网页中的重要性仅次于title标签，一般情况下一个页面只有一个h1。一般只会用到h1~h3。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
- p标签（块元素）：页面中的一个段落。
<p>在p标签中的内容表示一个段落</p>
- em标签（行内元素）：用于表示语音语调的一个加重。
<p>天气<em>真</em>好！</p>
- strong标签（行内元素）：表示强调重要内容。
<p>今天<strong>必须</strong>看完二十集</p>
- blockquote标签（块元素）：表示一个长引用，独占一行。
某某曾说过：
<blockquote>
每个人都是孤独的个体
</blockquote>
布局标签（结构化语义标签）
- header 标签： 表示网页的头部（网页中某个部分的头部）
- main 标签：表示网页的主体部分（一个页面中只会有一个main）
- footer标签： 表示网页的底部（网页中某个部分的底部）。
- nav标签： 表示网页中的导航
- aside标签： 表示和主体相关的其他内容（侧边栏）
- article标签： 表示独立的文章
- section 标签：表示一个独立的区块，上边的标签都不能表示时使用section
- div 没有语义，用来表示一个区块，是目前主要的布局元素
- span 行内元素，没有任何的语义，一般用于在网页中选中文字
<header></header>
<main></main>
<footer></footer>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
列表
html中创建列表，共有三种形式：
- 有序列表：使用ol标签创建有序列表，使用 li标签表示列表项。
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
- 无序列表：使用ul标签创建有序列表，使用li标签表示列表项。
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
- 定义列表：使用dl标签创建一个定义列表，使用dt标签来表示定义的内容，使用dd标签来对内容进行解释说明。
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构</dd>
</dl>
超链接
超链接可以从一个页面跳转到其他页面，或者是当前页面中指定的其他位置。 超链接也是行内元素，在a标签中可以嵌套除它自身外的任何元素。
使用 a标签 来定义超链接,其主要属性：
- href属性指定跳转的目标路径， 值可以是外部网站的地址，也可以是内部页面的地址。
- 可以直接将超链接的href属性设置为#，点击超链接以后页面不会发生跳转，而是跳转到当前页面的顶部位置。
- 可以跳转到页面的指定位置，只需要将href属性设置为 #目标元素的id属性值。
这里说明一下id属性
id属性（唯一不重复的，区分大小写）
-
每一个标签都可以添加一个id属性
-
id属性是元素的唯一标识，同一个页面不能出现重复的id属性
------------------------------------------------------------- -
target属性，用来指定超链接打开的位置
属性值：
_self ： 默认值 在当前页面中打开超链接
_blank ： 在一个新的页面中打开超链接
<a href="https://www.baidu.com">超链接</a>
<a href="07.巴啦啦.html" target="_blank">超链接</a>
<a href="#">新的超链接</a>
<a href="#p3">去第三自然段</a>
关于相对路径
当需要跳转一个服务器内部的页面时，一般都会使用相对路径。相对路径都会使用 . 或 … 开头（ ./
…/ ）。 ./ 可以省略不写，如果不写./也不写…/则就相当于写了./
-
./ 表示当前文件所在的目录 -
../ 表示当前文件所在目录的上一级目录
图片标签（img标签）
图片标签用于向当前页面中引入外部图片 ，使用img标签引入外部图片，是一个自结束标签。img元素属于替换元素（基于块元素和行内元素之间，具有两种元素的特点）。
其主要属性：
- src 属性 : 指定的是外部图片的路径（路径和超链接规则一致）
- alt 属性 : 默认情况下不会显示，有些浏览器会在图片无法加载时显示。 搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所识别。
- width 宽度（单位是像素）
- height 高度（单位是像素）
宽度和高度如果只修改一个，另一个会等比例缩放。
注意：一般情况下在pc端，不建议修改图片的大小，需要多大的图片就裁多大。但是在移动端，经常需要用大图片进行缩放（主要是大图缩小）
图片格式的介绍
-
jpeg(jpg)：支持颜色丰富，不支持透明效果，不支持动图，一般用来显示照片。
-
gif：支持颜色少，支持简单透明，支持动图，适合颜色单一的图片和动图。
-
png：支持颜色丰富，支持复杂透明，不支持动图
，颜色丰富，复杂透明图片（专为网页而生） -
webp：谷歌新推出专门用来表示网页中图片的一种格式，具备其他图片格式的所有优点，文件特别小。缺点：兼容性不好。
-
base64：将图片使用base64编码，将图片转换为字符，通过字符的形式来引入图片。一般都是一些需要和网页一起加载的图片才会使用base64。
音视频标签（ audio标签和video标签）
audio：用来向页面中引入一个外部的音频文件。 音视频文件引入时，默认情况下不允许用户自己控制播放停止。
其主要属性:
- src：资源路径
- controls：是否允许用户控制播放
- autoplay：音频文件是否自动播放，如果设置了autopaly，则音乐在打开页面时会自动播放。但是目前大部分浏览器都不会自动对音乐播放
- loop:音乐是否循环播放
<audio src="./resource/audio.mp3" controls autoplay loop></audio>
<!--
除了通过src来指定外部文件的路径外，还可以通过source来指定文件
如果是多个格式，从第一个开始，不兼容则到下一个
-->
<audio controls>
<!-- 对不起，您的浏览器不支持播放音频，请升级！ -->
<source src="./resource/audio.mp3">
<source src="./resource/audio.ogg">
<!-- 老标签，在IE8中可以播放. type前面是大类型/具体类型-->
<audio src=" ./resource/audio.mp3 " type="audio/mp3 " width="400" height="100">
</audio>
video标签：使用video标签向网页中引入视频，使用方式基本同audio相同。
<vide controls>
<source src=" ./resource/audio.mp4 ">
</vide>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
