html整理（本文通过绿叶学习网学习整理）

文章目录

HTML基本框架结构
常见的标签元素
表格的基本结构：
表格合并单元格：
插入图片
插入超链接
表单

HTML基本框架结构

下图是HTML的基本结构，从中我们可以看出，一个页面是由4个部分组成的。

（1）文档声明：
（2）html标签对：
（3）head标签对：
（4）body标签对：

绿叶网基础html教学知识
在HTML中，一般来说，只有6个标签能放在head标签内。

（1）title标签
网页的标题（地址栏）
（2）meta标签
一般用于定义页面的特殊信息，例如页面关键字、页面描述等。这些信息不是提供给用户看的，而是提供给搜索引擎蜘蛛（如百度蜘蛛、谷歌蜘蛛）看的。简单来说，meta标签就是用来告诉“搜索蜘蛛”这个页面是干嘛的。
（3）link标签
link标签用于引入外部样式文件（CSS文件）
（4）style标签
style标签定义元素的css样式
（5）script标签
script标签用于定义页面的JavaScript代码，也可以引入外部JavaScript文件
（6）base标签
这个标签没意义

HTML注释：表示注释的结束。

HTML文本：

常见的标签元素

`<sup>`	上标
`<sub>`	下标
`<s>`	中划线
`<em>`	斜体
`<strong>`	加粗
`<u>`	下划线
`<big>`	大字号文体
`<small>`	小字号文体
`<hr/>`	水平线
`<caption>`	表格标题
`<table>`	表格
`<tr>`	表格行标签
`<td>`	单元格
`<thead>`	表头
`<tbody>`	表身
`<tfoot>`	表尾


–	–

表格的基本结构：

（1）表格：table标签
（2）行：tr标签
（3）单元格：td标签
（4）表格标题：caption标签

<table><caption>表格标题</caption><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr>
</table>

一个完整的表格包含：table、caption、tr、th、td。为了更深一地对表格进行语义化，HTML引入了thead、tbody和tfoot标签。

thead、tbody和tfoot把表格划分为3部分：表头、表身、表脚。有了这些标签，表格语义更加良好，结构更加清晰，也更具有可读性和可维护性。

表格合并单元格：

合并行<td rowspan = "跨越的行数"></td>
合并列<td colspan = "跨越的列数"></td>

表格举例：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>表格语义化</title><!--这里使用CSS为表格加上边框--><style type="text/css">table,tr,td,th{border:1px solid silver;}</style>
</head>
<body><table><caption>考试成绩表</caption><thead>    <tr><th>姓名</th><th>语文</th><th>英语</th><th>数学</th></tr></thead><tbody><tr><td>小明</td><td>80</td><td>80</td><td>80</td></tr><tr><td>小红</td><td>90</td><td>90</td><td>90</td></tr><tr><td>小杰</td><td>100</td><td>100</td><td>100</td></tr></tbody><tfoot><tr><td>平均</td><td>90</td><td>90</td><td>90</td></tr></tfoot></table>
</body>
</html>

效果图
举例2（合并行）：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>rowspan属性</title><style type="text/css">table,tr,td{border:1px solid silver;}</style>
</head>
<body><table><tr><td>姓名:</td><td>小明</td></tr><tr><td rowspan="2">喜欢水果:</td><td>苹果</td></tr><tr><td>香蕉</td></tr></table>
</body>
</html>

效果图

插入图片

在HTML中，我们可以使用img标签来显示一张图片。对于img标签，只需要掌握它的3个属性：src、alt和title。

<img src="" alt="" title="" />

1.src属性：插入图片的路径，通常使用图片的相对路径，绝对路径在日后工作路径改动会很麻烦，所以我们只需要注意相对路径。

2.alt属性和title属性：alt和title都是用于指定图片的提示文字。一般情况下，alt和title的值是相同的。不过两者也有很大的不同。
alt属性：当图片加载不出来时，会显示alt的提示文字
如下图所示：

title属性：当我们把鼠标移到图片上时，就会显示title中的提示文字，如下图所示：

一个真正的前端工程师，需要能用Photoshop来进行基本的图片处理，例如图片切片、图片压缩、格式转换等。不过如果时间精力有限，我们不必太过于深入，掌握基本操作就完全够了。

插入超链接

语法：

<a href="链接地址">文本或图片</a>

<a href="链接地址" target="打开方式">文本或图片</a>

target属性取值:
_self 默认值，在原来窗口打开链接
_blank 在新窗口打开链接
_parent 在父窗口打开链接
_top 在顶层窗口打开超链接
下面这串代码，是通往百度的代码，下面百度超链接就是这串代码，点击即可前往百度

