前端HTML知识总结

m0_67751642

于 2022-07-25 16:54:03 发布

阅读量286

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/m0_67751642/article/details/125959740

版权

1 HTML前言

1.1HTML介绍

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是一种组织信息的，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

1.2 web标准

web标准有三层结构：分别是结构（html）,表现（css）和行为（Javascript）

其中结构类似人的身体，表现类似人的穿着，行为类似人的行为动作

理想状态下，他们三层相互独立，放在不同的文件中

2 HTML基本结构

2.1 结构

<html>

<head>
    <title>我的第一个网页</title>
</head>
<body>
    我的第一个网页
</body>
</html>

<head>......</head>网页头部：网页的标题与信息。

<body>......</body>：主体部分：网页的主体内容，这里的东西都会在浏览器上面去呈现出来。

2.2 语法

如上<body></body>等称之为标签，他们都有一个特点，都是成对出现的，而且第二个标签都有一个斜杠来表示闭合，否则都是开放标签，无法配对，从而引起页面的错乱，也有一些是单个出现的。

2.3转义符

	空格
<	<
>	>
¥	￥
"	"
©	©
®	®
±	±
&permil;	‰
÷	÷
......	.......

3 常用标签

3.1 常用的标签

< 标签名属性 = "属性值">

3.2 表单标签

<form 属性名称=“属性值”>

.......

</form>

表单标签一般会和input标签、textarea标签、select标签连用

例如：

<!DOCTYPE html>
<html>
<head>
<title>表单标签</title>
</head>
<body>
<form>
用户名：<input type="text"><br>
<input type="submit" value="按钮">
</form>
</body>
</html>

3.2.1 form的属性

文件路径例子：

<!DOCTYPE html>
<html>
<head>
<title>表单标签</title>
</head>
<body>
<form action="..\demo01\demo04.html">
用户名：<input type="text"><br>
<input type="submit" value="提交">
</form>
</body>
</html>

3.2.2 input标签

<input type="元素类型" name="元素名称" value="元素值" id="客户唯一标识"

input的属性	说明
checked	默认选择
readonly	字段只读不能修改
disabled	表示input禁用不可点击
autofocus	默认光标的位置
required	input不能为空白提交
size
maxlength

例如：

<!DOCTYPE html>
<html>
<head>
<title>type属性</title>
</head>
<body>
<div align="center">
<h1>用户注册</h1>
2.3.2 select标签
select标签表示下拉选择框
会和option标签连用 option表示的下拉选择框中的选项
属性：
value ---- 选项的值
name ---- 下拉框的名称
selected ----- 默认被选中的选项
multiple ----- 以列表的形式显示
<form>
用户名：<input type="text" name="username" id="username"
value="zhangsan" readonly="readonly" disabled="disabled"><br>
密码：<input type="password" name="password" autofocus><br>
确认密码：<input type="password" name="password" required><br>
请选择你的性别：<input type="radio" value="男" name="gender" checked>男
<input type="radio" value="女" name="gender">女<br>
<p>
<input type="checkbox" value="跳舞" name="dance">跳舞
<input type="checkbox" value="跳舞" name="dance">唱歌
<input type="checkbox" value="跳舞" name="dance">打篮球
<input type="checkbox" value="跳舞" name="dance">看书
<input type="checkbox" value="跳舞" name="dance">说唱
</p>
<input type="submit" value="提交">
<input type="reset" value="复位">
<input type="button" value="按钮"><br>
<!--<input type="image" src="..\images\按钮1.jpg">-->
<input type="file">
<input type="hidden">
请您输入您的邮箱：<input type="email">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="time">
<input type="range">
</form>
</div>
</body>
</html>

3.2.3select标签

select标签表示下拉选择框会和option标签连用 option表示的下拉选择框中的选项

select标签的属性	说明
value	选项的值
name	下拉框的名称
selected	默认被选中的选项
multiple	以列表的形式显示

