一、HTML5基本概念
1、介绍
HTML5是用来描述网页的一种语言,被称为超文本标记语言。用HTML5编写的文件,后缀以.html结尾。HTML是一种标记语言,标记语言是一套标记标签。标签是由尖括号包围的关键字。
2、DOCTYPE声明
DOCTYPE是document type(文档类型)的缩写。<!DOCTYPE html> 是H5的声明,位于文档的最前面,处于标签之前他是网页必备的组成部分,避免浏览器的怪异模式(不同浏览器之间)一定得写。
二、标签
1、骨架标签介绍
html标签
定义HTML文档,让浏览器明白这个是HTML文档,其他元素要包裹在它里面,标签限定了文档的开始点和结束点。
head标签
head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息,包括文档的标题、在web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
body标签
body元素定义文档的主体。他包含文档的所有内容(文本、超链接、图像、表格等)。它会直接在页面中显示出来,就是用户可以直观看见的内容。
title标签
可以定义文档的标题
显示在浏览器窗口的标题栏或状态栏
title标签是head标签中唯一必须要求包含的东西,写head一定写title
title的增加有利于SEO优化
SEO是搜索引擎优化的英文缩写。通过对网站内容调整, 满足搜索引擎的排名需求。
meta标签
meta标签用来描述一个HTML网页文档的属性,关键词等, 列如:charset="utf-8" 是说当前使用的是utf-8编码格式。
2、标题标签
标题通过<h1>--<h6>标签进行定义的。
<h1>定义最大的标题,<h6>定义最小的标题
3、段落、换行、水平标签
段落标签<p>:把文字内容放在里面,方便调节。
换行标签<br/>:此标签后的内容从下一行开始。
水平线<hr/>:创建一条水平线。
属性:color:更改颜色。
width:设置水平线的长度
size:设置水平线的高度
align:设置水平线的对齐方式。
4、图片标签
<img>标签定义图片。
属性:src:图片路径
alt:定义图像的替代文本
width:规定图片宽度
height:规定图像的高度
title:鼠标悬停在图片给予的提示
5、超文本链接
<a>标签设置超链接,超链接可以是文本、图片。
属性:href:定义链接地址
6、文本标签
7、列表标签
A、有序标签
有序列表是一列项目,列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表始于<li>标签。且列表可以嵌套。
属性:type:1:表示使用数字标号
a:表示使用小写字母标号
A:表示使用大写字母标号
i:表示使用小写罗马数字标号
I:表示大写罗马数字标号
B、无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于<ul>标签。每个列表项始于<li>标签。
属性:type:disc:默认实心圆
circle:空心圆
square:小方块
none:不显示
8、表格
表格标签:<table>
行标签:<tr>
列标签:<td>
表格属性:border:设置表格的边框
width:设置表格的宽度
height:设置表格的高度
colspan:列合并。左右
rowspan:行合并。上下
9、form表单
表单是由容器和控件组成的, 一个表单一般应该包含用户填写信息的输入框,提交按钮等,这些输入框、按钮叫做表单控件,表单就是容器,它能够容纳各种各样的控件。
属性:action:服务器地址
name:表单名称
method:提交方式(get、post)
控件:按钮:button
输入框:input
文本框:text
密码框:password
10、块元素、行内元素
H5之前,经常把元素按照块元素和内联元素区分。在H5中,元素不再按照这种方式来区分,而是按照内容模型来区分,分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型(embedded content)、交互型(interactive content)。元素不属于任何一类,被称为穿透,元素可能属于不止一个类别,称为混合。
11、H5新增标签
H5出现之前,一般采用div+CSS布局页面。这种布局方式不能清晰展示文档结构,也不利于搜索引擎爬虫对页面的爬取。
div:容器元素,
H5新标签:
<header></header>:头部
<nav></nav>:导航
<section></section>:定义文档中的节,章节、页眉、页脚等
<aside></aside>:侧边栏
<footer></footer>:脚部
<article></article>:代表一个独立的、完整的相关内容块。