前言
H5声明和H5基本骨架，各种标签以及H5的新标签
一、HTML5的DOCTYPE声明
DOCTYPE是document type(文档类型)的缩写，是H5的声明，位于文档最前面，他是网页必备组成部分，避免浏览器的怪异模式。
二、HTML5的基本骨架
1.html标签
- 包裹其它标签
- 限定文档的开始和结束
<html lang="en">表示当前网页语言为英文
2.head标签
- 定义文档的头部，包括文档的各种属性和信息，包括标题
- 不展示给用户
- 和其他文档的关系
- 在Web中的位置
<meta charset="UTF-8">表示当前编码为UTF-8
3.body标签
- 定义文档的主体
- 包括了文档所有内容（文本、超链接、图像、表格、列表）
- 直接在页面中显示，用户直观看到的内容
4.title标签
- 定义文档标题
- 显示在浏览器窗口的标题栏或状态栏上
- 该标签是head标签中唯一必须的标签
- 有利于SEO优化（浏览器搜索引擎搜索的排名）
二、标题标签
标题（Heading）是通过
~
标签来定义的。
定义最大 标题，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
标签位置摆放：
在标签中添加属性align="left | center | right"默认居左
<h1 align="center">一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
正确使用标题标签有利于SEO优化
三、段落、换行、水平线标签
1、 段落
段落用
<p>标签定义
<body>
<p>这是一个段落</p>
<p>这是另一个段落</p>
</body>
2、 换行
换行用
<br>标签定义,为单标签
<body>
<p>这是一个段落</p>
<p>这是<br/>另一个段落</p>
</body>
3、 水平线
水平线用
<hr>标签定义,为单标签
属性：
- color:设置水平线颜色
- width：设置水平线长度
- size:设置水平线的高度
- align:设置水平线对齐方式（默认居中），可取值 left | right
<hr color="red" width="300px" size="5px" align="left"/>
四、图片标签
图片用
<img>标签定义,为单标签
<img src="" alt="">
属性：
- src:图片路径
- alt:规定图像的替代文本
- width：规定图像的宽度
- height：规定图像的高度
- title：鼠标悬停在图片上的提示文字
路径：
- 绝对路径：电脑中储存的具体位置
- 相对路径：
- 子级关系：/
- 父级关系：…/
- 同级关系：./
五、超文本标签
超文本用
<a>标签定义
<a href=""></a>
属性：
- href:跳转链接地址
- 一个未访问过的链接显示未蓝色字体并带有下划线
- 访问过的链接显示未紫色并带有下划线
- 点击链接时，链接显示为红色并带有下划线
六、文本标签
常用文本标签：
<em>: 定义着重文字<b>:定义粗体文本<i>:定义斜体字<strong>:定义加重语气<del>:定义删除字<span>:元素没有特定含义
<em>em</em>
<br>
<i>i</i>
<br>
<b>b</b>
<br>
<strong>strong</strong>
<br>
<del>del</del>
<br>
<span>span</span>
七、有序列表标签
有序列表始于
<ol>标签，每个列表始于<li>标签。
<ol>
<li>123</li>
<li>123456</li>
</ol>
ol属性type的选项：
- 1
- a
- A
- i
- I
可嵌套列表：
<ol type="A">
<li>123
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</li>
<li>123456</li>
</ol>
八、无序列表标签
无序列表始于
<ul>标签，每个列表始于<li>标签。
<ul>
<li>123</li>
<li>123456</li>
</ul>
ol属性type的选项：
- disc:默认实心圆
- circle:空心圆
- squarer:小方块
- none:不显示
可嵌套列表：
<ul>
<li>123
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>123456</li>
</ul>
九、表格标签
表格：
<table>标签
行：<tr>标签
单元格（列）：<td>标签
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
快捷键
table>tr*2>td{内容}
table表格属性：
- border: 设置表格的边框
- width: 设置表格的宽度
- height: 设置表格的高度
<table border="1px" width="300px" height="100px">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
单元格合并属性
水平合并：colspan 保留左边，删除右边，值为合并单元格个数
垂直合并：rowspan 保留上边，删除下边，值为合并单元格个数
<table border="1px" width="300px" height="100px">
<tr>
<td colspan="2">1</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
</table>
十、Form表单
用来给用户填写信息，从而能采集用户信息，使网页具有交互的功能。
表单是由容器和控件组成，一个表单一般应该包括用户填写信息的输入框，提交按钮等，这些称为控件，表单就是容器，能容纳各种控件。
<form action="url" method="get | post" name="myForm">
属性：
action:服务器地址
name:表单名称
meethod：请求方式（get | post）
表单元素：
完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮
<form action="url" method="get | post" name="myForm">
<input type="text">
<button type="submit">提交</button>
</form>
文本域：用户输入字母数字等内容
<input type="text">
密码框：输入的密码
<input type="password">
提交按钮：用来提交表单
<input type="submit" value="登录">
十一、元素分类（块、行内元素）
| 块级元素 | 行内元素 |
|---|---|
| 块元素会在页面中独占一行（自上而下垂直排列） | 行内元素不会独占一行，只占自身的大小 |
| 可以设置width,height属性 | 行内元素设置width,height属性无效 |
| 一般块级元素可以包含行内元素和其它块级元素 | 一般行内元素不包含块级元素 |
块元素
常见：div、form、h1~h6、hr、p、table、ul、等
行内元素
常见：a、b、em、i、span、strong、等
行内块级元素
不换行、能够识别宽高
常见：button、img、input、等
十二、HTML5新增标签
有利于搜索引擎SEO优化
传统的页面采用DIV+CSS实现，某个模块最外层用
<div>标签包裹
<div>
<form action="url" method="get | post" name="myForm">
<input type="submit" value="登录">
<button type="submit">提交</button>
</form>
</div>
H5新增标签：
<header></header>头部标签<nav></nav>导航栏标签<section></section>文档中的节，如章节、页眉、页脚<article></article>一个独立的、完整的相关内容块<aside></aside>侧边栏标签<footer></footer>底部标签
总结
本文仅仅简单介绍了HTML和H5，其中包括了H5声明和各种标签
703
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
