什么是HTML
HTML是超文本标记语言，用于创建网页的标准标记语言
- 超文本：文本（文字：汉、英、数、符等等）+非文本（媒体：图片、视频、音频等等）
- 标记：<···>
- 标记 == 标签
- 分类
- 单标签：<···>
- 双标签：<···></···>
- 属性：<标签 属性=”属性值” 属性=”属性值”>
HTML的初始代码
在VScode上面编辑：感叹号（英文）+回车即可生成初始代码
-
<!DOCTYPE html> //文档声明，告诉浏览器，这是一个html文件
-
<html lang=”en”> //html文件最外层的标签，包裹所有标签 //lang=”en”表示语言为英文，这是一个英文网站，en是英文，zh-CN是中文
-
<head> //存放页面头部所有的标签
-
<meta charset=”UTF-8″> //元信息，设置网页的编码方式为“UTF-8”（国际编码）
-
<title>Doucment</title> //网页标题
-
<body> //内容部分
注释
- Ctrl+/ //光标停在本行即可
- Shit + Alt + a //需要先选中文本
标题与段落标签
- 标题：h标签
- 双标签
- 共6对：<h1></h1>······<h6></h6>
- h1级别最大，为大标题
- 段落：p标签
- 双标签
- <p></p>
- 占位符（空格）： 
文本修饰标签
- <strong></strong> //加粗
- <em></em> //斜体
- <del></del> //删除文本
- <sup></sup>、<sub></sub> //上标文本、下标文本
- <del></del> //删除文本（中划线）
- <ins></ins> //插入文本（下划线）
图片标签与属性
- <img> //图片
- 属性：
- src //引入图片的地址（相对、绝对路径）
- alt //图片损坏时提示信息
- title //鼠标移入图片时提示信息
- width //图片的宽
- height //图片的高
- 加宽高会给图片留位置，当图片未加载出来之前文字不会挤在一块
- 不一定通过属性加宽高，在样式上面也可以加宽高
引入文件的路径
-
相对路径
- ./ //路径中表示当前路径 + 目录（在VScode有选项供你选择）
- ../ //路径中表示上一级路径 + 目录（在VScode有选项供你选择）
-
绝对路径
- 网上资源
- 直接引用网上资源的地址
- 磁盘资源（不推荐）
- 直接引用文件目录
- 在Windows系统中可不加盘符
- 在Windows系统中可不需反斜杠（不推荐，不规范）
- 网上资源
跳转连接
- <a></a> //a标签
- 属性：
- href //要跳转的地址（可相对可绝对）
- target //跳转方式
- _self //当前页面打开，默认效果
- _blank //新窗口打开
- <base> //区别与a标签，base标签控制全局，即所有链接，且写在<head>里面而非<body>
//例如：<base targe=”_blank”>即所有的跳转链接（<body>中的a标签）都用新窗口打开
跳转锚点
-
方法1
- #号 + id属性
- 例如点击<a href=”#title”>这个跳转链接，页面就会滑动到<h2 id=”title”>这个标题处
-
方法2
- #号 + name属性（name属性只能作用于a标签上
- 例如点击<a href=”#title”>这个跳转链接，页面就会滑动到<a name=”title”>这个a标签处
特殊符号
HTML中的预留字符必须替换成字符实体，一些键盘上找不到的字符也可以用字符实体来替换
在HTML中，某些字符是预留的，在HTML中不能使用小于号（<）和大于号（>），这是因为浏览器会误认它们为标签
浏览器总是会阶段HTML页面中的空格至剩下一个空格，所以想要显示一定量的空格就需要使用“ ”字符实体
- w3school：HTML 字符实体 (w3school.com.cn)
无序列表
- <ul></ul><li></li>
- 均为双标签，且<ul>标签包着<li>标签
- <ul>是外层容器，一个列表一个<ul>，<li>是列表项，列表有多少列就有多少行<li>
- <ul>和<li>标签必须组合出现，它们之间不能出现其它标签
- 属性
- type：
- clicle——>一个空心圆点
- square——>一个实心方点
- disc——>一个实心圆点（默认）
- 快捷写法：ul>li * 3>…回车
- ul为<ul>标签，下一层包含着li即<li>标签，*3则为三个列表项，接着依然可以继续包裹其它标签如a标签等
有序列表
- <ol></ol><li></li>
- 均为双标签，且<ul>标签包着<li>标签
- <ol>是外层容器，一个列表一个<ol>，<li>是列表项，列表有多少列就有多少行<li>
- <ol>和<li>标签必须组合出现，它们之间不能出现其它标签
定义列表
- <dl>定义列表
- <dt>添加标题
- <dd>添加标题的描述
- 三者均为双标签
- <dl>包着<dt>和<dd>
- 多用于左右结构
嵌套列表
即在列表项内继续嵌套一个列表，无论有序还是无序
如图所示：
表格标签
- <table><table><tr><tr><td><td><th><th><caption>
- 均为双标签
- <table>表格的最外层的容器
- <tr>定义表格行
- <td>定义表格列 //行标签包裹列标签，一个行标签里包裹着多少个列标签，就代表一行有多少列
- <th>定义表头，一种特殊的列，自带加粗效果
- <caption>定义表格标题
- 例子：
语义化标签：不加也行，目的能让表格更规范，让搜索引擎更好地搜录到表格，不加浏览器也会自动生成
- <tHead>包裹表格头部内容，一个表格只能出现一次
- <tBody>包裹表格正文内容，一个表格可以出现多次
- <tFoot>包裹表格尾部内容，一个表格只能出现一次
表格属性
- border 表格边框 加在<table>标签里面，并非细线边框
- cellpadding 单元格内的空间，内边距 加在<table>标签里面
- cellspacing 单元格之间的空间，外边距 加在<table>标签里面
- rowspan 合并行 加在<td>标签里，需要合并多少行就填几，把其余需要合并的行都注释掉
- colspan 合并列 加在<td>标签里，需要合并多少行就填几，把其余需要合并的行都注释掉
- align 左右对齐方式 写在<tr>整行起作用，写在<td>某个单元其作用
- left 左对齐（默认）
- center 居中对齐
- right 右对齐
- valign 上下对齐方式 写在<tr>整行起作用，写在<td>某个单元其作用
- top 上对齐
- middle 居中对齐（默认）
- bottom 下对齐
表单input标签
- <form></form><input>
- <form> 表单最外层容器，双标签
- <input> 表单标签，单标签，用于用于收集用户信息
- 属性 type：
- text 普通的文本输入框 //value属性，其值为初始显示文本
- password 密码输入框
- checkbox 复选框
- radio 单选框 //若想把几个单选框分为一组，选A不能选B则需要全部加上name属性，其值相等，值无固定要求
- file 上传文件
- submit 提交按钮 //value属性，其值为按钮的文字
- reset 重置按钮
- 。。。。。。
- checket 设置选中状态 //其值无固定要求
- disabled 设置是否可用 //无值，加上即用户无法修改
- placeholder 设置提示信息 //多用于文本框，其值为文本框的初始文本，且不可选中，输入即消失
- 属性 type：
表单相关标签
- <textarea> 多行文本标签，双标签，加在<form>标签里
- <select> 下拉列表，双标签，加在<form>标签里，selected属性为默认选中第一个
- <option> 下拉列表的每一项内容，双标签
- <label> 辅助表单，双标签，无样式效果，实现元素之间的映射，如点击标题也可以触发文本框输入，不必点击文本框
- 实现：
- 将标题内容用<label>标签包裹，<label>标签里面输入for属性，并在需要映射的文本框（<input>标签）标签内输入id属性，其值与for属性的值一致，即可实现映射关系