HTML详解

HTML概念：HTML（Hypertext Markup Language ) 超文本标记语言。HTML 不是一种编程语言，而是一种标记语言。Html主要用来描述网页中所需要的组件，例如：文本框、表格、图片、视频等等，也对网页进行排版。HTML的源文件，称为“网页”，通常以.html或者.htm为结尾。可以使用任意文本编辑器编辑，需要使用浏览器执行。访问：https://www.w3school.

学无止路

9619人浏览 · 2021-10-08 15:35:24

学无止路 · 2021-10-08 15:35:24 发布

HTML

概念：HTML（Hypertext Markup Language ) 超文本标记语言。

HTML 不是一种编程语言，而是一种标记语言。
Html主要用来描述网页中所需要的组件，例如：文本框、表格、图片、视频等等，也对网页进行排版。
HTML的源文件，称为“网页”，通常以.html或者.htm为结尾。
可以使用任意文本编辑器编辑，需要使用浏览器执行。

访问：https://www.w3school.com.cn/

1 标记（标签）基本语法

1.定义标签
HTML语言以标签形式体现，这些标签通常是成对出现。
例：完整的HTML标签形式。

<标签名> <!-- 起始标签（标签头） --> 
<!-- 标签体-->
</标签名>
<!--结束标签（标签尾） -->

演示：空标签，不需要标签体。

<标签名/>

HTML语法要求不严格，标签不区分大小写。
2.标签属性
属性即标签的配置，可以通过设置属性，来调整标签。
语法如下：

<标签名 属性名=“属性值” 属性名=‘属性值’ 属性名=属性值 > <!-- 属性值可以加引号，也可以不 加 -->

演示的代码如下：

<hr size="粗细" color="颜色" width="" />

颜色使用十六进制颜色编码或颜色英文表示。
3.HTML核心标签
一个HTML文件中至少包含以下几个标签。

<html>			 		<!-- HTML根标签 -->
 <head> </head>         <!-- head标签，用来描述网页的相关信息（编码、标题等等），里面的内 容不会显示在网页中 --> 
<body> </body> 			<!-- body标签，所有需要显示在网页中的内容定义在body标签中 --> 
</html> 				<!-- HTML结束标签 -->

注意：如果不写html/head/body标签，浏览器会检测并添加缺省的标签。
在编码中，通常把外层的标签称为父标签，内层的标签称为子标签。

2 head标签的子标签（基础）

用来描述网页的相关信息（编码、标题等等），里面的内容不会显示在网页中。
1、title标签
作用：设置网页标题。
演示如图所示：
2.meta标签
作用：配置网页相关信息与动作。
演示：设置网页编码方式。

<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!-- 设置网 页编码方式 -->
    <meta http-equiv="content-type" content="text/html;charset=GBK"/>     
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
</body>
</html>

如图所示：在这里插入图片描述
演示：5秒后跳转到baidu。

<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>

如图所示：在这里插入图片描述
3.script标签
作用：编写JavaScript代码或引入外部的script程序。
比如：

<script src="路径" /> 
<script>
 // 编写Javascript代码
</script>

4.link标签
作用：引入外部的css文件。
比如：

<link href="" />

5.style标签
作用：在html文件中编写css样式。
比如：

<style>
</style>

3 body标签的子标签

1.标题标签
作用：显示标题。
语法如下：

<?> 标题文字 </?> 
? 为整数1~6

演示的代码如下：

<<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!--设置网页使用的字符集为utf-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页的标题 -->
    <title>这是我的第一个HTML程序</title>
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
    <h1> 一级标题 </h1>
    <h2> 二级标题 </h2>
    <h3> 三级标题 </h3>
    <h4> 四级标题 </h4>
    <h5> 五级标题 </h5>
    <h6> 六级标题 </h6>
</body>
</html>

运行结果如图所示：在这里插入图片描述

2、段落标签
作用：展示文本，支持换行
语法如下：

<p> 文本内容 </p> 
<pre>文本内容 文本内容
</pre>

pre标签会将文字变为等宽文字并居中显示。
演示：

<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!--设置网页使用的字符集为utf-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页的标题 -->
    <title>这是我的第一个HTML程序</title>
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
    <p>要想健康有长寿，</p>
    <p> 抽烟喝酒吃肥肉。</p>
    <p>晚睡晚起不锻炼，</p>
    <p> 多与异性交朋友。</p>
</body>
</html>

运行结果如图所示：在这里插入图片描述

