前端预备知识

网页特点相比于传统图形界面，具有以下优点：
1、无需安装 2、无需更新 3、跨平台

元素一般分为块元素（网页布局）和行内元素（包裹文字）。
1、一般会在块元素中放行内元素，不会在行内元素放块元素
2、块元素中基本上什么都可以放
3、p元素中不能放任何的块元素

浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正：
比如标签写在了根元素的外部、p元素中嵌套了块元素、根元素中出现了除head、body以外的子元素等情况。

< meta >标签
主要用于设置网页中的一些元数据，元数据不是给用户看。
charset 指定网页的字符集
name 指定数据的名称
content 指定的数据的内容

1、当name的值为keywords时，表示网站的关键字，可以同时指定多个关键字，关键字间用,隔开

<meta name="keywords" content="网上购物,网上商城,电脑">

2、当name的值为description时，表示网站的描述。网站的描述会显示在搜索引擎的搜索结果中。

<meta name="description" content="京东-专业的网上购物商城">

3、将网页重定向到另一个网站

<meta http-equiv="refresh" content="3;url=https://baidu.com">

title标签的内容会作为搜索结果的超链接的文字显示 ？？？

结构化语义标签

head 网页头部
main 网页主体部分 一个页面只有一个main
footer 表示网页底部
nav 表示网页导航
aside 和主体相关的其他内容 侧边栏
article 表示一个独立的文章
section 独立区块 上边的标签都不能使用时用section
div span

注意：id属性 唯一不重复 每一个标签都可以添加一个id属性，id属性是元素的唯一标识，页面中不能出现重复的id属性。且区分大小写

<a href="#bottom">去底部</a>
<a id="bottom" href="#">跳转顶部</a>

可以创建无跳转的超链接

<a href="javascript:;">无跳转链接</a>

关于超链接的target属性：_self、_blank 在自己页面打开，在新页面打开

补充

关于图片
alt属性是对图片的描述，搜索引擎会根据alt中的内容来识别图片，如果不写则不会被搜索引擎搜索到。
width、height属性 这两个如果只修改一个，，则另一个会等比例缩放

音视频的引入

音视频文件引入时，默认情况下不允许用户自己控制播放停止。
audio标签引入音频文件，controls属性 是否允许用户控制播放，不需要给值。autoplay音频文件会在打开页面时自动播放，也不需要给值，但是大部分浏览器都不会自动对音乐进行播放。loop属性是否循环播放

<audio src="1.mp3" autoplay controls loop></audio>

<audio controls>        
	//对不起，你的浏览器不支持播放音频！        
	<source src="1.mp3">        //为了兼容所有情况，如果文件类型都不支持，则返回文字警告
	<source src="2.ogg">
	<embed src="1.mp3" type="audio/mp3" width="200" height="50">    
</audio>

IE8等一些老版本浏览器中可用embed标签引入音视频文件，会自动播放。

<embed src="1.mp3" type="audio/mp3" width="200" height="50">

通过video标签引入视频文件，同audio标签用法相似。