HTML5的基础知识
HTML标签的分类
-
块级元素:另起一行,单独一行。
如:h1-h6、p、div、ul、ol、dl
-
行内块元素:可以和其他行元素在同一行中,但是自己具有宽高的设置。
如:input、img、button
-
行内元素(内联元素):可以和其他行元素在同一行中,无法设置宽高,根据自己内容的大小确定宽高。只有左右的外边距。
如:span、a、strong
HTML的head标签
head标签的作用
head标签中主要配置浏览器的配置信息
head标签内的主要标签
1. title标签
网页标题标签:告诉浏览器使用什么标题显示网页
2. meta标签
//网页解析编码格式配置:告诉浏览器使用指定的编码格式解析文档
<meta charset="utf-8"/>
//网页关键字:提升网页在浏览器中的搜索概率
<meta name="keywords" content="HTML,CSS,JS"/>
//网页描述:提升网页在浏览器中的搜索概率
<meta name="description" content="本网页上是关于HTML的head标签学习的,特别棒,6666."/>
//网页作者:提升网页在浏览器中的搜索概率
<meta name="author" content="大鹏"/>
//网页自动跳转:5秒之后跳转到http://www.baidu.com
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>
HTML的body标签
一.文本标签
1. 标题标签:h1-h6
(1). 作用:
会将其中的数据加粗加黑显示,并且显示依次减弱,标题标签自带换行功能
(2). 属性:
属性名 | 属性值及含义 |
---|---|
align | center 居中 |
left 左对齐 | |
right 右对齐 |
2. 水平线标签:hr
(1). 作用:
会在页面中显示一条水平线,默认居中显示
(2). 属性:
属性名 | 属性值及含义 |
---|---|
width | 10px; 设置水平线的宽度为10px |
size | 10px; 设置水平线的高度为10px |
color | red;设置水平线的颜色为红色 |
3. 段落标签:p
(1). 作用:
会将一段数据作为整体进行显示,主要是进行css和js操作时比较方便,会自动换行
(2). 特点:
p的段间距比br的行间距要大
4. 换行符:br
作用:
告诉浏览器需要在此位置换行
5. 空格符: 
作用:
告诉浏览器在此位置增加空格
6. 权重标签:b、i、u、del
(1). 作用:
标签 | 作用 |
---|---|
b | 会将内容加黑显示 |
i | 会将内容斜体显示 |
u | 会将内容增加下划线 |
del | 增加中划线 |
(2). 特点:
权重标签不会自动换行,并且可以嵌套使用
!注意:
1.标签的属性是对标签的功能的进一步补充,可以由开发人员自由指定标签的属性值,来达到想要的显示效果。
2.像素单位占据的是电脑屏幕的大小,所以减小浏览器窗口的大小,内容会被遮挡。百分比占据的是浏览器窗口的大小,所以改变浏览器窗口的大小,内容也跟着变化,而不会被遮挡。
二. 列表标签
1. 无序列表:ul
(1). 使用方法:
在 ul 下嵌套 li 标签,在 li 标签中书写列表内容,一个 li 标签代表列表中的一行数据
<ul>
<li>我是一行数据</li>
</ul>
(2). 特点:
默认在数据前有一个黑圆圈符号
####2. 有序列表:ol
(1). 使用方法:
在 ol 下嵌套 li 标签,在 li 标签中书写列表内容,一个 li 标签代表列表中的一行数据
<ol>
<li>我也是一行数据</li>
</ol>
(2). 特点:
会自动的给列表进行顺序编码,格式从小到大并且是连续的
(3). 属性:
属性名 | 属性值及含义 |
---|---|
type | 1 阿拉伯数字顺序 |
a 小写字母顺序 | |
A 大写字母顺序 | |
I 罗马数字顺序 |
3. 自定义列表:dl
(1). 使用方法:
在 dl 下嵌套 dt 或 dd ,其中 dt 代表数据的标题, dd 代表数据的具体内容,一个 dd 表示一条数据
<dl>
<dt>我是数据的标题</dt>
<dd>我是一行数据</dd>
</dl>
(2). 特点:
dd 和 li 一样会有缩进,而 dt 会顶格显示。dd 和 dt 都没有格式。
三. 其他标签
1. 图片标签:img
属性:
属性名 | 属性值及含义 |
---|---|
src | 图片路径 。 1.本地资源路径:一般本地图片资源使用相对路径即可。2.网络资源路径:图片资源的URL地址。 |
width | 设置图片的宽度,如果是单独设置,则在图片保证不失真的情况下自动缩小或者放大,单位可以是px,也可以是百分比。 |
height | 设置图片的高度,如果是单独设置,则在图片保证不失真的情况下自动缩小或者放大,单位可以是px,也可以是百分比。 |
title | 图片标题,鼠标放在图片上的时候会显示。 |
alt | 图片加载失败后的提示语。 |
!注意:
相对路径:从当前文件出发查找另一个文件所经过的路径。
绝对路径:从根盘符触发所查找文件的路径。
2.超链接标签:a
(1). 属性:
属性名 | 属性值及含义 |
---|---|
href | 要跳转的网页资源路径。 |
target | 指明要跳转的网页资源的显示位置。 |
_self:在当前页中刷新显示 | |
_blank:在新的标签页中显示 | |
_top:在顶层页面中显示 | |
_parent:在父级页面中显示。 |
!注意:
超链接标签中一定要声明访问方式,访问方式可以是文字也可以是图片。
即一定要有内容,供用户点击。
(2). 锚点:
作用:
在一张网页中进行资源跳转
使用方法:
先使用超链接标签在指定的网页位置增加锚点,格式为:
<a name="锚点名"> </a>
使用a标签可以跳转指定的锚点,达到网页内部资源跳转的目的,格式为:
<a name="#锚点名"> 访问方式 </a>
3. 表格标签:table
(1). 使用方法:
-
table: 声明一个表格。
-
tr: 声明一行,设置行高及该行所有单元格的高度。
-
th: 声明一个单元格,表头格。默认居中加黑显示。
-
td: 声明一个单元格,默认居左显示原始数据。
<table>
<tr>
<th>第一行第一个单元格(表头格)</th>
</tr>
<tr>
<td>第二行第一个单元格</td>
</tr>
</table>
!注意 :
行高及该行所有单元格的高度。单元格的宽度及列宽。
(2). 属性:
属性名 | 属性值及含义 |
---|---|
border | 给表格添加边框 |
width | 设置表格的宽度 |
height | 设置表格的高度 |
cellpadding | 设置内容据边框的距离 |
cellspacing | 设置边框的大小 |
(3). 特点:
默认根据数据的多少进行表格的大小显示
(4). 单元格的合并:
-
第一步:首先确保表格是一个规整的表格
-
第二步:根据要合并的单元格,找到其所在的源码位置
-
第三步:
1.行合并: 在要合并的单元格中的第一个单元格上使用属性rowspan=“要合并的单元格的个数”,并删除其他要合并的单元格
2.列合并: 在要合并的单元格中的任意一个上使用属性colspan=“要合并的单元格的个数”,并删除其他要合并的单元格
4. 内嵌标签: iframe
(1). 属性:
属性名 | 属性值及含义 |
---|---|
src | 要显示的网页资源路径。默认当前页面打开及加载src指向的资源。 |
width | 设置显示区域的宽度 |
height | 设置显示区域的高度 |
name | 设置内嵌区域的名字,结合超链接标签的target属性使用 |
(2). 作用:
在当前网页中加载其他网页的资源,达到不同网页资源之间互不干扰,并能在同一个页面中展现给用户。
5. 框架标签:frameset
!注意: 一定要删除body标签
(1). 属性:
属性名 | 属性值及含义 |
---|---|
rows | 按照行进行切分页面 |
cols | 按照列进行切分页面 |
(2). 子标签:frame
作用:
进行切分区域的占位,一个frame可以单独加载网页资源
属性:
属性名 | 属性值及含义 |
---|---|
src | 资源路径 |
name | 区域名,结合超链接使用 |
(3). 代码示例:
<!-- 将整个页面切成 上边10% 中间剩余所有 下边10% -->
<frameset rows="10%,*,10%">
<frame src="frameset/top.html" />
<!-- 将中间部分切成 左边10% 和 右边剩余所有 -->
<frameset cols="10%,*">
<frame src="frameset/left.html" />
<frame src="frameset/right.html" name="_right"/>
</frameset>
<frame src="frameset/bottom.html" />
</frameset>
6. form表单标签
(1). 作用:
收集并提交用户数据给指定服务器
(2). 属性:
属性名 | 属性值及含义 |
---|---|
action | 收集的数据的提交地址,也就是URL |
method | 收集的数据的提交方式 |
get: 适合小量数据,表单数据以?隔开拼接在URL后面,不同的键值对使用&符号隔开,不安全 | |
post: 适合大量数据,安全,隐式提交 |
!注意:
-
表单数据的提交,要提交的表单项必须拥有name属性值,否则不会提交.提交的表单项数据为键值对,键为name属性的值,值为用户书写的数据
-
form标签会收集其标签内部的数据.
-
form表单的数据提交需要依赖于submit提交按钮.
(3). form表单域标签:input、select、textarea
作用:
给用户提供可以进行数据书写或者选择的标签
使用:
在点击数据提交时,form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式,提交给action属性所指明的提交地址.
1> 文本框 : input
属性名 | 属性值及含义 |
---|---|
type | text ;收集少量的文本数据,用户可见 |
password ;手机用户密码数据,用户不可见 | |
name | 数据提交的键,也会被js使用 |
value | 默认值 |
2> 单选框 : input
属性名 | 属性值及含义 |
---|---|
type | radio ;单选框 |
name | 数据提交的键,name属性值相同的单选框只能选择一项数据 |
value | 要提交的数据 |
checked | checked ;使用此属性的单选默认是选择状态 |
3> 多选框 : input
属性名 | 属性值及含义 |
---|---|
type | checkbox ;多选框 |
name | 数据提交的键,一个多选组需要使用相同的name属性值 |
value | 要提交的数据 |
checked | checked;使用此属性的多选框默认是选择状态 |
4> 普通按钮 : input
属性名 | 属性值及含义 |
---|---|
type | button;普通按钮 |
value | 要提交的数据 |
5> 隐藏标签 : input
属性名 | 属性值及含义 |
---|---|
type | hidden;隐藏 |
name | 数据提交的键名 |
value | 要提交的数据 |
6> 单选下拉框 : select
属性名 | 属性值及含义 |
---|---|
name | 数据提交的键名,必须声明 |
子标签 option | 一个option标签表示一个下拉选项 |
value: 要提交的数据 | |
selected: selected;使用此属性的下拉选项是默认值 |
7> 文本域 : textarea
属性名 | 属性值及含义 |
---|---|
name | 数据提交的键名,js和css也会使用 |
rows | 声明文本域的行数 |
cols | 声明文本域的列数 |
8> 提交按钮 : input
属性名 | 属性值及含义 |
---|---|
type | submit |
value | 按钮的名字 |
7. div标签
(1). 作用:
主要是用来进行网页布局的,会将其中的子元素内容作为一个独立的整体存在
(2). 特点:
默认宽度是页面的宽度,但是可以设置。
高度默认是没有的,但是可以设置。(可以被其他的块顶开)。
如果子元素设置了百分比的高或者宽,占据的是div的百分比,不是页面的。