HTML文档的创建
基本结构
DOCTYPE元素
每个HTML文档必须以DOCTYPE开头。浏览器以此可以知道将要处理的是HTML内容。就算省略DOCTYPE大部分浏览器依然可以识别文档内容，但是这是一种不好的习惯。
DOCTYPE html>
它告诉了浏览器这是一个HTML文档，以及HTML的所属版本
html元素
是HTML文档的根元素，表示HTML文档的开始
DOCTYPE html>
<html>
···
html>
head元素
包含文档元数据。它向文档提供了有关文档内容和标记的信息。还可以包含脚本和对外部资源的引用
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演示title>
head>
···
html>
body元素
文档的内容包含在body元素中。body元素总是在head元素后面，是html的第二个子元素。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题和段落title>
head>
<body>
<h1>望庐山瀑布h1>
<h2>李白h2>
<p>日照香炉升紫烟，p>
<P>遥看瀑布挂前川。P>
<P>飞流直下三千尺，P>
<p>疑是银河落九天。p>
body>
html>
用元数据说明文档
设置文档标题
设置文档标题使用title元素，它通常会在浏览器的顶部或标签上显示。并且每个HTML文档只有一个title元素，用来区分各个浏览器窗口或浏览器的各个标签页
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演示title>
head>
html>
设置URL的解析基准
base元素可以用来设置一个基准URL，让HTML的相对链接在此基础上进行解析。一个完整的URL包括
https://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#anchor
传输协议： https
主机： www.example.com 其中www是服务器example.com是一级域名
端口号： 默认80端口，可以省略。一台电脑大约65535个端口
路径： path/to/myfile.hrml 表示文件的相对地址
携带参数： ？key=value&key2=value2
哈希值： #anchor
而HTML文档中的链接通常使用的是相对链接（省略主机和端口号），base可以通过预设链接的解析基准使HTML文档在解析链接时得出完整得URL。
另外还可以用来设定用户点击链接的打开方式，以及表单提交时浏览器的反应，在head元素中位置比较靠前
href属性
href属性指定解析文档时相对URL需要使用到的基准URL例：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演示title>
<base href="https://tieba.baidu.com/">
head>
<body>
<a href="/f?kw=二手笔记本&fr=index&fp=0&ie=utf-8">贴吧a>
body>
html>
以上代码在点击贴吧后会跳转二手笔记本的贴吧，浏览器在解析HTML文档时把基准URL和相对URL拼成一个完整的URL地址。如果没有base的href属性设定的基准URL，浏览器会直接把相对URL当作解析基准。
这时浏览器就会报错
使用target属性
它告诉浏览器如何打开URL。该属性代表一个浏览的上下文
具体可参考HTML target 属性
用元数据说明文档
meta元素用来定义HTML文档的元数据，每个meta元素只能用于一种用途。如果想要使用的特性不止一个，应该使用多个meta元素。
指定名值的数据对
当meta用名/值对定义元数据时需要使用name和content属性例
DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
代码中name名viewport表示为视口初始大小提供指示,只用于移动设备
content值width=device-width表示宽度与设备宽度一致，initial-scale=1.0表示设备宽度(与横屏竖屏相关)与视口大小之间的比例时1.0。
声明字符编码
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>Documenttitle>
head>
<body>
body>
html>
代码中声明该文档使用的是UTF-8字符编码
模拟http响应标头
http-equiv用途是指定所要模拟标头字段的名称
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">
<meta http-equiv="refresh" content="5">
<title>Documenttitle>
head>
<body>
body>
html>
refresh定义文档刷新间隔，上面代码表示文档每隔5秒刷新一次
另外还有其他用法可以参考HTML 标签
定义CSS样式
style元素可以用来定义HTML文档内嵌的CSS样式
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演示title>
<style>
div{
width: 200px;
height: 200px;
background-color: #ffc0cb;
}
style>
head>
<body>
<div>div>
body>
html>
一般用于对特有样式的补充
type属性
用来将所定义的样式类型告诉浏览器。由于浏览器所支持的只有CSS所以这个属性的值总是text/css，也可以不写。
scoped属性
指定该样式只作用于该元素的父元素和兄弟元素
上图中可以看到当前没有浏览器支持该属性
media属性
表明文档在什么情况下可以使用该元素定义的属性
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演示title>
<style media="screen">
div {
width: 200px;
height: 200px;
background-color: #ffc0cb;
}
style>
head>
<body>
<div>div>
body>
html>
上面screen表示只用于计算机显示屏幕。默认是all
link属性
用来在HTMl文档和外部资源之间建立联系。常用属性有
href：link元素指向的资源URL
hreflang：说明关联资源使用的语言
media：说明关联资源用于那种设备
rel：说明文档与关联资源的关系类型
sizes：指定图标大小
type：指定关联资源的MIME类型
常用方式
载入样式表
<link rel="stylesheet" href="./CSS/base.css">
stylesheet：载入外部样式表 href：载入地址
定义网站标志
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
大多数浏览器会自动请求favicon.icon文件。所以当网站图标与此同名时可以不用写
预先获取资源
<link rel="prefetch" href="/pae2.html">
prefetch表示预先获取资源
使用脚本元素
script元素
在页面中加入脚本
noscript元素
用来向浏览器不支持或禁用加JavaScript用户显示一些内容