HTML常用总结

最新推荐文章于 2023-01-04 20:53:55 发布

fakertop

最新推荐文章于 2023-01-04 20:53:55 发布

阅读量205

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/fakertop/article/details/110878932

版权

本文详细介绍了HTML的作用，包括网页制作、多媒体插入、表单交互等内容，并展示了关键标签如<head>、<body>、<form>和<input>的使用实例。还涵盖了HTML5的新特性，如视频、音频标签，以及div、nav、iframe等元素的应用。

摘要由CSDN通过智能技术生成

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>

网页上显示为：
在这里插入图片描述

fakertop

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML常用总结

HTML常用总结1什么是HTMLHTML是Hyper Text Markup Language的缩写，中文的意思是“超文本标记语言”，它是制作网页的标准语言。2.作用制作网页，控制网页和内容的显示插入图片、音乐、视频、动画等多媒体通过链接来检索信息使用表单获取用户的信息，实现交互介绍<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Do
复制链接

扫一扫