HTML常用总结
1什么是HTML
HTML是Hyper Text Markup Language的缩写,中文的意思是“超文本标记语言”,它是制作网页的标准语言。
2.作用
制作网页,控制网页和内容的显示
插入图片、音乐、视频、动画等多媒体
通过链接来检索信息
使用表单获取用户的信息,实现交互
介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
首先<!DOCTYPE html>
是文档类型
<html lang="en">是规定语言类型
> en是英文,zh-cn是中文
Head 表示html的头的部分
Body 表示html的正文的部分
UTF-8 ----Unicode码 全世界的通用码
Meta —metadata 源数据
Title 表示文档的标题
标题
标题大小用hn改变,n的取值范围是1~6 表示为h1~h6,n的值越大字体就越小。
表单
form一般不会单独使用,会和input标签一起用
input元素有许多形态,例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
</body>
</html>
网页上显示为
Text是文本框、Password是密码框,应用:
<form action="action_page.php">
用户名:<br>
<input type="text" name="" value="">
<br>
密码:<br>
<input type="password" name="" value="">
<br><br>
</form>
网页上显示为
radio是单选按钮,只能选择其中的一个。应用:
<form>
<input type="radio" name="sex" value="男" checked>男
<br>
<input type="radio" name="sex" value="女">女
</form>
网页上显示为
submi为提交按钮,应用:
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="firstname">
<br>
Last name:<br>
<input type="text" name="lastname" value="lastname">
<br><br>
<input type="submit" value="提交">
</form>
网页上显示为
checkbox为多选框,应用和单选框一样,只是能选择多个目标。
reset是重置按钮,应用<input type="reset" value="重置">
,
网页上显示为
action属性:是定义提交时跳转的地址或网页,应用:<form action="地址">
method属性:定义提交表单时所用的HTTP方法(get、post),GET请求为默认方式,应用:<form action="地址" method="GET或post">
其中GET请求 不安全 会把name属性的值暴露在地址栏上,地址栏默认大小为64kb。
Post请求 安全 不会再地址栏上暴露name属性的值。
name属性:如果要正确地被提交,每个输入字段必须设置一个 name 属性。应用:<input type="text" name="" value="">
Select 标签是选择框,多选要使用multiple属性,具体应用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</body>
</html>
网页上显示为
文本域:textarea rows 表示行数 cols 表示列数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<textarea rows="10" cols="40">
</textarea>
</body>
</html>
网页上显示为
target属性:
还有其他标签:
Align=“center” 表示居中 left 居左 right 居右
div标签 网页的分区的显示
p标签标示对行的控制
body标签中
bgcolor是背景颜色
A标签 可以进行页面跳转 默认为get请求
Href=”url”其中url是链接<a href="url"></a>
Img 标签: 表示页面上的图片
其中<img src="" alt="">
src后面加的是图片的位置,alt表示图像的替代文本,其中还可以添加控制图片的宽width和高height。
map和area标签
<img src="" alt="" usemap="#one">
<map id="one" name="one">
<area
shape="circle"
coords=""
href="https://www.baidu.com/" >
</area>
</map>
map引用图片,area能使图片变成链接,还可以控制图片中链接图片的大小、形状,例如上面图片的shape和coords,shape是控制形状,coords是控制位置,href是链接的地址。
表格布局
首先我们要了解表格布局的标签:
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
Table ----表格
Tr ----表行
Th ----表头
Td -----表元
其中table里可以加入控制表格大小的宽、高,tr、td中也可以加入类似的元素,在body里可以加入多个表格,在table中可以加入多个tr,当然tr中也可以加入多个td,th表头可以使字体变粗。
列表
列表分文三种:
无序列表:
<ul>
<li></li>
</ul>
有序列表:
<ol>
<li></li>
</ol>
定义列表:
<dl>
<dt></dt>
<dd></dd>
</dl>
其中有序列表里面reverse表示反转,能让列表里面的排序反过来,type类型中可以使用数字、字母以及罗马数字。
定义列表里面<dt>
标签定义了定义列表中的项目,<dd>
用通俗的话来说就是解释项目。
字体的控制跑马灯
其实字体的控制跑马灯在html中不常用,这是一种像直播弹幕一样的效果。
下面是具体用法:
<font> size color
<b> 加粗 <strong>
<i> 斜体
<sub>
<sup>
<marquee>这波操作666!</marquee>
<marquee behavior="alternate">我来回滚动</marquee>
<marquee behavior="scroll">我单方向循环滚动</marquee>
<marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动</marquee>
<marquee behavior="slide">我只滚动一次</marquee>
<marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee>
<marquee scrollamount="100">我速度很快.</marquee>
<marquee scrollamount="50">我慢了些。</marquee>
<marquee scrolldelay="30">我小步前进。</marquee>
<marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>
html5中的标签、音频和视频
视频,具体用法:<video src="" controls="controls"></video>
音频具体用法:<audio src="" controls="controls"></audio>
其中的controls是添加控制按钮和调节声音大小的音频条。
常用的但是意义不明确的标签
在html5中给<div>
标签做了很多的改进
<nav>
导航,在css里的导航部分会使用到
<slide>
侧栏,<header>
头部,<footer>
底部,这些是定义块状元素的位置。
增加代码的可读性
<label>
标记标签 通常和表单中的文本框
<span>
用于修饰文本
多窗口框架
多窗口框架可以显示多个窗口,4.0 版本<frameset>
多窗口
5.0版本中<iframe>
内嵌窗口
具体引用如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<frameset rows="15%,*,15%">
<frame src=""></frame>
<frameset cols="25%,*">
<frame src=""></frame>
<frame src=""></frame>
</frameset>
<frame src=""></frame>
</frameset>
</html>
网页上显示为: