超文本标记语言HTML(Hyper Text Markup Language)
- 超文本: 不仅可以加入文字的文本文件,还可以加入链接、图片、声音、动画、影视等内容
- 标记语言:是在纯文本文件里面包含了HTML指令代码。这些指令代码并不是一种程序语言,它只是一种排版网页中资料显示位置的标记结构语言。
如何创建HTML文件
- 文档的命名规则
- 不允许使用特殊字符
- 可以以中文命名,但是不推荐使用中文。
- HTML文件名推荐使用小写。girl.html
- 注意:如果创建完HTML文件后依然是文本文件格式,那么需要将系统里隐藏已知文件扩展名勾选掉
HTML标签相关
1. HTML标签
标签是HTML的最基本单位,也是最重要的组成部分,通常使用两个角括号括起来的"<"和“>”.
-
标签有两种形式:
-
成对标签(双标签)
<p>内容</p>
-
不成对标签(单标签)
<hr />
-
2. HTML标签大小写问题
- 标签大小写无关,不区分大小写,与表示意思一样。HTML标签推荐使用小写
3. HTML标签属性
- HTML属性一般都出现在HTML标签中,是HTML标签的一部分。
- 标签可以有属性,包含了额外的信息,属性的值一定要在双引号中。而且标签还可以存在多个属性。
- 一般属性由属性名和属性值成对出现:
- 语法:<标签名 属性名1=“属性值” 属性名2=“属性值”></标签名>
4. HTML颜色值得设置
- 浏览器支持颜色名称集合,颜色值是一个关键字或者一个RGB格式的数字,在网页中都用的很多。
- 使用英文单词作为颜色值:
- red 红色 | green 绿色 | blue 蓝色 | pink | purple
- 六位的十六进制颜色值: R G B
- #00f # 00 00 ff
- 前两位表示红色,中间两位表示绿色,最后两位表示蓝色
5.HTML注释
-
注释的好处
-
方便查找、比对、方便其他程序员快速了解你的代码,方便以后自己对自己代码的理解和修改。
-
注释的内容不会被浏览器解析出来
-
格式:
<!--书写注释的内容-->
-
6.HTML代码格式
- 任何回车或者空格在源代码中都不起作用,所以在编写HTML代码时,都可以使用回车或者空格进行代码排版,这样可以使代码清晰偏于团队合作、必须保持严格的缩进规则,缩进以tab键为准
7. HTML实体字符
空格
< <
> >
© 版权符号
二. HTML主体结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
</head>
<body></body>
</html>
- 最顶部声明
- 声明是文档的第一成份,位于文档的最顶部。
- 该白浅告诉浏览器所使用的HTML规范。(H5的规范,所有浏览器都兼容的)
- 以开始,以结束,中间包含头部标签及主体标签
三. head标签中常用的标签
<head lang="en">
<!--
lang是language的意思,lang="en" 属性对页面声明主要语言,en表示英文,zh-cn表示中文。
搜索引擎不会判断该站点是中文还是英文,它让搜索引擎知道你得站点是中文站,这些都是HTML规范,越规范,越容易被收录
-->
<title></title> 设置网页标题
<meta /> 是对页面的描述
<meta charset="utf-8" /> 设置页面字符集
<!--
rel = 表示文档与被连接文档之间的关系
type = 被连接文档的类型
href = "被连接文档的地址"
-->
<link rel="stylesheet" type="text/css" href="css.css"/> 加载CSS文件
<style></style> 加载CSS样式
</head>
四. HTML常用标签
1. 文本与文本格式标签
<p></p>段落标签 <!--特点:与上行文本和下行文本之间间隔一行-->
<!--
align 控制内容方向。取值:left 默认居左、center 居中、right 居右
title 设置标题
-->
<b></b>加粗标签
<!--
物理标签:b代表的意思bold 加粗的意思 html
-->
<strong></strong> 强调某段文本效果是加粗
<!--
逻辑标记: 强调的意思 xhtml
-->
<i></i> 定义斜体
<em></em> 强调某段文本 效果斜体
<br/> 换行标签
<hr/> 水平线标签
<!--
属性:align:水平对齐方式,默认是居中。
width:水平线的长度,百分比及像素都可以。
size:水平线的高度。
color:水平线的颜色
-->
<u></u> 下划线标签
<hn></hn> <h1>~<h6> 标签定义标题,H1字体最大,H5字体最小。
<!--h族标签只有h1到h6标签。没有H7标签-->
<pre></pre>原格式输出标签 注意:如果编辑器中显示的效果和浏览器中的效果不一样,需要用记事本打开代码重新调试
2. 语义化标签
<div></div>无意义的块级元素
<span></span> 无意义的行内元素
<header></header>定义网页头部
<footer></footer>定义网页底部
<nav></nav>定义网页导航
<aside></aside>定义网页侧边栏
<section></section>定义一个区块
<article></article>定义独立内容
<address></address>定义地址
3.列表标签
<ul></ul> 定义无序列表
<!--
type 规定在列表中使用的标记类型
disc 默认实心圆
circle 空心圆
none 符号不显示
square 小方块
-->
<ol></ol> 定义有序列表
<!--
reversed 倒叙
start 规定有序列表的起始值
type 规定在列表中使用的标记类型
1 表示项目用数字标号(1,2,3……)
a 表示项目用小写字母标号
A 表示项目用大写字母标号
i 表示项目用小写罗马数字标号
I 表示项目用大写的罗马数字标号
-->
<li></li> 用于ul或者ol中定义列表项
<dl></dl> 定义一个定义列表
<dt></dt>标签定义一个定义列表中的一个项目以及dialog中角色
<dd></dd>标签定义一个定义列表中对项目的描述
4. 超链接标签
<a></a> 定义超链接。
常用属性:
target: 窗口的打开方式
取值:_blank 在新窗口中打开被链接的文档。
_self默认。在当前窗口中打开链接的文档。
_top 在框架顶部打开被链接的文档(在整个窗口中打开被链接的文档)
href: 用于从一个页面链接到另一个页面。记录需要跳转的地址
对于路径而言:
相对路径
相对于自己来进行查找,在跳转时不需要添加协议。
./ 当前目录
../ 上一级目录
绝对路径
绝对路径要从根开始进行查找,需要添加对应的协议。
使用<a></a>标签来定义锚点。作用,快速找到页面中需要的位置。
锚点的实现:
1.需要再快读找到的位置定义一个a标签,a标签中添加id属性,属性名自定义。
2.在要跳转的a标签href属性的最后添加#后面跟锚点的名称来实现快速定位。
5. 多媒体标签
<img /> 标签定义图像
属性:
src= 图像路径
注意:如果图片的路径是绝对路径,那么必须加上协议。
width 设置图像宽度
height 设置图像高度
注意:图像的宽度和高度如何同时设置,那么图片有可能会变形,如果宽度和高度仅只设置其中的一个,图片会等比缩放。
alt:当图片显示不出来的时候出现的提示性文字。
title:当鼠标放上去的时候出现的提示性文字
6. 表格标签
<table></table> 定义表格
border:设置表格的边框
align:设置表格相对于浏览器的水平位置 left center right
width: 设置表格的宽度
height:设置表格的高度
background:设置表格的背景图片
bgcolor:设置表格的背景颜色
bordercolor:设置表格边框颜色
cellspacing: 单元格之间的间距
cellpadding:单元格内容与单元格边界的间距
<caption></caption> 定义表格的标题
<tr></tr>定义表格中的一行
height:设置行高
align:行内容的水平对齐方式 取值:left center right
valign:行内容的垂直对齐方式 取值:top middle bottom
bgcolor:行的背景颜色
<td></td>定义表格中的一个单元格
width / height 设置宽高
align 设置水平对齐方式 取值 left center right
valign 设置垂直对齐方式 取值 top middle bottom
bgcolor 单元格的背景色
colspan 设置单元格跨列
rowspan 设置单元格跨行
<th></th> 定义表格内的表头单元格
<thead></thead> 设置表格的头部
<tbody></tbody> 设置表格的主体内容
<tfoot></tfoot> 设置表格的低部
五. HTML表单相关标签及属性
1.表单相关标签
<form></form> 用于为用户输入创建HTML表单
<!--必须属性-->
action -- 浏览者输入数据被传送到的地方,比如一个PHP页面
method -- 数据传送的方式
get -- 此方式传递数据量少,但是传递的信息显示在网址上。
post -- 此方式传递信息多,而且不会把传递的信息显示在网址上。
<input />为用户定义需要使用的表单项
<!--必须属性-->
name -- 定义此表单项的名称。
value -- 定义此表单项的默认值。
type -- 代表一个输入域的显示方式(分为:输入型、选择型、点击型)
type的取值:
type = "text" 普通文本域
type = "password" 密码域
type = "radio" 单选 注意:如果要实现单选name属性名称必须一致才会产生排斥效果
type = "checkbox" 复选框 多选框 注意:name名称后面必须加中括号 比如 name="hobby[]"代表一组
type = "file" 文件选取表单
type = "reset" 重置按钮 清空表单信息还原默认状态
type = "hidden" 代表隐藏域,可以传送一些隐藏的信息到服务器中
type = "image" 使用图片来显示提交按钮,使用src属性指定图片的位置。类似于img标签。
type = "button" 普通按钮(给JS使用)
type = "submit" 提交按钮,把信息传送到服务器,可以使用value属性来显示提交按钮上的文字信息
form把表单相关标签
<button></button> 提交按钮(可以实现提交)
<button type="submit"></button> 提交按钮
<button type="button"></button>没有意义的按钮
<label></label> 为input元素定义标注(绑定元素)
实现绑定元素
1:直接将内容和input标签包含在一块。
2.在label标签中定义一个for属性,在input标签定义一个id属性,两个属性值相同即可实现关联。
<textarea></textarea> 多行文本输入域
name 为多行文本输入域定义名称
rows 定义多行文本输入域默认显示的行数
cols 定义多行文本输入域默认显示的列数
注意:textarea没有value属性,获取的只就是两个标签中间的内容。
<select></select> 定义下拉列表
name 为该下拉列表定义名称
<option></option> 为下拉列表定义列表项
value 为该列表项定义默认值
注意:如果列表项中没有设置value属性,那么点击提交时,将获取option标签中间的内容。如果设置了value属性,将获取value属性设置的值。
<optgroup></optgroup> 为下拉列表定义分组
label 定义分组的名称。
<fieldset></fieldset> 将表单内的相关元素进行分组
<legend></legend>为fieldset定义分组的标题
<datalist></datalist> 定义可选数列表
将可选数据列表与普通文本域进行关联
1.在datalist标签中定义id属性
2.在文本域中定义list属性,属性值指定id的属性值即可实现关联。
注意:列表项依然使用<option></option>来定义。
表单分离技术
为了排版方便,在H5中表单标签允许脱离form表单之外,但是要实现提交需要做2件事。
1.为form标签添加id属性,属性值自定义。
2.为需要提交的元素添加form属性,属性值指定id的属性值即可实现提交。
新增的表单类型 type值等于:
date 日期选取表单
time 时间选取表单
week 周选取表单
month 月份选取表单
datetime-local 完整日期
email 设定当前表单的验证方式是email邮件验证
url 设定当前表单的验证方式是url方式
number 设定当前表单的验证方式是数值验证 可以使用min 和 max
range 设定当前表单的验证方式必须在指定的范围内 需要配合属性 min max
search 设定当前表单为搜索表单
color 设定表单为颜色选取
tel 设定标签为电话号表单
2.表单相关属性
1. checked 实现单选框和复选框的默认选种
2. selected 为下拉列表定义默认选中项 用于option标签中。
3. min 用于设定表单的最小值 (适用于数值类型的表单 number range)
4. max 用于设定表单的最大值 (适用于数值类型的表单 number range)
5. readonly 只读 输入域可以选择,但是无法修改
6. disabled 禁用 输入域无法获取焦点,无法选择,以灰色显示
7. autofocus 自动获取焦点属性
8. placeholder 表单信息提示,用于代替表单中显示某人之需要使用value的情况,placeholder取代了value属性的显示提示信息的功能,并且不会随着提交而提交数据。
9. required 用于强制用户必须为该表单赋值,否则提示信息。
10.multiple 设定当前表单允许同时选中多个。适用于input[type=file]
注意:如果实现多选,那么必须在name属性名后加[] 代表是一组。
11.pattern 用于自定义验证规则(需要配合正则的语法)
[a-z] 表示只允许出现一个字符并且该字符必须在a-z之间任意一个(区分大小写)
12.step 设定跳过的数值或者设定2个数值之间的间隔(数值表单中)
13.novalidate 取消表单验证 适用于form标签中 取消所有表单项的验证
14.formaction 用于在提交按钮中修改当前表单的提交页面
15.formmethod 用于在提交按钮中修改当前表单的提交方式
16.formenctype 用于在提交按钮中修改当前表单的提交数据编码类型(一般不用,文件上传时使用)
17.formnovalidate 用于在提交按钮中取消当前表单验证
18.tabindex tab键切换索引属性