<!--w3school离线手册-->
<!-- 声明语句，声明本文件使用HTML5规则，写在文件最上边 -->
<!DOCTYPE>
<html>
<!--
<meta>标签：
设置一些网页的元数据，如字符集，关键字，简介等等
自结束标签（可在后面添加一个\)
-->
<meta charset="utf-8"> <!--字符集-->
<meta name="keywords" content="HTML5,JavaScript,前端">
<!--定义搜索内容名称为网页关键字，name的值是对content的描述。-->
<meta name="description" content="HTNL5入门笔记" >
<!--定义搜索内容名称为网页描述，搜索引擎进行检索时会同时检索关键字和描述，但不会影响排名，多个关键字之间用，相隔-->
<meta name="author" content="新闻编辑部" >
<!-- 定义搜索内容名称为作者，为网页增加作者信息 -->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com">
<!--做请求的重定向，如。。秒后跳转,语法为：
<meta http-equiv="refresh" content="秒数;url=目标路径（绝对路径或相对路径）">
-->
<meta http-equiv="名称" content="值">
<!-- 设置服务器发送给浏览器的HTTP头部信息，为浏览器显示该页面提供相关的参数 -->
<link 属性="属性值" />
<head>
<title>暮暮编程之旅</title>
</head>
<body>
<!-- 属性：
可以通过属性来设置标签中的内容，
可以在开始标签中添加属性
实际上是一个 名（属性名）值（属性值）对的结构·
可设置多个属性，用空格隔开
标题标签：
对于搜索引擎而言，标题标签仅次于title标签，会影响网站在搜索引擎中的排名
页面只能有一个h1
语义化标签
-->
<h1><font color="red" size="7">h</font>ello!</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<p>明月几时有，把酒问青天</p>
<!--
<p></p>段落标签：
表示内容中的一个自然段，p标签文字默认独占一行，并且段与段之间有一个间距
语义化标签
另：在HTML中，多个空格默认等于一个空格解析
-->
<br>
<!-- 换行标签，自结束标签 -->
<hr>
<!-- 水平线标签，自结束标签
align 设置对齐方式
size 设置粗细 以像素为单位，默认2像素
color 设置颜色 可用颜色名称，十六进制#RGB、rgb(r、g、b)
width 设置宽度 可以是确定像素值，也可以是浏览器窗口的百分比，默认100%
ps:建议用CSS样式设置
-->
<!--
在html中，一些如< >特殊符号不能直接使用，需用一些特殊符号表示这些特殊字符，即实体（转义字符串）：
&实体名字；
例如： < <
> >
空格  （Non-Breaking Space，不换行空格）;
版权符号 ©；
浏览器解析到实体中，会自动将实体转化为其对应字符
-->
a<b>c
<!-- 输出内容为a<b>c -->
<p>百草霜 竹月</p>
<!-- 输出内容为百草霜 竹月（一个空格） -->
<p>百草霜   竹月</p>
<!-- 输出内容为百草霜 竹月（三个空格） -->
<p><b>天水碧——南唐后主李煜起的，那是正兴碧绿色</b></p>
<!-- 加粗文本 -->
<p><strong>天青色——宋代汝窑天青釉，后周周世宗柴荣形容“雨过天青云破处，这般颜色做将来”</strong></p>
<!-- 强调文本 -->
<p><i>黛色</i></p>
<!-- 倾斜文本 -->
<p><em>毛月色</em></p>
<!-- 强调文本 -->
<p><del>萱草黄</del></p>
<!-- 删除线文本 -->
<p><ins>霁色</ins></p>
<!-- 下划线文本 -->
<!-- <img src="">:
图片标签，向网页中引入一个外部图片
自结束标签
属性：
src:设置图片路径
使用路径为相对路径——相对于当前资源所在目录的路径
alt:设置图片描述，在图片不能显示时会显示
搜索引擎可以通过alt属性识别不同的图片
如果不写alt属性，则搜索引擎不会对img中的图片进行检索
width:设置图片宽度
height:设置图片高度
title:鼠标悬停时显示文本
hspace:垂直边距
vspace:水平边距
如果只设置了其中一个属性，则在改变时另一个属性也会随之按比例改变
同时设置则按设置值改变=
一般除了自适应的页面，一般不建议设置此属性
../ :返回一级目录，返回几级目录，就写几个../
./
代表文件所在目录
/
代表文件所在根目录
图片格式：
JEPG(JPG)
——图片支持颜色多，支持压缩，不支持透明
——适合保存颜色丰富的图片
GIF
——图片颜色支持较少，只支持简单透明，不支持动态图
PNG
——支持颜色多，并支持复杂透明
——可用来保存颜色多的复杂透明图片
-->
<img src="2.jpg" alt="猫咪壁纸">
<!-- 超链接标记与内联框架 -->
<!--
内联框架：可以引入一个外部页面
使用iframe来创建一个内联框架
属性：
src:指向一个外部页面的路径，可以使用相对路径
width:
heigh:
name:指定一个name属性
ps:在现实开发中不推荐，在内联框架中的内容不会被搜索引擎检索到
-->
<iframe src="文本规范.html name="haha"></iframe>
<!--
超链接：跳转到新页面，
使用<a>标签
<a href="跳转目标" target="目标窗口的弹出方式" >文本或图像音频或视频</a>
属性：
herf：目标地址，相对路径\完整地址
target:指定打开连接的位置
_self:当前页(默认值)
_blank:空白页
内联框架的name属性值：链接会在指定内联框架中打开
-->
<a href="http://www.baidu.com" target="_blank">此处是超链接，去百度</a>
<a href="文本规范.html">文本规范</a><!--相对路径-->
<!--
超链接图像在低版本的IE浏览器中会添加边框效果，边框设置为0就欧克
若超链接暂时没有地址，href可用#作为占位符，地址栏会出现#，
点击后，可自动跳转到当前页面顶部
锚点链接
#id属性值：跳转到id所在位置
<a href="#id"></a>
html中，每个标签都可以设置————id：
唯一，同一个页面中不能重复
-->
<!--
发送邮件超链接，默认打开计算机的默认电子邮件客户端，收件人是mailto后的邮件地址
-->
<a href="mailto:邮件默认收件人"></a>
<!--访问过的页面和未访问有区别-->
<iframe src="文本规范.html name="haha"></iframe>
<!--
center：默认在页面中居中,属于纯表现型标签，不推荐使用
-->
<center>
我在中间吗？
</center>
<!--
块元素(会独占一行的元素)，主要用来页面布局
div:无语义，不会设置任何默认样式，对页面进行布局
p,h1,h2,h3....
内联元素（行内元素），只占自身大小，不会占用一行。选中文本，设置样式。
a,img,iframe,span
span:无语义，专门选中文字，为其设置样式
ps:一般用块元素，不用内联包含块元素
a元素可以包含任何元素，除了他本身
p不可以包含任何其他块元素
内容模型
-->
<!---->
<div style="background: red;width: 20px;">ni</div>
<div style="background: yellow;">hao</div>
HTML5页面元素及属性
一、列表元素
1、<ul></ul>无序列表
<li></li>标记嵌套在<ul></ul>标记中，用于描述具体的列表项，每对<ul></ul>至少包含一对<li></li>标签。
HTML5中不支持该元素的type属性
<li></li>可容纳所有元素，但<ul></ul>只能嵌套<li></li>,不允许直接在ul标签中输入文字。
2、<ol></ol>有序列表
<li></li>标记嵌套在<ol></ol>标记中，用于描述具体的列表项，每对<ol></ol>至少包含一对<li></li>标签。
在HTML5中该元素拥有start属性（更改列表编号起始值）和reversed属性（是否对列表用法进行反向排序，默认为true）
3、<dl></dl>定义列表
对术语或名词进行解释和描述
<dt></dt>标记名词或术语，<dd></dd>对名词进行解释描述，会产生一定的缩进效果。
二、结构元素
1、<header></header>
引导导航作用，通常放整个页面或页面中一个内容区块的标题
不同于head元素，一个页面中可以有多个header元素
2、<nav></nav>
定义导航链接，HTML5新增元素，将具有导航性质的链接归纳到一个区域。导航元素可连接站点其他页面或当前页面其他部分。
3、<article></article>
</body>
</html>
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