百度

上面写的是外部链接，了解内部链接可以点击下方链接前往绿叶学习网：
绿叶学习网内部链接讲解

锚点链接：
点击链接前往当前页面的某一部分
下面是我在顶部插入的代码

目录
他是通过id检索，超链接部分的基本样式应该是这样的,这个id是自己定义的名字，前面要加一个#。

<a href="#id">id</a>

然后再在你想要前往的区域插入下面的代码，注意上下面的id要相同

<div id=id><div>

通过下面的代码，我们点击目录，即可前往本页面的最上层
目录

表单

表单是我们接触动态页面的第一步。其中表单最重要的作用就是：在浏览器端收集用户的信息，然后将数据提交给服务器来处理。像下面这些页面就是和表单有关：

从外观上来划分，表单可以分为以下8种。我们常说的表单，指的是文本框、按钮、单选框、复选框、下拉列表等的统称。

（1）单行文本框
（2）密码文本框
（3）单选框
（4）复选框
（5）按钮
（6）文件上传
（7）多行文本框
（8）下拉列表
语法：

<form>//各种表单标签
</form>

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title></title>
</head>
<body><form><input type="text" value="这是一个单行文本框"/><br/><textarea>这是一个多行文本框</textarea><br/><select><option>HTML</option><option>CSS</option><option>JavaScript</option></select></form>
</body>
</html>

通过运行第二串代码，实现下图效果：我们可以在文本框内输入字符，也可以在下拉列表选择语言

form标签常用属性

name 表单名称
method 提交方式
action 提交地址
target 打开方式
enctype 编码方式

1．name属性
在一个页面中，表单可能不止一个，每一个form标签就是一个表单。为了区分这些表单，我们可以使用name属性来给表单进行命名。

2．method属性
在form标签中，method属性用于指定表单数据使用哪一种http提交方法。method属性取值有两个：一个是“get”，另外一个是“post”。

get的安全性较差，而post的安全性较好。所以在实际开发中，使用post比较多。

3．action属性
在form标签中，action属性用于指定表单数据提交到哪一个地址进行处理。

4．target属性
form标签的target属性跟a标签的target属性是一样的，都是用来指定窗口的打开方式。一般情况下，我们只会用到“_blank”这一个属性值。

5．enctype属性
在form标签中，enctype属性用于指定表单数据提交的编码方式。一般情况下，我们不需要设置，除非你用到上传文件功能。

<form name="myForm" method="post" action="index.php" target="_blank" ></form>

intput标签：
在HTML中，大多数表单都是使用input标签来实现的。

代码运行

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><form method="post">姓名：<input type="text" /></form>
</body>
</html>

效果图

单行文本框属性

在HTML中，单行文本框常用属性如下表所示。

表1 单行文本框常用属性
属性	说明
value	设置文本框的默认值，也就是默认情况下文本框
size	设置文本框的长度
maxlength	设置文本框中最多可以输入的字符数

单选框：

<input type="radio" name="组名" value="取值" />

说明：

name属性表示单选按钮所在的组名，而value表示单选按钮的取值，这两个属性必须要设置。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><form method="post">性别:<input type="radio" name="gender" value="男" checked />男<input type="radio" name="gender" value="女" />女</form>
</body>
</html>

运行效果：

我们可以看到默认情况下，会自动选择“男”，如果我们去掉checked，那么就不会有自动选择。

复选框：和单选框基本一致，改个type属性就可以了

按钮：
语法含义：value就是按钮上的文字，按钮的type类型分为三类，普通按钮（button）；提交按钮（submit）；重置按钮（reset）。
（1）普通按钮一般情况下都是配合JavaScript来进行各种操作的。
（2）提交按钮一般都是用来给服务器提交数据的。
（3）重置按钮一般用来清除用户在表单中输入的内容

<input type="button" value="取值" />

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><form method="post">账号：<input type="text" /><br />密码：<input type="password" /><br /><input type="submit" value="登入" /><input type="reset" value="重置" /></form>
</body>
</html>

效果图:

多行文本框：

<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><form method="post">个人简介：<br/><textarea rows="5" cols="20">请介绍一下你自己</textarea></form>
</body>
</html>

运行效果：

下拉列表：

<select><option>选项内容</option>……<option>选项内容</option>
</select>


```html
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><form method="post"><select><option>HTML</option><option>CSS</option><option>jQuery</option><option>JavaScript</option><option>Vue.js</option></select></form>
</body>
</html>

![在这里插入图片描述](https://img-blog.csdnimg.cn/9f2b078eb93b4d39bfb286582ecef426.png)