例如：

<!DOCTYPE html>
<html>
<head>
<title>select</title>
</head>
<body>
<form>
请选择您所在的城市：
<select multiple="multiple">
<option value="北京">北京</option>
<option>上海</option>
2.3.3 textarea标签
语法结构：
cols ---- 多少列 表示的是文本域的宽度
rows --- 多少行 表示的文本域的高度
2.4 常用的一些属性
常用属性（以body标签为例）
Text --- 文本颜色
link ------ 超链接文本的颜色
vlink --- 访问过的超链接的文本颜色
Alink --- 激活超链接文本的颜色
bgcolor ---- 背景颜色
background --- 背景图片 一般不建议背景使用图片
背景图片和背景颜色同时存在时候要注意优先级的问题（自己下来看）
<option>广州</option>
<option selected="selected">重庆</option>
</select>
</form>
</body>
</html>

3.2.4 textarea标签

<textarea name=" " cols=" " rows=" ">内容</textarea>

cols-----多少列表示的是文本域的宽度

rows-----多少行表示的文本域的高度

例如：

<!DOCTYPE html>
<html>
<head>
<title>select</title>
</head>
<body>
<form>
<textarea cols="20" rows="5">阿福讲案例法案件发了软件上！！！！</textarea>
</form>
</body>
</html>

3.3常用的一些属性

<label>标签意义不太明确，一般会和input连用

常用属性（以body标签为例）

<a>-----超链接

例如：<a href="https://www.baidu.com/">点击我</a>

属性	说明
跑马灯（弹幕） marquee 标签	淘汰
direction	-表示滚动的方向，值可以是left，right，up，down，默认为left
behavior	表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（往返滚动）
loop	表示循环的次数，值是正整数，默认为无限循环
scrollamount	-表示运动速度，值是正整数，默认为6
scrolldelay	表示停顿时间，值是正整数，默认为0，单位似乎是毫秒
align	--表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle
bgcolor	表示运动区域的背景色，值是16进制的RGB颜色，默认为白色
height、width	表示运动区域的高度度和宽度，值是正整数（单位是像素）或百分数，默认 width=100% height为标签内元素的高度
hspace、vspace	-表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。
οnmοuseοver=this.stop() οnmοuseοut=this.start()	表示当鼠标移上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

3.4 a标签

超链接标签，语法：

<a href="链接地址">链接别名</a>

Target属性值

值	说明
_blank	在新窗口中打开被链接文档
_self（默认）	在相同的框架中打开被链接文档
_parent	在父框架集中打开被链接文档
_top	在整个窗口中打开被链接文档
framename	在指定的框架中打开被链接文档

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="https://www.baidu.com/">点击我</a>
<a href="https://www.baidu.com/" target="_blank">点击我1</a>
<a href="https://www.baidu.com/" target="_self">点击我2</a>
</body>
</html>

锚点

<body>
<h3>XXX小说</h3>
<a href="#01"><h5>第一章</h5></a>
<a href="#02"><h5>第二章</h5></a>
<a href="#03"><h5>第三章</h5></a>
<a href="#04"><h5>第四章</h5></a>
<a href="#05"><h5>第五章</h5></a>
<a href="#06"><h5>第六章</h5></a>
<p>
<a id=“01”>第一章</a>
.........
</p>
</body>

回到顶部：

