本文介绍了HTML的基本概念，如超文本和标签结构，详细讲解了标签的属性、HTML模板的构建，以及注释的使用。接着，文章涵盖了从标题、段落到图片、链接、列表、表格和表单等HTML常用标签，最后提到了布局元素div和span的作用。
目录
一、什么是HTML
HTML: 超文本 标记 语言
超文本：文本 + 非文本（图片、音频、视频等）
标记：标签，<单词>
单标签：<单词>
双标签：<单词></单词>
快捷键：编辑器自动帮我们生成单标签或者双标签
单词 + 回车
二、标签的属性
用来修饰标签的，设置标签的一些功能
语法：<标签 属性1="值1" 属性2="值2">
三、HTML的模板
英文! + 回车
<!DOCTYPE html> <!--声明：告诉浏览器这是一个html文档-->
<html> <!--html标签：根标签，所有的代码写在根标签里面-->
<head> <!--head标签：引用脚本、样式、提供元信息-->
<meta charset="utf-8"> <!-- 元信息：设置网页使用国际编码，防止出现乱码-->
<title></title> <!--网页的标题-->
</head>
<body> <!--页面要显示的内容都写在body里面-->
网页显示的区域
</body>
</html>四、HTML的注释
代码中能看到，网页看不到
作用：
对代码进行标记提示，提高代码的可阅读性，可维护性。
屏蔽暂时不用的代码。
五、HTML的常用标签
1、标题与段落
- 标题：<h1>~<h6>
- 段落：<p>
2、文本修饰标签
- 加粗：<strong>
- 斜体：<em>
- 上标文本：<sup>
- 下标文本：<sub>
- 删除：<del>
- 添加：<ins>
3、图片标签
图片：<img src="" alt="">
- src：图片的路径，图片的位置
- alt：图片不能正常显示的时候，替代显示的文本
4、相对路径和绝对路径
相对路径
- 一个点：./ 当前路径
- 两个点：../ 上一级路径
绝对路径
- 从盘符开始查找
5、跳转链接
功能：从一个页面跳转到另一个页面（可以是其他网址，也可以是本地的html）
跳转链接：<a href="" target="">
- href：跳转的地址
- target：链接的打开方式 (self：默认值，在当前页面打开；blank：在新标签页打开)
6、锚点
两种方式
- #号 + id属性
- #号 + name属性
7、列表标签
无序列表（常用）
- 列表的容器：<ul>
- 列表的具体项：<li>
有序列表
- 列表的容器：<ol>
- 列表的具体项：<li>
8、表格标签
- 表格的容器：<table>
属性
- border：表格边框
- cellspacing：单元格与单元格之间的空间
- cellpadding：单元格内的空间
- 行：<tr>
- 单元格：<td>
属性
- rowspan：合并行
- colspan：合并列
- 表头：<th>
- 表格标题：<caption>
9、表单标签
- 作⽤：传递⽹⻚填写的内容给后端
- 表单容器：<form>
- 属性action：后台传递信息的地址
- 输入框：input标签 <input> 通过修改type的值，可以展现不同的表现形式
- 属性type的值
text：普通的文本输入框
password：密码输入框
radio：单选框
- A 、要想让系统识别这是同⼀组的话，添加name属性
- B、默认不可选 ：disabled
- C、默认选中：checked
- D、给每⼀个选项设置value属性，这个属性是⽤于后台读取使⽤的
- checked：默认选择
- disabled：禁止使用
- checkbox：复选框
- checked：默认选择
- disabled：禁止使用
-
- file：上传文件
- submit：提交按钮
- 问号之后，放的是我⽹⻚书写的内容 所以，要给每⼀个需要提交内容的标签⼀个name
- reset：重置按钮
- button：普通按钮
- 属性placeholder：输入框的提示文字
- 多行文本框：<textarea>
- 下拉菜单：<select><option>
- selected：默认选择
- disabled：禁止使用
- option：选项
- -textarea
10、div与span
需要搭配CSS使用
- div：容器标签，默认占据⽹⻚⼀整⾏，他的⾼度由内容⾃动撑⼤，用于划分一块区域，一个网页的由若干个区域组成，从大区域到小区域实现布局
- span：没有任何效果的标签，通常⽤于修饰指定⽂字
-  代表空格
扫一扫
3311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