3.实体字符
作用：显示特殊字符。
特殊字符与对应的实体字符，如图所示：在这里插入图片描述
4、字体修饰
作用：设置字体、字体大小、字体颜色。
语法如下：

<font color="颜色" face="字体" size="字号"> 文字 </font>

演示：

<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!--设置网页使用的字符集为utf-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页的标题 -->
    <title>这是我的第一个HTML程序</title>
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
    <font color="#0000ff" face="宋体" size="10"> 学无止路 </font>
</body>
</html>

运行如图所示：在这里插入图片描述
5.换行符
作用：在网页中加入换行符。
语法如下：

<br/>

演示：

<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!--设置网页使用的字符集为utf-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页的标题 -->
    <title>这是我的第一个HTML程序</title>
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
    要想健康又长寿，</br>
    抽烟喝酒吃肥肉。
</body>
</html>

运行如图所示：在这里插入图片描述
6.水平居中符
作用：将内容设置为水平居中。
语法如下：

<center>
	 要居中的内容
</center>

演示：

<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!--设置网页使用的字符集为utf-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页的标题 -->
    <title>这是我的第一个HTML程序</title>
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
    <center>
        要想健康又长寿，</br>
        抽烟喝酒吃肥肉。
    </center>
</body>
</html>

运行如图所示：在这里插入图片描述
7.直线符
作用：在网页中添加横向直线。
语法如下：

<hr color="颜色" size="厚度" width="宽度" align="对齐方向"/>
 <!-- align:可选值 left，right，center -->

演示：

<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!--设置网页使用的字符集为utf-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页的标题 -->
    <title>这是我的第一个HTML程序</title>
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
    <hr size="3" color="#00ffff" width="50%" align="left"/>
</body>
</html>

运行如图所示：
在这里插入图片描述
8、字符相关标签
包含斜体、加粗、下划线、删除线、上标、下标。
语法如下：

斜体：<i> 文本内容 </i> 
加粗：<b> 文本内容 </b> 
下划线：<u> 文本内容 </u> 
删除线：<s> 文本内容 </s> 
上标：<sup> 文本内容 </sup> 
下标：<sub> 文本内容 </sub>

演示：

<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!--设置网页使用的字符集为utf-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页的标题 -->
    <title>这是我的第一个HTML程序</title>
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
    斜体：<i> www.adair.com </i> <br>
    加粗：<b> www.adair.com</b> <br>
    下划线：<u> www.adair.com </u> <br>
    删除线：<s> www.adair.com</s> <br>
    上标：<sup> www.adair.com</sup> <br>
    下标：<sub> www.adair.com</sub> <br>
</body>
</html>

运行如图所示：在这里插入图片描述
9.跑马灯
作用：在网页中添加跑马灯效果。
语法如下：

<marquee behavior="滚动模式" bgcolor="背景颜色" scrollamount="速度(像素)"> 需要滚 动的内容 </marquee>
 <!-- behavior可选值： scroll 循环模式默认值。 slide 滚动一次。 alternate 巡逻模式 -->

演示：

<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!--设置网页使用的字符集为utf-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页的标题 -->
    <title>这是我的第一个HTML程序</title>
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
<marquee behavior="alternate" bgcolor="gray"
         scrollamount="10">www.adair.com</marquee>
</body>
</html>

运行如图所示：在这里插入图片描述
10.列表

无序列表.
语法如下：

<ul type=""> 
	<li>列表内容</li> 
	<li>列表内容</li>
</ul> 
<!-- type可选值： circle 空心圆。 square 实心方块。 -->

演示：

<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!--设置网页使用的字符集为utf-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页的标题 -->
    <title>这是我的第一个HTML程序</title>
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
    <ul type="square">
        <li>www.adair.com</li>
        <li>www.google.com</li>
        <li>www.google.com</li>
    </ul>
</body>
</html>

运行如图所示：在这里插入图片描述
2. 有序列表
语法如下：

<ol type="" start=""> 
	<li>列表内容</li> 
	<li>列表内容</li>
</ol> 
<!-- type可选值： A、a、I、i start可选值：起始值（整数） -->

演示：

<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!--设置网页使用的字符集为utf-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页的标题 -->
    <title>这是我的第一个HTML程序</title>
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
    <ol type="I" start="2">
        <li>www.adair.com</li>
        <li>www.google.com</li>
        <li>www.google.com</li>
    </ol>
</body>
</html>

运行如图所示：在这里插入图片描述
11.图片标签
作用：在网页中显示图片.
语法如下：

<img src="" align="" width="" height="" border="" title=""/>

属性详解：