<body>
<a id="top"><h3>XXX小说</h3></a>
<a href="#01"><h5>第一章</h5></a>
<a href="#02"><h5>第二章</h5></a>
2.6 img标签
图片格式：GIF JPG PNG BMP
2.6.1 常见的属性
src属性 ---- 指代图片的路径（相对路径和绝对路径）
alt属性 ---- 表示的图像的代替文本（路径错误或者图片损坏或者浏览器的问题显示不出图片的时候）
width 和 height ----- 控制图片的大小 单位可以使用px %
border -------- 边框 默认边框的取值0 没有边框 >=1 数字越大边框就越大 （大小指的是边框的粗细）
align ----位置 指的是文字和图片的位置 取值 center left right bottom middle top,默认的下对齐
title ---- 图片标题 ，用来显示描述图片的文字，鼠标悬停在图片上的时候会出现的文字
注意：如果没有设置Alt属性的时候，title就是Alt的取值
<a href="#03"><h5>第三章</h5></a>
<a href="#04"><h5>第四章</h5></a>
<a href="#05"><h5>第五章</h5></a>
<a href="#06"><h5>第六章</h5></a>
<p>
<a id=“01”>第一章</a>
.........
</p>
<a href="#top">回到顶部</a>
</body>

3.5 img标签

插入图片，图片格式:GIF JPG PNG BMP

3.5.1 img常见属性

格式：<img src="image/图片1.png" alt="哆啦">

img属性	说明
src	指代图片的路径（相对路径和绝对路径）
alt	表示的图像的代替文本（路径错误或者图片损坏或者浏览器的问题显示不出图片的时候）
width 和 height	控制图片的大小单位可以使用px %
border	边框默认边框的取值0 没有边框 >=1 数字越大边框就越大（大小指的是边框的粗细）
align	-位置指的是文字和图片的位置取值 center left right bottom middle top,默认的下对齐
title	图片标题，用来显示描述图片的文字，鼠标悬停在图片上的时候会出现的文字

注意：如果没有设置Alt属性的时候，title就是Alt的取值

<body>
哆啦A梦<img src="images/图片1.png" alt="哆啦" width="200px" height="150px"
border="1"><br>
哆啦A梦居中<img src="images/图片1.png" alt="哆啦" width="200px" height="150px"
align="center"><br>
哆啦A梦居左<img src="images/图片1.png" alt="哆啦" width="200px" height="150px"
align="left"><br>
哆啦A梦居中<img src="images/图片1.png" alt="哆啦" width="200px" height="150px"
align="middle"><br>
哆啦A梦下对齐<img src="images/图片1.png" alt="哆啦" width="200px" height="150px"
align="bottom"><br>
哆啦A梦上对齐<img src="images/图片1.png" alt="哆啦" width="200px" height="150px"
align="top"><br>
哆啦A梦居右<img src="images/图片1.png" alt="哆啦" width="200px" height="150px"
align="right"><br>
</body>

3.5.2 位图

usemap属性

map标签和area标签连用

shape属性	鼠标点击的形状
coords属性	点击形状的大小
href属性	表示跳转的路径

例如：

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="images/猫咪.jpg" usemap="#image">
<map name="image">
<area shape="circle" coords="154,132,50" href="demo01.html"></area>
</map>
</body>
</html>

3.5.3多媒体标签

视频标签 video 音频标签 audio

src	表示音频和视频的文件位置（相对路径或者绝对路径）
controls	表示的是显示播放器的组件
autoplay	自动播放

<!DOCTYPE html>
<html>
<head>
<title>音频和视频</title>
</head>
<body>
<audio src="D:\重大城科\前端0601\第四天\video\汪苏泷 - 小星星.mp3" controls
autoplay></audio>
<video src="D:\重大城科\前端0601\第四天\video\花园宝宝2.mp4" controls autoplay>
</video>
</body>
</html>

3.6表格布局

表格的作用：用来描述具有二维结构的数据

包括的标签有：table thead tbody tfoot tr td

table标签	用于定义一个表格
thead	定义表头
tr	行
td	列单元格必须放在tr
tbody	主干
tfoot	尾

