前言
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声明和各种标签