html5笔记

html5（超文本标记语言）

1.标签笔记

主要结构

<!-- 文档声明 -->
<!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>
</body>
</html>

行内元素、块元素、行内块元素

行内元素（inline）：水平摆列，高度默认被内容撑开。
块元素（block）：垂直排列，可设宽高，独自占有横向空间。
行内块元素（inline-block）：水平排列，可设宽高。

meta标签（用来设置网页的元数据）的用法

用法一：声明引用
meta charset=“utf-8” 判定使用的字符集
meta name=“keywords” content=“html5.css”
其中name代表数据的名称，content代表数据的内容。（一般用来进行网站描述）
用法二：界面跳转
meta http-equiv=“refresh” content=“3;url=…”
用法三：屏幕视口大小（移动端的完美视口）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

标题标签

一共有h1-h6级标题，一般只使用h1到h3
p标签：表示页面段落
hgroup标签用来对标题分组

列表标签

1.有序列表（ul）
其中里面可设li来作为列表项
2.无序列表（ol）
3.定义列表（dl）
其中dt表示定义的内容，dd表示对内容的解释说明

超链接标签（a）

a标签是一个行内元素，但可以在内容中放入块元素
用法：

<a href="地址" target="_blank">内容</a>

target 用来指定超链接的打开位置：
_self:默认值，在当前页面打开
_blank:在一个新的页面打开

图片标签（img）

<img src="" alt="图片标签描述">

音频标签（audio）

<audio src="" controls autoplay></audio>

controls:允许用户控制播放
autoplay：自动播放
loop：循环播放

视频标签（video）

与音频一样