第一部分 HTML

发布于：2022-12-20 ⋅ 阅读:(360) ⋅ 点赞:(0)

前言

本文致力于让读者了解到HTML以及部分常用标签的介绍

一、HTML是什么？

HTML 全称为 HyperText Mark-up Language，翻译为超文本标签语言，标签也称作标记或者元素。 HTML 是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML文本是由 HTML 标签组成的描述性文本，HTML 文本可以说明文字、图形、动画、声音、表格、链接等。超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”和存在媒体文件（也就是超越了普通文本文件）。 HTML 的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。需要说明的是 HTML 不是编程语言，而是一种描述性的语言，用于描述超文本中内容的显示方式。比如，文字以什么颜色、大小显示，图片以什么尺寸、位置来显示等。这些描述都是用 HTML 标签来描述的。
HTML的特点：简单灵活、可扩展、平台无关性
软件的介绍：
webstorm
Vscode
Hbuilder 专业前端人员使用较多

二、常用标签的介绍

语法结构：
<标签名 属性 = “属性”></标签>
代码如下（示例）：

<a id=""></a>
双标签 有开始有结束
单标签
```html
<!DOCTYPE html> -------声明文档类型 
<html lang="en"> -------网页的开始 
<head> ---------网页的头部 
	<meta charset="UTF-8"> 
	<title></title> ----- 网页的标题 
</head> ------网页头部的结束 
<body> ---------网页的内容 
</body> 
</html> -------网页的结束

其中UTF-8是通配字符集，GB2312是中文字符集，GBK是一个汉字编码标准

2.1 常用标签

加粗-----b/strong
斜体------i/em

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8"> 
	<title>常用标签</title> 
</head> 
<body>
	<b>粗体</b> 
	<strong>也是粗体</strong> 
	<i>斜体</i> <em>也是斜体</em> 
	<u>下划线</u> <del>删除线</del> 
</body> 
</html>

换行标签 --------br
水平分割线----- hr

<hr width="800" size="10">这是一个分割线

属性 width--------长短 size------- 粗细
注释：
段落标签 -------p
上标-------sup
下标------sub
pre --------- 原样的输出想要输出的文本
span--------标准的行内标签，用来修饰文本
行内标签：只占据内容的部分，不会自动换行，除非一行铺满才会换下一行
hn(n的取值1-6)--------- 标题标签-----取值是1-6 字体大小 从大到小 加粗 换行
div ------- 盒子 ------自动换行
块标签（块级标签）：可以自动换行的 -------布局
align属性 ------ center left right
font -------- 字体 颜色 ------ color属性
颜色表示法：英文单词 red green blue
三原色法 #rrggbb 0-F #000000
eg:

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8"> 
	<title>段落标签</title> 
</head> 
<body>
	<p>这是一个段落</p> 
	<p align="center">这是一个段落</p> 
	<p align="right">这是一个段落</p> 
	<p align="left">这是一个段落</p> 
	<font color="#0000ff">这是一个font标签</font> 
</body> 
</html>

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8"> 
	<title>段落标签</title> 
</head>
<body>
	<p>这是一个段落</p> 
	<p align="center">这是一个段落</p> 
	<p align="right">这是一个段落</p> 
	<p align="left">这是一个段落</p> 
	<font color="#0000ff">这是一个font标签</font> 
	</body> </html> <!DOCTYPE html> <html lang="en"> 
<head>
	<meta charset="UTF-8"> 
	<title>常用标签</title> 
</head>
<body> 
	2<sub>x 
	2<sup>x
<br> 
	<pre>静夜思------李白 床前明月光， 疑是地上霜。 举头望明月， 低头思故乡。 
	</pre>
<br> 
	<span>这是行内标签</span>
	<h1 align="center">这是标题</h1> 
	<h2>这是标题</h2> 
	<h3>这是标题</h3> 
	<h4>这是标题</h4> 
	<h5>这是标题</h5> 
	<h6>这是标题</h6> 
	<div>这是一个div </div> 
	<div>这是一个div </div> 
	<div>这是一个div </div> 
</body>
</html>

2.2 表单标签

form
绝对路径： 从盘符开始查找，直到找到文件为止，路径+文件名
相对路径：当前文件和目标文件的相对路径
语法结构

<form action="" name="" method="">

action ------- 跳转的路径
name ------ 表单的名字
method------- 跳转的请求方式 post get 默认的是get请求
get请求：不安全
post请求： 相较于安全

<!DOCTYPE html>
<html lang="en"> 
<head>
	<meta charset="UTF-8"> 
	<title>表单标签</title> 
</head> 
<body>
	<form action="..\demo02.html" > 用户名：
	<input type="text" name="username"> 密码：
	<input type="password" name="password"> 
	<input type="submit"> 
	</form> 
</body> 
</html>

2.2.1 input标签

type属性的取值：
text ------- 文本框
password -------- 密码框
submit ---------- 提交按钮
radio ------- 单选按钮
checkbox --------- 多选按钮
submit ------ 提交按钮
reset ------ 复位按钮 重置按钮
button ------- 按钮
image ------- 图像按钮
file -------- 上传文件 文件域
hidden ------ 隐藏域 用户页面上是看不见的内容 作用 提交一些用户不可见的信息
email ------- 邮箱
扩展内容：
属性：
readonly -------- 字段只能读不能修改
disabled------- 规定input标签禁用 不可点击的
autofocus ------- 默认光标的位置
required ------提示Input不能为空白提交
color ------- 颜色
date -------- 日期
datetime-local ------ 日期+时间
time -------- 时间
url
range ------- 进度条

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8"> 
	<title>input标签</title> 
</head> 
<body>
	<h2>用户注册</h2> 
	<form>
	<p>用户名:
	<input type="text" value="zhangsan" name="username" readonly disabled>
	</p> 
	<p>密码:
	<input type="password" autofocus>
	</p> 
	<p>确认密码:
	<input type="password" required>
	</p> 
	<p> 请选择你的性别:
	<input type="radio" name="gender" checked>男 
	<input type="radio" name="gender">女 
	</p> 
	<p> 请选择你的爱好:
	<input type="checkbox">唱歌 
	<input type="checkbox">跳舞 
	<input type="checkbox">rap 
	<input type="checkbox">篮球 
	<input type="checkbox">鸡你太美
	</p> 
	<input type="submit" value="上传"> 
	<input type="reset" value="复位"> 
	<input type="button" value="按钮"> 
	<input type="image" src="按钮.jpg"> 
	<input type="file"> 
	<input type="hidden" > 请输入你的邮箱:
	<input type="email" > 
	</form> 
</body> 
</html>

2.2.2 select标签

下拉列表框
option ------ 子选项 （下拉列表框的选项） ----- 标签
multiple -------- 以列表的形式显示 ------ 属性
selected ------------ 默认选择某一个选项

请选择你所在的城市： 
<select multiple="multiple"> 
	<option>西安</option> 
	<option>重庆</option>
	<option>内江</option> 
	<option>江苏</option> 
	<option selected="selected">北京</option> 
	<option>上海</option> 
</select>

2.2.3 textarea标签

<p> 
	<textarea cols="50" rows="5">这个家伙很懒，什么都没有留下...... 
	</textarea> 
</p>

cols -------- 文本域的宽度
rows -------文本域的高度
补充：font ------- size (1-7 字大小由小到大)

	<font size="1">这是字体</font> 
	<font size="2">这是字体</font> 
	<font size="3">这是字体</font> 
	<font size="4">这是字体</font> 
	<font size="5">这是字体</font> 
	<font size="6">这是字体</font> 
	<font size="7">这是字体</font> 
	<font size="8">这是字体</font>

2.3 其他常用的属性

label 元素不会向用户呈现任何特殊效果
a标签 ------ 超链接标签
href属性 ------跳转的地址
拿body标签举例：

<body text="red" link="red" vlink="blue" alink="green" bgcolor="pink"> 
<p>还是还是很好</p> 
<a href="https://www.baidu.com/">点击我</a> 
</body>

Text ---------- 文本颜色
link -------- 超链接文本的颜色
vlink ------ 访问过后链接文本的颜色
Alink ----------- 激活链接时文本的颜色
颜色表示法：英文单词 三原色表示法
bgcolor ------------背景颜色
background ------ 背景图片 一般不会用图片做背景
背景颜色和背景图片同时存在的时候，要注意优先级

2.4 a标签

a标签 ------ 超链接标签
href属性 ------跳转的地址
target 属性
锚点：
根据某个链接跳转到对应的位置

<h1>XXXXX小说</h1> 
<a href="#01">
<h3>第一章</h3>
</a> 
<a href="#02">
<h3>第二章</h3>
</a>
<a href="#03">
<h3>第三章</h3>
</a> 
<a href="#04">
<h3>第四章</h3>
</a> 
<a href="#05">
<h3>第五章</h3>
</a> 
<a href="#06">
<h3>第六章</h3>
</a>
<p> 
<a href="#top">回到顶部</a>
</p>

2.5 img标签

图片的格式：JPG PNG GIF BMP SVG等
属性：
src ------ 图片的路径
alt -------- 如果图片是因为浏览器或者路径的问题加载不出来的时候，会显示图片的名字，alt的值
width 、height ------- 设置图片的宽度和高度 单位是像素px 10% 一定要遵循图片原本的高度和宽
度的比例
border ------- 边框 默认的取值是0 >=1整数 边框越来越粗
align --------- top bottom middle left right ----- 图片于文字的位置 默认的是bottom
title ------- 图片标题，鼠标悬停在图片上会出现属性的取值
位图：
usemap属性
shape ------------表示鼠标点击的形状 rect circle
coords----- 被点击大小的取值

2.6 多媒体标签

------ 引入的是音频
--------- 引入视频
controls ------ 表示的是视频或者音频播放器的组件 如果是音频（背景音乐不写这个属性）
autoplay -------- 自动播放

总结

本文大部分所说的标签都是与我们所学习的英语具有联系
将标签翻译基本便是作用，最后祝大家开心每一天。

                                                                                                                                            SmilingMrRui

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布