本文档介绍了HTML的基础知识，包括网页、网站和浏览器的概念，以及HTML的语法规范和常用标签。强调了Web标准的重要性，如结构、表现和行为的分离。详细讲解了HTML标签的使用，如标题、段落、文本格式化、图像、超链接、表格、列表和表单元素，同时也涉及到了路径、注释和特殊字符的表示。此外，还提到了开发工具VSCode的快捷命令和HTML5的相关特性。
HTML学习笔记
网页相关概念
网页
网站时指在因特网上根据一定规则使用HTML等制作的用于展示特定内容相关的网页集合
网页是构成网站的基本元素 通常由图片、文字、声音、视频等元素组成。通常以.htm或.html后缀结尾的文件 由网页元素组成，这些元素利用html标签描述出来，然后通过浏览器解析来显示给用户
HTML指的是超文本标记语言，它是用来描述网页的一种语言
是标记语言 不是编程语言 标记语言是一套标记标签
超文本 含义：
- 可加入图片 声音 动画 多媒体等内容（超越文本限制）
- 可以从一个文件跳转到另一个文件 与世界各地主机的文件连接（超级链接文本）
浏览器
网页显示、运行的平台。常用的有火狐、IE、谷歌、Safair 和Opera
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算王爷的显示方式并显示页面
Web标准
由W3C组织和其他标准化组织制定的一系列标准的集合 W3C（万维网联盟） 是国际最户名的标准化组织
主要有结构 表现 行为三个方面构成
Web标准提出的最佳体验方能：结构 形式 行为相分离
简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中
HTML标签
语法规范
- 所有的标签都必须包含在一对尖括号中<>
- 基本上标签都是成对出现的 双标签：开始标签结束标签 单标签：
- 标签关系 双标签可分为两类关系：包含关系和并列关系
基本结构标签（骨架标签）
每个网页都会有一个基本的结构标签，页面内容也是在这些基本标签上书写 HTML页面也成为HTML文档
开发工具选择：vscode
vscode部分快捷命令：
! 生成基本结构标签
Ctrl+ 放大 Ctrl-缩小
Ctrl+N新建文件
Ctrl+S保存文件（.html文件)
vscode部分新增标签说明:
| 标签 | 定义 | 作用 | 注意 |
|---|---|---|---|
<!DOCTYPE> | 文档类型声明标签 | 告诉浏览器使用哪种HEML版本来显示网页 | 处于<html>标签之前 不是一个HTML标签 |
lang | 语言种类 | 定义当前文档显示的语言 | en英语 zh-CN中文 对浏览器和搜索引擎有一定提示的作用 |
Character set字符集 | 多个字符的集合 | 便于计算机识别和存储各类文字 | 通过标签的charser来规定 常用编码有GB2312 UTF-8 GBK和BIG5 必须要写 |
<!DOCTYPE html> <!--采用html5版本来显示页面-->
<head lang="en" >
<meta charset="UTF-8" />
常用标签
标签语义
让页面结构更清晰
-
标题标签
<h1>-<h6>使网页更具有语义化 依据重要性递减 -
段落和换行标签 将
HTML分割为若干段落 换行标签为强制换行 注段落间会有较大间距 而换行并没有重新划分段落我是一级标题
我是一个段落标签
我是一个换行标签
123<h1>我是一级标题</h1> <p> 我是一个段落标签</p> 我是一个换行标签<br />123 -
文本格式化标签 设置文字的粗体 斜体 下划线 等效果突出重要性
语义 标签 说明 加粗 或者 推荐前者 语义更强烈 倾斜 或者 推荐前者 语义更强烈 删除线 或者推荐前者 语义更强烈 下划线 或者 推荐前者 语义更强烈 -
<div>和<span>标签 没有语义 是用来装内容的 div表示分割分区 span意为跨度 跨距-
<div>标签用来布局，但一行只能放一个<div>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CRha3pfO-1632740560326)(C:\Users\86153\AppData\Roaming\Typora\typora-user-images\image-20210715122000074.png)]
-
<span>标签用来布局，一行上可以多个<span>
-
-
图像标签和路径
-
<img>标签用于定义HTML页面中的图像 图片必须和网页放在一起<img scr="图像URL"/> -
其他属性：
属性之间用空格分开 彼此之间没有先后顺序 属性采取键值对的格式即
key="value"的格式，属性=”属性值“属性 属性值 说明 src图片路径 必须属性 alt文本 替换文本 图像不能显示时显示的文字 title文本 提示文本。鼠标放到图像上显示的文字 width像素 设置图像的宽度 height像素 设置图像的高度 border像素 设置图像的边框粗细 -
路径：
目录文件夹：存放同一项目的所有网页的文件夹
根目录：打开目录文件夹的第一层
路径：
-
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径 图片相对于HTML页面的位置
相对路径分类 符号 说明 同一级路径 图像与 html位于同一级下一级路径 / 图像位于 html下一级上一级路径 …/ 图像位于与 html上一级 -
绝对路径：指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径
例如 “D:\web\img\logo.gif” 或完整的网络地址"https://www.bilibili.com/video/BV1pE411q7FU?p=23"
-
-
-
超链接标签
在HTML标签中，
<a>标签用于定义超链接，作用是从一个页面链接到另一个页面-
链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>属性 作用 href用于指定链接目标的 url地址，（必须属性）当为标签应用href属性时，就具有了超链接的功能target用于指定链接页面的打开方式，其中 _self为默认值，_blank为在新窗口中打开 -
链接分类：
- 外部链接
- 内部链接 网站内部页面之间的相互链接 直接连接内部页面名称即可 例如
<a href="index.html">首页</a>- 空链接 如果当时没有确定链接目标时
<a href="#"首页</a>- 下载链接 如果
href里面地址是一个文件或者压缩包 会下载这个文件 地址链接的是 文件.exe或.zip等压缩包形式
<a href="img.zip">下载文件 </a>- 网页元素的链接（图片 音频 视频） 等这些内容当作文字
<a href="http://www.baidu.com"><img src="img.jpg"/></a>- 锚点链接 点击链接可以快速定位到当前页面中的某个位置
- 在链接文本的
href属性中，设置属性值为**#名字**的形式 如<a href="#two">第二集</a> - 找到目标位置标签，里面添加一个
id属性=刚才的名字 如<h3 id="two">第二集介绍</h3>
-
注释与特殊字符
-
注释 在HTML文档中添加一些便于阅读和理解但又不显示在网页中的注释文字
HTML中的注释以" "结束 快捷键
Ctrl+/ -
特殊字符 在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代
特殊字符 描述 字符代码 空格符  < 小于号 <> 大于号 >& 和号 &￥ 人民币 ¥© 版权 ©® 注册商标 ®° 摄氏度 °± 正负号 ±× 乘号 ×÷ 除号 ÷² 平方（上标2） ²³ 立方（上标3） ³
表格标签
表格主要是用于显示、展示数据
- 基本语法
<table>
<tr>
<td>单元格内的文字</td>
……
</tr>
……
</table>
<table></table>是用于动议表格的标签<tr></tr>标签是用于定义表格中的行放在<table></table>中<td></td>用于定义表格中的单元格放在<tr></tr>中- 字母
td指表格数据 即数据单元格的内容
- 表头单元格标签
<th></th>用于表示HTML表格的表头部分 效果：加粗文字并居中显示 - 表格属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
align | left,right,center | 规定表格相对周围元素的对其方式 |
border | 1或"" | 规定表格单元格是否有边框，默认为""，表示无边框 |
cellpadding | 像素值 | 固定单元格边沿与其内容之间空白，默认1像素 |
cellspacing | 像素值 | 规定单元格之间空白，默认2像素 |
width | 像素值或百分比 | 规定表格宽度 |
- 表格结构标签 表格头部+表格主题
分别用<thead>标签 表格的头部区域 和<tbody>标签 表格的主体区域
注<thead>内部必须拥有<tr>标签 一般位于第一行
- 合并单元格
方式：1. 跨行合并：rowspan="合并单元格的个数"
2.跨列合并：colspan="合并单元格的个数"
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5rZHOg9Q-1632740560327)(C:\Users\86153\AppData\Roaming\Typora\typora-user-images\image-20210716183443140.png)]
目标单元格：1. 跨行合并：最上测单元格为目标单元格
2.跨列合并：最左侧单元格为目标单元格
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CYmDk1KS-1632740560329)(C:\Users\86153\AppData\Roaming\Typora\typora-user-images\image-20210716184234377.png)]
步骤：1. 确定合并的方式
2. 找到目标单元格，写上合并方式
3. **删除多余单元格**
列表标签
用于布局，最大的特点是整齐，有序
可分为：无序列表，有序列表，自定义列表
- 无序列表
<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义
<ul>
<li>列表项1</li>
<li>列表项2</li>
……
</ul>
- 各个列表项之间无顺序，是并列的
<ul></ul>之间只能嵌套<li> </li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不允许的<li>与</li>之间相当于一个容器，可以容纳所有的元素- 无序列表会带有自己的样式属性，一般使用
CSS来设置
- 有序列表
<ol>标签用于定义有序列表，排序以数字来显示，应用<li>来定义列表项
<ol>
<li>列表项1</li>
<li>列表项2</li>
……
</ol>
去掉li前面的项目符号
list-style:none;
- 自定义列表
常用于对属于或名词进行解释和描述，定义列表的列表项前没有任何项目符号
<dl>标签用于定义描述列表，该标签与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
表单标签
表单用于收集用户信息（注册页面）
由表单域，表单控件（表单元素），提示信息三个部分组成
- 表单域
包含表单元素的区域 <form>标签用于定义表单域，实现用户信息的收集和传递
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
method | get/post | 用于设置表单数据的提交方式 |
name | 名称 | 用于指定表单的名称，以区分用一页面中的多个表单域 |
-
<label>标签<label>标签为input元素定义标注 用于绑定一个表单元素，当点击<label>内的文本时，浏览器将自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验<label for="sex">男</label> <input type="radio" name="sex" id="sex"/><label>标签的for属性对应于相关元素的id属性相同 -
表单控件
input输入表单元素
<input>标签用于收集用户信息 包含一个type属性，根据不同的属性值，输入字段拥有多种形式（文本字段，复选框，掩码后的文本控件，单选按钮，按钮等）<input type="属性值" /> <!--单标签-->属性值 描述 button定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） checkbox定义复选框 file定义输入字段和“浏览”按钮，供文件上传 hidden定义隐藏的输入字段 password定义密码字段，该字段中的字符被掩码 radio定义单选按钮 reset定义重置按钮，重置按钮会清除表单中的所有数据 submit定义提交按钮，提交按钮回把表单数据发送到服务器 text定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符 image定义图像形式的提交按钮 其他属性：
属性 属性值 描述 name由用户自己定义 定义 <input>元素的名称value由用户自己定义 规定 <input>元素的值checkedchecked规定此 <input>元素首次加载时应当被选中maxiength正整数 规定输入字段的字符的最大长度 <form> <!-- text 文本框 用户可以在里面输入任何文字 --> 用户名:<input type="text" name="username"><br> <!-- radio 单选按钮 只能选择其中的一个 --> <!-- name是表单元素名字，这里性别单选按钮必须具有相同的name财能实现多选1 --> <!--value使后台人员知道所选表单元素的值--> 性别: 男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女"><br> <!-- checkbox 复选框 实现多选 --> 爱好:看球<input type="checkbox" name="hobby"> 睡大觉<input type="checkbox" name="hobby"> 吃外卖<input type="checkbox" name="hobby"><br> <!--点击了提交按钮，可以把表单域form中的表单元素里面的值提交给后台--> <input type="submit" vlaue="免费注册"> <input type="reset" value="全部重置"> <input type="button" value="获取短信验证码" </form>注: 1. name和value 是每个表单元素都有的属性值，主要给后台人员使用
2. name 是表单元素的名字，要求**单选按钮和复选框要有相同的name值**-
<select>下拉表单在页面种，如果有多个选项让用户选择，并且想要节约页面空间时，可以使用
<select>标签定义下拉表单<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> …… </select>注：1.
<select>至少包含一对<option>2. 在`<option>`中定义selected="selected"时，当前项即为默认选中项 -
textarea文本域表单
当用户输入内容较多的情况下，就不能使用文本框表单了，可以使用
<textarea>标签 多行文本输入（留言 介绍等）
select>
选项1
选项2
选项3
……
```
**注**：1. `<select>`至少包含一对`<option>`
2. 在`<option>`中定义selected="selected"时，当前项即为默认选中项
textarea文本域表单
当用户输入内容较多的情况下，就不能使用文本框表单了，可以使用<textarea>标签 多行文本输入（留言 介绍等）
扫一扫
9010
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
