这算是我之前记得笔记，现在在清理电脑的文件，舍不得删就发出来了。没写完，以后应该会补充的，标签后边有☺证明是H5的新标签。
基础标签
一个网页最基本的框架要包含这几样东西：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
文档的内容......
</body>
</html>
html中的标签都要成对出现，形如：<xxx> </xxx>，但是自结束标签不需要成对写，例如<img> <br>，也可以写成<img /> <br />，推荐写前者。
<!DOCTYPE>
<!DOCTYPE>声明没有结束标签。<!DOCTYPE>声明必须是 HTML 文档的第一行，位于<html>标签之前。- 在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种：
<!DOCTYPE html> <!DOCTYPE>声明对大小写不敏感。当然了，大小写是不限制的，所以可以写成<!doctype html>或者<!DOCTYPE HTML>
<title>
title标签的内容会作为搜索结果的超链接上的文字显示
<meta>
<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。<meta>标签位于文档的头部，不包含任何内容。永远位于 head 元素内部。<meta>标签的属性定义了与文档相关联的名称/值对。- charset指定网页的字符集，即网页的解码方式
- utf-8 万国码，世界通用
- GBK支持汉字
- ……
- name指定的数据的名称，content指定的数据的内容，content 属性始终要和 name 属性或 http-equiv 属性一起使用。name：
- author：网站作者
- description：网站描述
- keywords：搜索网站的关键词
- generator：
- revised：
- others：
- http-equiv
- refresh：重定向
- content-type
- expires
- set-cookie
- charset指定网页的字符集，即网页的解码方式
<head>
<meta charset="utf8" version='1'/>
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
</head>
标题标签
h1～h6一共有六级标题，从h1～h6重要性递减，h1最重要，h6最不重要，一般情况下标题标签只会使用到h1～h3，h4～6很少用
标题标签都是块元素，在页面中独占一行的元素称为块元素（block element）
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
其他
<br>定义简单的折行。<hr>定义水平线。<!--...-->定义注释。<p>标签表示页面中的一个段落
实体
在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格
在HTM中有些时候，我们不能直接书写一些特殊符号比如多个连续的空格，比如字母两侧的大于和小于号。如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体实体的语法：
空格>大于号<小于号©版权符号
块元素和行内元素
- 块元素（block element）
在网页中一般通过块元素来对页面进行布局 - 行内元素（inline element）
行内元素主要用来包裹文字
一般情况下会在块元素中放行内元素，而不会在行内元素中放块元，块元素中基本上什么都能放，特例：p元素虽然是块元素，但是其中不能放任何的块元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正，比如：
- 标签写在了根元素的外部
- 元素中嵌套了块元素
- 根元素中出现了除head和body以外的子元素
- ……
布局标签（结构化语义标签）
-
<div>定义文档中的节。块元素。 -
<span>定义文档中的节。行内元素。
最常用的布局标签还是<div> -
<header>☺表示网页的头部 -
<main>☺表示网页的主体部分（一个页面中只会有一个main） -
<footer>☺表示网页的底部 -
<aside>☺和主体相关的其他内容（侧边栏） -
<article>☺表示一个独立的文章 -
<section>☺表示一个独立的区块，上边的标签都不能表示时使用 section -
<details>☺定义元素的细节 -
<dialog>☺定义对话框或窗口 -
<summary>☺为<details>元素定义可见的标题
格式标签
- ☺
<hgroup>标签用来为标题分组，可以将一组相关的标题同时放入到<hgroup>中 <em>标签用于表示语音语调的一个加重，其实显示效果就是斜体，<i>也表示斜体。<strong>表示强调，其实就是加粗显示，此外<b>也可以表示加粗<blockquote>长引用，<q>短引用
链接
<nav>☺
表示网页中的导航
<link>
定义文档与外部资源的关系。
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
<a>
超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置。超链接是也是一个行内元素，在<a>标签中可以嵌套除它自身外的任何元素。
属性：
- href指定跳转的目标路径
值可以是一个外部网站的地址
也可以写一个内部页面的地址- target ，用来指定超链接打开的位置
- _self默认值在当前页面中打开超链接
- _blank在一个新的要么中打开超链接
- ＃，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置
- 跳转任意位置：将href属性设置＃目标元素的id
- target ，用来指定超链接打开的位置
属性值id属性（唯一不重复的）每一个标签都可以添加一个id属性
id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性
图像
<img>
自结束标签，属于替换元素。
img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）
属性:
- src属性指定的是外部图片的路径（路径规则和超链接是一样的）
- alt图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示
搜索引擎会根据a1t中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所 - width图片的宽度（单位是像素）
- height图片的高度
宽度和高度中如果只修改了一个，则另一个会等比例缩放
注意：
一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
但是在移动端，经常需要对图片进行缩放（大图缩小）
图片的格式：
- jpeg（jpg）
支持的颜色比较丰富，不支持透明效果，不支持动图
一般用来显示照片 - gif支持的颜色比较少，支持简单透明，支持动图
颜色单一的图片，动图 - png支持的颜色丰富，支持复杂透明，不支持动图
颜色丰富，复杂透明图片（专为网页而生） - webp
这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
它具备其他图片格式的所有优点，而且文件还特别的小
缺点:兼容性不好 - base64
将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片一般都是一些需要和网页一起加载的图片才会使用base64
<map>
定义图像映射。
<area>
定义图像地图内部的区域。
音频视频
<audio>☺
向页面中引入一个外部的音频文件的，Internet Explorer 8 以及更早的版本不支持 标签。 音视频文件引入时，默认情况下不允许用户自己控制播放停止。
属性：
- src 要播放的音频的 URL。
- autoplay 音频文件是否自动播放
- controls 是否允许用户控制播放，没有这个属性用户是看不到播放插件的，无法控制音乐播放
- loop音频循环播放
- muted 规定视频输出应该被静音。
<audio src＝＂audio. mp3＂ controls autoplay loop＞</audio>
除了通过src来指定外部文件的路径以外还可以通过<source>☺来指定文件。
<!--写法一-->
<audio controls>
对不起，您的浏览器不支持播放音频！请升级浏览器！
<source src＝＂. /source/audio. mp3＂>
<source src＝＂. /source/audio. ogg＂>
</audio>
<!-- 这段代码中，支持mp3格式的浏览器会执行mp3那一条，
不支持mp3的则会执行ogg格式的那一条。
如果IE8往下的版本则不支持<audio><source>两个标签，
则会显示“对不起，您的浏览器不支持播放音频！请升级浏览器！”-->
<!-- 写法二 -->
<audio controls>
<source src＝＂. /source/audio. mp3＂>
<source src＝＂. /source/audio. ogg＂>
<embed src＝＂. /source/audio. mp3＂ type＝＂audio/mp3＂ width＝＂300 >
</audio>
<!-- 这段代码中，支持mp3格式的浏览器会执行mp3那一条，
不支持mp3的则会执行ogg格式的那一条。
如果IE8往下的版本则不支持<audio><source>两个标签，
执行<embed>，出现系统自带的播放插件进行播放，需要设定大小-->
<video>☺
向网页中引入一个视频
使用方式和audio基本上是一样的
内联框架
用于向当前页面中引入一个其他页面
src指定要引入的网页的路径
frameborder指定内联框架的边框
列表
无序标签
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
- Coffee
- Tea
- Milk
有序列表
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
- Coffee
- Tea
- Milk
列表嵌套
定义
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
- 计算机
- 用来计算的仪器 ... ...
- 显示器
- 以视觉方式显示信息的装置 ... ...
