系列文章目录
文章目录
一、HTML简介
-
HTML的概念：
HTML全称HyperText Markup Language，中文名称为超文本标记语言。这种语言是专门用来创建网页的，与CSS（层叠样式表）和JavaScript语言一起构成了现代网页的基础。
CSS与JavaScript会在后面讲。
-
HTML的作用：
HTML相当于网页的“骨架”，CSS和JavaScript都依赖于HTML；而CSS相当于网页的“皮肤”，没有“皮肤”的网页丑到不能看；最后，JavaScript相当于网页的“肌肉’，它给了网页动起来的能力，使网页更加易用、功能更加强大。
二、HTML的注释
<!-- 单行注释 -->
<!--
多行注释
多行注释
-->
三、HTML的文档结构
在浏览器的页面上，按下 F12 按键，就可以看到该页面的HTML组成标签。
-
HTML标签：
一个HTML文件（也叫文档）是用一个个类似于标签来构成的，而标签的格式类似于
<p>内容</p>。 -
HTML文档的后缀名是
.html或.htm，二者没有区别。文档的结构为：<!DOCTYPE html>：声明该文档为HTML文档 <html>：文档内容的开始 <head> 内容 </head>：给浏览器的一些信息 <body> 内容 </body>：用户可见的页面内容 </html>：文档内容的结束HTML的代码没有任何缩进和换行的限制，我们甚至可以将所有代码写在一行中，但为了方便阅读，还是尽量使用缩进和换行。
-
标签的分类：
- 双标签：比如
<h1> </h1> - 单标签（自闭合标签）：比如
<img>
- 双标签：比如
四、head标签内的常用标签
-
<title> 标题内容 </title>：网页标题，在浏览器的标题栏上显示。 -
<style> CSS代码</style>：专门用于在内部书写CSS代码。 -
<script> JavaScript代码或js文件路径 </script>：用于在内部书写JavaScript代码。还可以引入js文件，即JavaScript代码文件。 -
<link> CSS文件路径 </link>：专门用于导入CSS文件。 -
<meta name="keywords" content="一些关键字">：使用搜索引擎搜索后面指定的关键字，就会将该网页搜索出来。 -
<meta name="description" content="描述信息">：使用搜索引擎该网页后，会在搜索结果的该网页的区域，显示这些描述信息。
五、body标签内的常用标签
1. 普通标签
<h1>标题内容</h1>：用于显示标题，共有<h1>到<h6>六级标题。标题级别越小，字体越粗、越大。<b>内容</b>：内容字体加粗。<i>内容</i>：内容字体变为斜体。<u>内容</u>：内容加下划线。<s>内容</s>：内容加删除线。<p>内容</p>：段落标签，一对标签就是一行。<br>：换行。<hr>：水平分割线。
2. 块级元素（标签）和行内元素（标签）
-
块级元素：每个块级标签都独占一行，不与其他标签并列显示。
如：
<h1>到<h6>、<p>等 -
行内元素：自身内容多大，就占多大面积。
如：
<i>、<u>、<s>、<b>等。
3. 常见特殊符号
：空格。如果在HTML文档中直接打空格，无论打多少个，只会显示一个。>：大于号。<：小于号。&：& 符号。¥：￥人民币符号。©：© 版权符号。®：® 商标符号。
4. div和span标签
-
<div> 内容 </div>：属于块级元素。 -
<span> 内容 </span>：属于行内元素。 -
这两个标签本身没有任何样式和含义，主要用于充当其他元素的容器，方便CSS样式布局，这些学到CSS后就容易理解了。
块级元素可以嵌套所有元素，**除了
<p>标签，他只能在内部嵌套行内元素，不能嵌套块级元素。**行内元素不能嵌套块级元素，但可以嵌套行内元素。
5. img标签和a标签
-
<img>图片标签：<img src="图片的路径" alt="图片的描述信息" title="提示信息" height="高度" width="宽度">-
图片的路径可以是本地文件路径，也可以是一个网址。对于网址，浏览器会自动发送请求，获取数据。
-
图片的描述信息会在图片加载失败时，在图片本来的位置显示。
-
提示信息会在鼠标悬停在图片上时，显示出来。
-
高度和宽度的单位为px（像素），当只调整其中一个时，另一个会等比例缩放。
-
-
<a></a>链接标签：<a href="url地址" target="跳转方式"> 内容 </a>- 在页面上点击内容，会跳转到指定的url地址 。
- 跳转方式有两种：
_self代表在当前标签页进行跳转，_blank代表在新的标签页进行跳转。
6. 标签的属性
在上面的img标签和a标签中，src、href等，都被称为属性。用于给标签添加附加信息，相当于标签的“设置”。
标签中的一部分属性是标签特有的，还有一些是所有标签共有的属性，其中比较常用的是id属性和class属性：
-
id属性：
相当于id的身份证号，可以唯一标识出一个标签。同一个HTML文档中，id属性的值不允许重复。
-
class属性：
用于对标签分类，class属性的值相同，就属于同一类。标签分类方便对标签进行处理。
通过id属性，我们可以使用a标签实现锚点功能，即点击a标签的内容，跳转到当前页面的指定位置。比如，跳回页面顶部：
<h1 id="ddd">假设我是页面顶部元素</h1>
<!-- 在href后面写上要跳转元素的id值，并在id值前加一个#号 -->
<a href="#ddd">跳到顶部</a>
PS：标签属性支持自定义。
7. 列表标签
列表分为三类：
-
无序列表：
每一个项目前面都是一个实心的圆点。
<ul> <li>项目1</li> <li>项目2</li> </ul>效果：
- 项目1
- 项目2
-
有序列表：
每一个项目前面都是一个阿拉伯数字。
<ol> <li>项目1</li> <li>项目2</li> </ol>效果：
- 项目1
- 项目2
-
标题列表：
每一个项目前面没有内容，但标题和项目之间会有缩进，更有层次。
<dl> <dt>标题1</dt> <dd>项目1</dd> <dt>标题2</dt> <dd>项目2</dd> <dt>标题3</dt> <dd>项目3</dd> </dl>效果：
8. 表格标签
-
基础语法：
<table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>33</td> <td>女</td> </tr> <tr> <td>李四</td> <td>21</td> <td>不明</td> </tr> </tbody> </table><table></table>表示一个表格；<thead></thead>表示表头；<tbody></tbody>表示表体；<tr></tr>表示一行；<td></td>和<td></td>都表示一列，不同之处在于th是加粗的；效果：
注意：默认就是没有边框。
-
显示线框：
<table border="线框宽度">……</table> -
一个单元格占用的行数（单元格会变高）：
<td rowapan="行数">……</td> -
一个单元格占用的列数（单元格会变胖）：
<td colsapan="列数">……</td>
9. 表单标签
-
作用：
用来获取用户输入，比如用户名、密码等，十分常用。
-
基本语法：
<form action="提交数据的目标地址"> <label for="对应的input标签的id值">提示信息：<input type="text" id="xxx" name="yyy"></label> </form>效果：
-
提交数据的目标地址：用户点击提交按钮后，表单内的数据就会提交到该地址。
如果不写，默认向当前网页所在的url提交数据。
如果只写一部分路径，会自动将当前网页所在url的IP地址和端口号，拼接到前面。比如：
action='/index/'，url=https://www.china.com/，则提交到https://www.toutiao.com/index/。 -
在label标签的for属性中，填写对应input标签的id值之后，点击lable标签中的提示信息，焦点就会自动跳转到input输入框中。
-
input标签可以写在label标签外，但提示信息必须写在label内。
-
name 属性用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据。也就是说，当数据提交到后端之后，就可以通过name属性的值获取该表单元素的数据。
-
input和label都是行内元素，可以使用div标签包裹住它们，让它们独占一行。
修改input标签的type属性，可以改变input输入框的类型。
比如属性为password时，变为密码输入框，输入的内容会显示为黑色圆点。为submit时，变成提交按钮等。
input输入框基本类型
<form action="">
<div><label for="name">用户名:<input type="text" id="name"></label></div>
<div><label for="passwd">密码:<input type="password" id="passwd"></label></div>
<div><label for="date">时间:<input type="date" id="date"></label></div>
</form>
- 效果：
按钮类型
<form action="">
<div>
<input type="submit">
<input type="reset">
<input type="button" value="提示信息">
</div>
</form>
-
效果：
-
submit类型：用来触发表单的提交；类似的，还有一个button标签也可以触发提交动作。
<button>提示信息</button> -
reset类型：重置表单内容。
-
button类型：本身没有任何功能，却是最常用的。使用JavaScript语言，可以自定义它的功能。
-
value属性用来设置按钮上显示的文字。submit和reset默认有value值，可以不写，但不同的浏览器，显示的文字略有差异。而button类型的input标签，默认没有value值，按钮上没有任何文字信息，因此一定要写上value值。
-
-
单选按钮：
<form action=""> <label for="male"><input type="radio" id="male" name="gender">男性</label> <label for="female"><input type="radio" id="female" name="gender">女性</label> <label for="other"><input type="radio" id="other" name="gender">其他</label> </form>效果：
- name的值相同代表这几个单选按钮是一组，每一组单选按钮，用户只能选择其中的一个按钮。
checked="checked"表示选中，该属性常用来设置默认值。如果属性名和值相同，可以只写属性名。
-
多选框：
<form action=""> <label for="sing"><input type="checkbox" id="sing" name="hobby">唱歌</label> <label for="dance"><input type="checkbox" id="dance" name="hobby">跳舞</label> <label for="rap"><input type="checkbox" id="rap" name="hobby">说唱</label> <label for="basketball"><input type="checkbox" id="basketball" name="hobby" checked>打篮球</label> </form>效果：
-
文件选择按钮：
<form action="" multiple="multiple" enctype="multipart/form-data"> <input type="file"> </form>效果：
设置属性
multiple="multiple"，可以一次选择多个文件。
属性enctype规定在发送到服务器之前应该如何对表单数据进行编码:值 描述 application/x-www-form-urlencoded 在发送前编码所有字符（默认） multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。 text/plain 空格转换为 “+” 加号，但不对特殊字符编码。
其他表单标签
-
下拉框：
<form action=""> <select> <option value="">北京</option> <option value="">上海</option> <option value="">广州</option> <option value="" selected>深圳</option> </select> </form>效果：
与单选按钮不同，这里使用
selected=selected属性来设置默认值，同样可以简写。多选下拉框： 在select标签中，写上multip属性即可。
-
文本域：
可以接收大段的文字。
<form action=""> <textarea rows="行数" cols="列数" maxlength="最大字数"> 我是文本框里的默认值。 </textarea> </form>效果：
下一篇
扫一扫
3812
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
