一、HTML结构
vscode中提供的标准骨架。
<!DOCTYPE html> <!--DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件--> <html lang="en"> <!--用来定义当前文档显示的主语言--> <head> <meta charset="UTF-8"> <!--描述页面的字符编码方式--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--这段代码用于网站页面在手机端显示时根据屏幕进行适应--> <title>Document</title> </head> <body> </body> </html>
二、HTML标签
1、div 和 span 标签
<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的
- div 是独占一行的, 是一个大盒子.
- span 不独占一行, 是一个小盒子.
2、标题标签
- 单词 head 的缩写，意为：头部、标题
- 从一级标题到六级标题，重要性依次递减，字体越小
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
3、段落标签
- 单词 paragraph 的缩写，意为：段落
<p>我是一个段落标签</p>
4、换行标签
- 单词：break 的缩写，意为：打断、换行
<br />是个单标签<br />标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距，而换行不会
<p>准备换行 <br/> 准备换行 <br/> 这段要结束了</p>
5、格式化标签
<strong>加粗</strong> <b>加粗</b> <em>倾斜</em> <i>倾斜</i> <del>删除线</del> <s>删除线</s> <ins>下划线</ins> <u>下划线</u>
6、注释标签
- 增加代码的可读性
<!-- 注释内容 -->
7、图像标签
- 图像标签是
<img/> - 单词image的缩写，意思为图像
- src是必须属性
- 图像的高度和宽度，一般来讲设置其中之一就可以，另外一个会自动按比例适配
<img src="1.png" alt="吹泡泡的海绵宝宝" title="海绵宝宝" width="800px" height="800px" />
8、超链接标签
- 超链接标签是
<a></a> - 单词 anchor 的缩写，意为：锚
- href是必须属性
- target属性的两种打开方式
- _self : 默认值
- _blank : 在新窗口中打开的方式
- 超链接分类：
- 外部链接
- 内部链接
- 空连接
- 下载链接
- 网页元素链接
- 锚点链接
9、表格标签
- 表格标签是
<table> </table> <tr></tr>必须嵌套在<table> </table>中<th></th>和<td></td>必须嵌套在<tr></tr>中- 表格不是用来布局页面的，而是用来展示数据的
- 合并单元格
- 跨行合并：rowspan=“合并单元格的个数”
- 跨列合并：colspan=“合并单元格的个数”
<table> <!--table标签表示整个单元格--> <tr> <!--tr表示表格的一行--> <th>表头单元格</th> <!--th表示表头单元格，表头单元格中的内容会加粗居中显示--> </tr> <tr> <td>一个单元格</td> <!--td表示一个普通的单元格--> </tr> </table>
表格标签属性，在日后可以使用CSS来完成，简单了解即可
10、列表标签
- 表格是用来显示数据的，那么列表就是用来布局的
- 列表分类
- 无序列表
- 有序列表
- 自定义列表
<!--无序列表--> <u1> <li>列表1</li> <li>列表2</li> <li>列表3</li> </u1> <!--有序列表--> <ol> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ol> <!--自定义列表--> <dl> <dt>内容1</dt> <dd>对内容1的描述1</dd> <dd>对内容1的描述2</dd> <dd>对内容1的描述3</dd> </dl>
11、表单标签
11.1 表单域
<form action="url地址" method="表单的提交方式，为get或者post" name="表单域名称，用于区分"> 各种表单元素控件 </form>
11.2 input表单元素
- 在表单元素中
<input>标签用于收集用户信息 <input />标签为单标签<input>标签的属性
- type：指定不同的控件类型
- name：定义input元素的名称
- value：规定input元素的值
- checked：规定该input元素首次加载时应该被选中
- maxlength：规定输入字段中，字符的最大长度
11.3 label标签
<label> 标签用于绑定一个表单元素，当点击 标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。
演示示例：示例传送门
11.4 select表单元素
- 下拉列表供用户选择
<select>中至少包含一对<option>- 在
<option>中定义 selected=“selected” 时，当前项即为默认选中项
<select> <option selected="selected">选项1</option> <option>选项2</option> <option>选项3</option> ... </select>
11.5 textarea表单元素
- 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 标签
- 使用多行文本输入控件，可以输入更多的文字，该控件常用于留言板、评论
- cols=“每行中的字符数”，rows=“显示的行数”，日后也可以用CSS完成
<textarea rows="3" cols="20"> 文本内容 </textarea>
12、特殊字符
在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。
三、HTML学习资源
1、学习文档：HTML教程
2、学习视频：HTML教程
3、思维导图：思维导图我是在GitHub上淘到的，下面给出地址，如果不方便下载的，也可以用百度网盘，我放到网盘里一份。
- GitHub仓库：传送门
- 百度网盘：
链接：https://pan.baidu.com/s/1RpbAKRJwNV4xkY3KB29ENw
提取码：ucr2
四、未来可期
文章到这里就要结束了，但故事还没有结局
如果本文对你有帮助，记得点个赞👍哟，也是对作者最大的鼓励🙇♂️。
如有不足之处可以在评论区👇多多指正，我会在看到的第一时间进行修正
