【前端三剑客之HTML】详解HTML

1. HTML(超文本标记语言)

HTML意为超文本标记语言，其可以通过标签把其他网页/图片/视频等资源引入到当前网页中，让网页最终呈现出来的效果超越了文本.
HTML是一种标记语言，其是由一系列标签组成的. 而且每个标签都有特定的含义和确定的页面显示效果.

2. 特点

(1). 双标签

标签是通过一组尖括号+标签名的方式来定义的.

<title>及你太美</title>
<!-->
<title>称为开始标签
</title>称为结束标签, 二者共同构成了完整的标签.
其之间的部分叫标签体
<-->

(2). 单标签

<meta charset="UTF-8"/>
<!-->
此标签为单标签, 只有一对尖括号
<-->

(3). 属性

<meta charset="UTF-8"/>
<!-->
属性 : charset="UTF-8"
属性名 : charset
属性值 : "UTF-8"
<-->

(4). 文本

双标签中间的文字，包含空格换行的结构.

(5). 元素

经过浏览器解析后，每个完整的标签可以称之为一个元素.

3. HTML基本结构

(1). 文档声明

HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息以及HTML文档遵循的语法规则.

<!DOCTYPE html>

(2). 根标签

<html></html>是整个文档的根标签，所有其他标签都必须放在根标签里面.

<html></html>

(3). 头部元素

<head></head>标签是<html></html>第一个一级子标签，用来定义文档的头部，其他头部元都放在head标签里，头部元素包括title，script，style，link，meta标签等.

很重要但不显示在网页页面的标签都定义在该标签内.

<head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width", initial-scale="1.0"/><title>及你太美</title>
</head>

(4). 主体内容

<body></body>标签是<html></html>第二个一级子标签，用来标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内.

(5). 注释

<!-->
注释信息
<-->

4. 常见标签

(1). 标题标签

标题标签一般用于在页面上定义一些标题性内容，有h1到h6级标题.h1标题字体最大.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>一级大标题</h1><h2>二级大标题</h2><h6>六级大标题</h6>
</body>
</html>

(2). 段落标题与换行标题

如果只是简单的手动换行，浏览器解析时是不会有换行效果的.此时换行应用换行标签br.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 段落标签 --><p>-------这是一个段落-------</p><!-- 换行标签 --><br/><!-- 有分隔符的换行标签 --><hr/>
</body>
</html>

(3). 列表标签

列表标签常用的有有序列表与无序列表. 列表标签内可嵌套列表标签.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 有序列表  orderlist --><Ol><li>JAVA</li><li>C#</li><li>C++</li><li>Python</li></Ol><!-- 无序列表  unorderlist --><ul><li>JAVA</li><li>C#</li><li>C++</li><li>Python</li></ul></body>
</html>

(4). 超链接标签

点击后跳转链接标签.

href属性用于定义链接地址.链接地址可使用绝对路径. 也可以使用相对路径.相对路径以当前文件所在路径为出发点，./开头表示当前路径。 ../开头表示上一层路径.
target属性用于定义链接打开的方式.
_blank在新窗口打开目标资源.
_self在当前窗口打开目标资源.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><!-- 链接该html文件, 也可以链接其他网站 --><a href="http://atguigu.com" target="_blank">是兄弟就来点我</a><hr/><a href="http://atguigu.com" target="_self">兄弟来砍我</a>
</body>
</html>

(5). 多媒体标签

img图片标签，用于在页面上引入图片.

src用于定义图片的链接.
title属性用于定义鼠标悬停时显示的文字.
alt属性用于定义图片加载失败时提示的文字.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="test01HTML\img\屏幕截图 2024-05-23 210305.png" title="海绵宝宝" alt="海绵宝宝死了" />
</body>
</html>

(6). 表格标签

table标签表示表格.
thead标签表示表头.可以省略不写.
tbody标签表示表体，可以省略不写.
tfoot标签表示表尾，可省略不写.
tr表示一行.
td标签代表行内一格.
th标签自带加粗和居中效果的td.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="4px" style="width: 400px; margin: 2px auto;"><tr><th>名字</th><th>年龄</th><th>性别</th><th>游戏</th></tr><tr><th>红夫人</th><th>23</th><th>女</th><th rowspan="3">第五人格</th></tr><tr><th>杰克</th><th>34</th><th>男</th></tr><tr><th>鹿头</th><th>55</th><th>男</th></tr></table>
</body>
</html>

还可以使用td的rowspan属性实现上下跨行.
可以使用td的colspan属性实现左右跨列.

(7). 表单标签

表单标签，可以让用户在界面上输入各种信息并提交的一种标签，是向服务器发送数据的主要方式之一.

form标签，表单标签，其内部用于定义可以让用户输入信息的表单项标签.
action属性 : 用于定义信息提交的服务器地址.
method属性 : 用于定义信息的提交方式.get方式提交，数据会缀到URL后，以?作为参数开始的标志.多个参数用&隔开.post方式提交.数据会通过请求体发送，不会缀到URL后.
input属性 : 主要的表单项标签. 用于定义提交的参数名.
type属性 : 用于定义表单项类型.text文本框.password密码框.submit提交框.reset重置框.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="http://www.atguigu.com" method="get">用户名<input type="text" name="usename"/><br />密码<input type="password" name="password" /><br /><input type="submit" value="登录" /><input type="reset" value="重置" /></form>
</body>
</html>

(8). 常见表单项标签

单行文本框text.密码框password.

单选框radio.name属性相同的radio为一组，组内互斥.设置checked＝"checked"属性设置默认被选中的radio.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="http://www.atguigu.com" method="get">用户名<input type="text" name="usename"/><br />密码<input type="password" name="password" /><br /><input type="submit" value="登录" /><input type="reset" value="重置" />您的性别是<!-- name属性相同. 为一组 --><input type="radio" name="sex" value="boy"/>男<!-- checked属性则默认该选项 --><input type="radio" name="sex" value="gril" checked="checked"/>女</form></body>
</html>

复选框checkbox略.

下拉框select.

select标签定义下拉列表.option标签设置选项.name属性在select标签设置. value属性在option标签设置. 设置selected＝"selected"属性实现默认选中.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="http://www.atguigu.com" method="get">用户名<input type="text" name="usename"/><br />密码<input type="password" name="password" /><br /><input type="submit" value="登录" /><input type="reset" value="重置" />您的性别是<!-- name属性相同. 为一组 --><input type="radio" name="sex" value="boy"/>男<!-- checked属性则默认该选项 --><input type="radio" name="sex" value="gril" checked="checked"/>女<br />游戏<select name="youxi"><option value="diwu" selected="selected">第五人格</option><option value="wangzhe">王者荣耀</option><option value="chiji">吃鸡</option></select></form>
</body>
</html>

按钮button.

多行文本框textarea.