<!DOCTYPE html>
<html>
table标签 ------- 用于定义一个表格
thead ---- 定义表头
tr ---- 行
td ---- 列 单元格 必须放在tr
tbody --- 主干
tfoot----- 尾
2.7.1 表格的属性
2.7.1.1 表格的边框
border 属性 ------ 边框 取值是数字 单位是像素 当取值为0的时候表示没有边框（默认）大于0的时候表
格是有边框的，数值一定要为整数
<head>
<title>表格标签</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<td>this text is in the thead</td>
</tr>
</thead>
<tbody>
<tr>
<td>this text is in the tbody</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>this text is in the tfoot</td>
</tr>
</tfoot>
</table>
</body>
</html>

3.6.1 表格的属性

表格	属性	说明
表格的边框	border 属性	- 边框取值是数字单位是像素当取值为0的时候表示没有边框（默认）大于0的时候表格是有边框的，数值一定要为整数
表格的宽和高	width	表示的是表格宽度（单位是像素，百分）
表格的宽和高	height	表示表格高度（单位是像素，百分）
表格的对齐	align	表示的是表格对齐方式 left center right,默认是lef
表格的背景	bgcolor	表示的是表格的背景颜色
	background	表示背景图像
	注意：表格的tr和td也是可以设置宽度和高度已经背景颜色
表格的间距和边距（默认都为2px）	cellpadding	表示表格边距（单元格内元素距离单元格边缘的距离）
表格的间距和边距（默认都为2px）	cellspacing	表示表格间距（单元格与单元格之间的距离）
表格合并	rowspan="n"	- n是一个整数，表示的是单元格在垂直方向跨的行数单元格跨列-----合并的是列
表格合并	colspan="n"	n是一个整数，表示的是单元格在水平方向跨的列数

设置表格高度和宽度：

<!DOCTYPE html>
<html>
<head>
<title>表格标签</title>
</head>
<body>
<table border="1" width="200" height="100">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

表格的对齐例子

<!DOCTYPE html>
<html>
<head>
<title>表格标签</title>
</head>
<body>
<table border="1" width="200" height="100" align="right">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

表格背景

<!DOCTYPE html>
<html>
<head>
<title>表格标签</title>
</head>
<body>
<table border="1" width="200" height="100" align="center" background =
"bg.jpg" bgcolor="#cccccc">
<tr>
<td >&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

3.6.2 表格的嵌套

表格嵌套指的是一个表格放在另一个表格单元格中。可以用来布局,如下

<!DOCTYPE html>
<html>
<head>
<title>表格标签</title>
</head>
<body>
<table width="300" border="1">
<tr>
<td>&nbsp;</td>
<td>
<table width="100" border="1" align="center">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
2.7.3 表格合并
单元格跨行---- 合并的是行
rowspan="n" ----- n是一个整数，表示的是单元格在垂直方向跨的行数
单元格跨列-----合并的是列
</table>
</td>
</tr>
</table>
</body>
</html>

3.7 列表标签

主要有三种----- 有序、无序、数据列表

列表标签	属性	说明
有序列表 ol	type属性	表示设置序号的种类，1、A、a、I、i,默认取值是1
	start 属性	控制开始序号的位置
	reversed	降序（反序）
无序列表 ul	disc（默认）	实心圆
	clrcle	空心圆
	square	实心方块

3.8 多窗口框架

一个页面可以显示多个窗口 ----- frameset

4.0版本多窗口 5.0版本中内嵌窗口

注意：如果要使用frameset标签，就不能和body标签连用

属性	值	说明
cols	plxels % *	定义框架集中列的数目和尺寸
rows	定义框架集中行的数目和尺寸

属性

值

说明

cols

plxels

定义框架集中列的数目和尺寸

rows

定义框架集中行的数目和尺寸

例如

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<frameset rows="15%,*,15%">
<frame src="demo01.html"></frame>
<frameset cols="25%,*">
<frame src="demo02.html"></frame>
<frame src="demo03.html"></frame>
</frameset>
<frame src="demo04.html"></frame>
</frameset>
</html>

m0_67751642

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端HTML知识总结

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。超文本是一种组织信息的，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。检索信息提供方便。...
复制链接

扫一扫