HTML知识点详解

## HTML

### 实体

```html
实体的语法
&实体的名字;
 			空格
>			大于号
<			小于号
©			版权符号
```

### meta标签

```html
<meta charset="utf-8">
<!--关键字之间用英文的逗号分隔-->
<meta name="keywords" content="html5,前端,css3">
<meta name="description" content="这是一个很好的网站，欢迎访问！！！">
<meta http-equiv="refresh" content="3,url=https://www.baidu.com">
```

### 语义化标签

```html
从h1-h6重要性依次递减，其中h1最重要，一般情况一个页面中只有一个h1标签;
一般情况只会用到h1-h3,h4-h6用的比较少;
hgroup标签用来为标题进行分组可以将一组相关的标签放入hgroup中;
<hgroup>
    <h1></h1>
    <h2></h2>
</hgroup>
<p>段落标签,也是一个块级元素
<em>标签用于语音语调的加重，是一个行内元素
<strong>表示强调,重要内容
<blockquote>表示一个长引用
<q>表示一个短引用
<br>表示换行
```

### 块元素与行内元素

```HTML
块元素
---在网页中一般通过块元素来对网页进行布局
行内元素
---行内元素主要用来包裹文字
注：一般情况会在块元素中放行内元素，而不会在行内元素中放块元素;
	块元素中基本什么都能放;
	p元素中不能放任何块元素;
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如：标签写在了根元素的外面；
	p元素中嵌套了块元素；
	根元素中出现了除head和body以外的其他子元素
div		没有语义就是来表示一个区块，目前来讲div还是我们目前主要的布局元素
span	行内元素，没有任何的语义，一般用于在网页中选中文字
```

### 相对路径

```html
./表示当前文件所在目录
../表示当前文件所在目录的上一级目录
```

### 超链接

```html
<a href="http://www.baidu.com" target="_self">
target属性用来指定超链接打开的位置
	可选值：
		_self默认值，在当前页面打开页面
    	_blank在新的页面打开
<a href="#">跳转到页面顶部
    <p id="ss"></p>
    <a href="#ss">跳转到p标签

```

### 图片标签

```html
<img src="./img/dog.jpg" width="400" height="200" alt="四只小狗" title="四只小狗标题哦"/>
这属于一个替换元素
src指定外部图片的路径
alt图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载的时候显示；搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则不会被搜索引擎所发现；
width图片的宽度（单位是像素）
height图片的高度
	---宽度和高度如果只修改了其中的一个，那么另一个会等比例缩放；
注意：一般情况下在pc端不建议修改图片的大小，需要多大的图片就裁多大的；
	但是在移动端，经常需要对图片进行缩放（大图缩小）
```

### 图片的格式

```
jpeg（jpg）
	---支持的颜色比较丰富，不支持透明效果，支持动图；
	---一般用来显示照片
gif
	---支持的颜色比较少，支持简单透明，支持动图；
	---颜色单一的图片，动图
png
	---支持的颜色丰富，支持复杂透明，不支持动图；
	---颜色丰富，复杂透明图片（为网页而生）
webp
	---这种格式是谷歌专门为网页而推出的一种图片格式
	---具备以上所有格式的图片的优点，而且图片还非常小；
	---缺点：兼容性不好，有的老版本的浏览器不兼容
base64
	---将图片使用base64编码这样可以将图片装转换为字符，通过字符来引入图片
	---一般都是需要和网页一起加载的图片才使用（加载速度快）
	
```

### 内联框架

```html
内联框架，用于向当前页面引入另一个其他页面
src指定引入页面的路径
frameborder指定内联框架是否有边框；
<iframe src="https://www.baidu.com" frameboder="0>
```

### 音视频

```HTML
audio 标签用来向页面中引入一个外部的音频文件
属性
	---controls是否允许用户控制播放
	---autoplay音频文件是否自动播放，如果设置了该属性在打开页面的时候音频会自动播放
	---loop音乐是否循环播放
除了用src来指定外部文件的路径以外，还可以用source来指定文件路径
<audio src="./source/audio.mp3" controls autoplay loop></audio>
<audio controls>
	<source src="./source/audio.mp3">
    <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="50">//兼容ie8的时候使用
</audio>


video 标签用来想页面中引入一个视频
	---使用方式和audio基本一致
<video controls>
	<source src="./source/video.mp4">
    <embed src="./source/video.mp4" type="vodeo/mp4" width="300" height="50">//兼容ie8的时候使用
</vodeo>

```

##