1.src：图片路径。
2.align：图片与后面文字的对齐方式，可选值top（顶部）,middle（中部）,bootom（底 部）,left（左侧），right(右侧) 。3. width: 宽度px。
3. height:高度px。
4. border：边框px.
5. title:当鼠标移动到当前图片上时，对图片的描述文字。

演示：

<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!--设置网页使用的字符集为utf-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页的标题 -->
    <title>这是我的第一个HTML程序</title>
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
    <img src="a.gif" align="middle" width="200px" height="100" border="10" title="略略略~~"/>调皮
</body>
</html>

如图所示：
在这里插入图片描述
运行如图所示：

12.超链接【重点】
作用：跳转到另一张页面或发送请求。
语法如下：

<a href="资源路径" target="显示方式" > 显示文本 </a>
<!-- target可选值：_self(默认，当前窗口）, _blank（新窗口）-->

演示：

<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!--设置网页使用的字符集为utf-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页的标题 -->
    <title>这是我的第一个HTML程序</title>
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
    <a href="http://www.adair.com" target="_blank"> 点击月入过万！</a>
</body>
</html>

运行如图所示：在这里插入图片描述
13.表格相关【重点】
语法如下：

<table>			 <!-- 表格根标签 -->
	<tr> 		<!-- 行标签 --> 
		<td>第1行第1列</td> <td>第1行第2列</td>			<!-- 列标签 --> </tr> <tr> <!-- 行标签 -->
		<td>第2行第1列</td> <td>第2行第2列</td>			<!-- 列标签 -->
	</tr>
</table>

属性详解：

6. table标签常见属性。
1）border: 边框大小px.
2）bordercolor: 边框的颜色。
3）cellspacing：各单元格之间的间隙。
4）align ：水平对齐方式，可选值：left（默认，向左）,center（居中），right（向右）。
5）width：表格宽度，可以是像素px ，可以是百分比。
7. tr标签常见属性。
1）align：水平对齐方式，可选值：left（默认，向左）,center（居中），right（向右）。
2）valign：垂直对齐方式，可选值：top（顶部），middle（默认，中部），bottom（底部）。
3）bgcolor:设置背景颜色。
4）height：高度px。
3. td标签常见属性。
1）align：水平对齐方式，可选值：left（默认，向左）,center（居中），right（向右）。
2）valign：垂直对齐方式，可选值：top（顶部），middle（默认，中部），bottom（底部）。
3）bgcolor:设置背景颜色。
4）width | height：设置宽度|设置高度。

合并单元格：

<td colspan="列数"></td> <!-- 跨列合并 --> 
<td rowspan="行数"></td> <!-- 跨行合并 -->

注意：标签中可以添加任意html元素。
演示：

<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!--设置网页使用的字符集为utf-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页的标题 -->
    <title>这是我的第一个HTML程序</title>
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
    <table border="1" >
        <tr align="center">
            <td colspan="3">商品信息</td>
        </tr>
        <tr align="center">
            <td>商品图片</td>
            <td>商品名称</td>
            <td>女神的屁</td>
        </tr>
        <tr>	 <!-- 行标签 -->
            <td rowspan="2"><img src="demo2.jpeg"/></td>
            <td>价格</td>
            <td>12.5/500g</td>
        </tr>
        <tr>
            <td>产地</td> <td>哈萨克斯坦</td>
        </tr>
    </table>
</body>
</html>

如图所示：
在这里插入图片描述
运行如图所示：

4 表单相关【重点】

作用：与用户交互的组建，通常用于收集用户数据或指引用户操作。
1.表单元素

文本框
语法如下：

<input type="text" name="" value="" placeholder="" readonly="readonly" disabled="disabled"/>

属性详解：

2. name：组件标识（自定义名称） 。
3. value：默认值.
4. placeholder：提示文字，输入文字后消失。
5. readonly：只读模式。
6. disabled：不可用（无法交互）。

演示：

<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!--设置网页使用的字符集为utf-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页的标题 -->
    <title>这是我的第一个HTML程序</title>
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
    用户名：<input type="text" name="username" placeholder="请输入用户名..." />
</body>
</html>

运行如图所示：在这里插入图片描述
7. 密码框
语法如下：

<input type="password" name="" maxlength="最大字符个数"/>

演示：

<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!--设置网页使用的字符集为utf-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页的标题 -->
    <title>这是我的第一个HTML程序</title>
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
    密码：<input type="password" name="" maxlength="10"/>
</body>
</html>

运行如图所示：在这里插入图片描述
8. 单选钮
语法如下：

<input type="radio" name="" value="" checked/> 
<!-- checked：默认选中 -->

注意：多个单选钮name必须一致，否则无法实现单选。
演示：

<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!--设置网页使用的字符集为utf-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页的标题 -->
    <title>这是我的第一个HTML程序</title>
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
    性别：<input type="radio" name="sex" value="male" checked/> 男
        <input type="radio" name="sex" value="female"/> 女
</body>
</html>

运行如图所示：在这里插入图片描述
9. 复选框
语法如下：

<input type="checkbox" name="" value="" checked/>

注意：同一组复选框name尽量一致。
演示：

<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!--设置网页使用的字符集为utf-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页的标题 -->
    <title>这是我的第一个HTML程序</title>
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
    爱好：<input type="checkbox" name="hobby" value="" checked/>抽烟
    <input type="checkbox" name="hobby" value=""/>喝酒
    <input type="checkbox" name="hobby" value=""/>烫头
</body>
</html>

运行如图所示：在这里插入图片描述
10. 下拉列表
语法如下：

<select name=""> 
	<option value="" selected="selected" > 选项1 </option> 
	<option value="" > 选项2 </option> 
	<option value="" > 选项3 </option> 
</select> 			<!-- selected = "selected" ：默认选中 -->

演示：

<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!--设置网页使用的字符集为utf-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页的标题 -->
    <title>这是我的第一个HTML程序</title>
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
国籍：<select name="">
    <option value="" selected="selected"> 中国 </option>
    <option value="" > 美国 </option> <option value="" > 意大利 </option>
    <option value="" > 韩国 </option>
</select>
</body>
</html>

运行如图所示：在这里插入图片描述
11. 文本域
语法如下：

<textarea name="" cols="" rows="" placeholder="" style="resize: none;"> 提示 文字 </textarea>

属性详解：

12. cols :单行中文字符数，可用来设置宽度。
13. rows :显示多少行，可用来设置高度。
14. style="resize: none;" :禁止拖拽.

演示：

<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!--设置网页使用的字符集为utf-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页的标题 -->
    <title>这是我的第一个HTML程序</title>
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
    个人简介：<br>
    <textarea name="" cols="50" rows="4" placeholder="" style="resize: none;"> </textarea>
</body>
</html>

运行如图所示：在这里插入图片描述
15. 提交按钮/重置按钮/普通按钮
语法如下：

<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!--设置网页使用的字符集为utf-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页的标题 -->
    <title>这是我的第一个HTML程序</title>
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
    <!-- 提交按钮 -->
    <input type="submit" value="点我提交"/>
    <!-- 重置按钮 -->
    <input type="reset" value="点我重置"/>
    <!-- 普通按钮 -->
    <input type="button" value="点我没用"/>
</body>
</html>

运行如图所示：在这里插入图片描述
注意：提交按钮、重置按钮，必须在表单标签中才能起效。
2.表单标签
作用：定义表单元素的位置，只有在表单中的元素才可以提交到服务器的程序中进行处理。
语法如下：

<form action="" method=""> </form>

属性详解：

1.action：表单提交的目标位置，默认为当前页面。
2.method：设置表单提交方式。
1）get提交方式（默认），特点：表单数据?key=value的形式拼接到地址栏，不安全，不适合传 输大量数据，乱码问题较多。2）post提交方式，特点：表单数据以数据包的形式发送到目标位置，安全，允许传输大量数据， 乱码问题较少。

注意：在生产环境中通常使用post提交方式。
3. HTML5新表单元素（了解）

日期选框
语法如下：

<!-- 包含年月日 -->
<input type="date" name="" /> 
<!-- 包含年月日 时分秒 -->
<input type="datetime-local" />

演示：

<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!--设置网页使用的字符集为utf-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页的标题 -->
    <title>这是我的第一个HTML程序</title>
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
    出生日期：<input type="date" />
</body>
</html>

运行如图所示：在这里插入图片描述
2. 数字输入框
语法如下：

<input type="number" value="默认值" name="" max="最大值" min="最小值" step="步 长"/>

演示：

<!DOCTYPE html>
<html lang="en">
<!-- head标签中的内容，不会显示在网页中，用于配置网页的信息 -->
<head>
    <!--设置网页使用的字符集为utf-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页的标题 -->
    <title>这是我的第一个HTML程序</title>
</head>
<!-- body标签中的内容将来会显示在网页中 -->
<body>
    女朋友数量：<input type="number" value="1" name="" max="12" min="3" step="2"/>
</body>
</html>