标题目录
基本概念
-
HTML（Hyper Text Markup Language）超文本标记语言，负责网页的内容
-
超文本： 除了文本以外，我们还可以向网页中插入图片、超链接、表格、表单、音频、视频等
-
HTML 由大量的标记/标签构成，分为：
- 双标记标签：<head></head>
- 单标记标签：<br/>或 <br>，两种写法都可以
-
完整的网页结构：
<!-- 表示当前文档是html5版本 让浏览器使用h5的规范解析 --> <!DOCTYPE html> <!--表示网页的开始与结束 lang="en"表示网页是一个英文网站 zh表示中文--> <html lang="en"> <!--网页头部,存放一些配置信息--> <head> <meta charset="UTF-8"> <!--配置编码,为了认识中文--> <title>我是网页标题</title> <!-- 配置网页的标题 --> </head> <body> <!--网页展示的内容--> 第一个网页的内容 </body> </html> -
HTML 文件的后缀名是 .html 或 .htm，会按顺序从上往下、从左往右依次解析执行
-
HTML 属性
属性：也称为特征，描述标签某一方面的特点
html 有很多的属性和值，用来修改元素的样式和状态
写法：<标签 属性名 1="属性值 1" 属性名 2="属性值 2"></标签>
要求：- 属性的声明必须在开始标签中
- 一个元素可以有多个属性，多个属性不区分先后顺序，使用空格隔开即可
- 属性值要包裹在双引号中
- 单值属性：只有一个与属性名同名值，值可以省略不写，如 readonly 只读 disabled禁用
注释
- 用来解释代码且不会执行的文本
- 注释格式： <!-- 被注释掉的内容 -->
- 快捷键： Ctrl+/ 添加注释，再按一次取消注释
- 注释不能嵌套注释，也不可以写在标签里！
常用快捷键
- Ctrl + D 复制当前行
- Ctrl + Y 删除当前行
- Home 光标移至行首
- End 光标移至行尾
- Shift + Enter 光标在任意位置都可以向下添加一个空白行
- Shift + Alt + 上下键 快速上下调整当前行的位置
- 选中多行 Tab 统一设置缩进
- Shift + Tab 回退缩进
转义符号
| 字符 | 命名实体 | 数字实体 | 说明 |
|---|---|---|---|
| |   | 不间断空格（防止自动换行） | |
| < | < | < | 小于号（标签开始符） |
| > | > | > | 大于号（标签结束符） |
| & | & | & | 和号（用于转义其他实体） |
| " | " | " | 双引号（在属性值中使用） |
| ' | ' | ' | 单引号（在属性值中使用） |
文本相关标签
- <b>加粗文字</b> 加粗文字
- <i>斜体文字</i> 斜体文字
- <u>下划线文字</u> ++下划线文字++
- <s>删除线文字</s> 删除线文字
- <hn>n级标题</hn> n为1到 6 独占一行，字体加粗，有垂直行间距
- <p>段落</p> 独占一行，有垂直行间距
- <hr> 独占一行的灰色水平分割线
空格折叠现象：连续的多个空格或换行会折叠成一个空格显示，使用<br>换行
生成假文：输入 lorem 按 Tab 补全即可
分区元素
分区标签：可以理解为一个区域，对多个具有相同或相似结构的标签进行统一管理
- <div></div> 行内分区：独占一行 div作为典型代表,默认宽度为父级宽度的100%,高度为0靠内容撑起来
- <span></span> 块级分区：不换行,用于选中一行中的一部分内容
HTML5 新增了一些带有语义的分区标签
-
<header></header>定义网页或一个区域的头部
-
<nav></nav>定义网页的导航部分
-
<main></main>定义网页的主要内容
-
<section></section>定义网页的一个区块或章节
-
<article></article>定义网页中独立完整的内容，比如博客文章或新闻报道
-
<aside></aside>定义网页的侧边栏或者附属信息
-
<footer></footer>定义网页或一个区域的页脚部分
顶部条导航栏侧边栏主体文章尾部
头部 <main>主体</main>文章 区域
其实在用户看来是没有区别的，只不过这样会大大提高代码的可读性与模块复用性、也有利于检索
URL 路径
URL（Uniform Resource Locator）统一资源定位符，俗称路径，用来标识资源的位置
相对路径
- 从当前 html 文件的位置出发去找资源
- 如果 html 与资源在同一个目录下，直接写资源的名字，如：1.png
- 如果资源在 html 的下一级目录，先写目录名再写目录里的资源，如：img/2.png
- 如果资源在 html 的上一级目录，先回到上一级再找资源，如： . ./3.png
绝对路径
从根目录处开始找资源，不需要当前文件的位置
- 优点：节省本地服务器的存储空间
- 缺点：资源不稳定，如果远程服务器删除此资源，本地服务器就引用不到了，且并不安全
- 网络资源：从协议开始，如：
https://cn.bing.com/images/search?q=图片\&id=457EC80FCD5EE9AB67B2B3E8F5624312D6F6400B\&FORM=IACFIR
表格
- <table></table> 表示整个表格 包含表格的全部内容
- <tr></tr> 表示表格中的一行 table row
- <td></td> 表示表格中的一个单元格 table datacell
单元格是真正存放数据的地方，一行有几个单元格，表示一行有几列 - <caption></caption> 表格的标题
- <th></th> 行/列的标题 文字加粗居中显示
表格属性：
- border="1px" 给表格添加边框
- style="border-collapse: collapse" 表格默认的边框是带有间距的，想去掉可以加这句代码
合并单元格（写在 td 里，被合并的单元格一定得删掉！） - colspan="n"跨列 从当前单元格开始，向右合并 n 个单元格（n 也包含当前单元格）
- rowspan="n"跨行 从当前单元格开始，向下合并 n 个单元格（n 也包含当前单元格）
代码示例：
<table border="1px" style="border-collapse: collapse">
<caption>购物车</caption>
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
</tr>
<tr>
<td style="text-align: center">1</td>
<td>荣耀X60</td>
<td>2601</td>
</tr>
<tr>
<td style="text-align: center">2</td>
<td>三折叠 怎么折都有面</td>
<td>27399</td>
</tr>
<tr>
<td>总价</td>
<td colspan="2">30000</td>
</tr>
</table>效果：
超链接
<a> 标签用于向页面插入超链接
-
href 表示要链接的资源路径
-
超链接可以链接网络与内部资源，还可以链接图片
-
通过 a 标签包裹 img 标签可以实现图片超链接
-
锚点：先给对应的 html 内容添加 id，再通过#id 值选中，即可跳转到锚点位置，#表示直接跳转到页面顶部
西游记
快速跳转至第1章 快速跳转至第2章 快速跳转至第3章
第一章 石猴出世
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid beatae distinctio dolorem doloremque earum error fugit in ipsum itaque laboriosam libero modi molestias necessitatibus, nulla quibusdam quos similique veritatis vero.
第二章 蓬莱学艺
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid beatae distinctio dolorem doloremque earum error fugit in ipsum itaque laboriosam libero modi molestias necessitatibus, nulla quibusdam quos similique veritatis vero.
第三章 龙宫借宝
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid beatae distinctio dolorem doloremque earum error fugit in ipsum itaque laboriosam libero modi molestias necessitatibus, nulla quibusdam quos similique veritatis vero.
快速跳转至页面顶部
表单
表单提供了一些可视化的输入控件，会自动收集整理用户输入的内容，并提交给服务器
<form></form> 表示表单的开始与结束
| 属性 | 描述 |
|---|---|
| action="url" | 向哪个地址提交数据，如果不写会提交给当前页面，也可以写一个#号占位 |
| type | 控件类型 |
| name | 控件名 |
| value | 可以设置输入框的默认值，如果是按钮，则设置的是按钮上显示的文本 |
| placeholder | 提示占位文本 |
| maxlength | 设置输入的最大长度 |
| readonly | 设置文本控件只读，能看不能改，数据可以提交 |
| disabled | 设置控件为禁用(控件变为灰色的了,且数据不可以提交) |
| checked | 单/多选框使用此属性可以设置指定选项被默认选中 |
<input type="text"> 文本输入框
<input type="password"> 密码框
<input type="radio"> 单选框 注意设置name与value属性！
<input type="checkbox">多选框 注意设置name与value属性！
<input type="date">日期
<input type="file">文件
<input type="color">颜色
<input type="range">范围
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
<input type="button" value="普通按钮">按钮的另外一种写法：
<button>按钮</button>下拉选框： selected 可以设置默认选中
<select name="city">
<option value="1" selected>北京</option>
<option value="2">上海</option>
</select>label 关联控件：用于 form 中文本和控件的关联，单击文本如同单击控件
<input type="checkbox" id="agree">
<label for="agree">我同意相关的服务协议</label>多行文本域：用于输入多行文本内容，常用于留言板意见栏等
-
resize：none 不允许拖拽修改多行文本域的大小
-
rows 设置行数(高度) cols设置列数(宽度)但这两个属性不推荐后期可以用CSS做
<textarea style="resize: none;" rows="4" cols="50"></textarea>
总体代码：
<body>
<!--form表示整个表单 action="#"表示将收集到的数据提交至当前页-->
<!-- name设置控件的名字,不设置名字的控件无法提交值 -->
<!--input控件: type属性用来设置控件的类型
text文本框 password密码框 radio单选框 checkbox复选框
date日期 color颜色 range范围 file文件
submit提交按钮 reset重置按钮 button普通按钮-->
<form action="#">
姓名1:<input type="text" name="uname1"> <br>
姓名2:<input type="text" name="uname2"> <br>
<!-- value默认用来保存控件的值,也可以用于设置输入框的默认值 -->
姓名3:<input type="text" name="uname3" value="rose"> <br>
<!-- 单值属性:readonly只读(只能看不能改) disabled禁用(不能改,且无法提交值) -->
姓名4:<input type="text" name="uname4" value="rose" readonly> <br>
姓名5:<input type="text" name="uname5" value="rose" disabled> <br>
<!-- placeholder占位提示文本 -->
姓名6:<input type="text" name="uname6" placeholder="请输入用户名"> <br>
<hr>
密码:<input type="password" placeholder="请输入密码" name="pwd" maxlength="6"> <br>
<!-- 多个单选选项必须设置相同的name才可以被分到同一组,实现单选!
每个选项必须设置value才能提交值,不然提交的值都是on -->
性别:
<input type="radio" name="gender" value="1">男
<input type="radio" name="gender" value="0" checked>女
<br>
爱好:
<input type="checkbox" name="hobby" value="cf">吃饭
<input type="checkbox" name="hobby" value="sj" checked>睡觉
<input type="checkbox" name="hobby" value="dyx" checked>打游戏
<input type="checkbox" name="hobby" value="java">学Java
<br>
生日:<input type="date" name="birthday"> <br>
颜色:<input type="color" name="lc"> <br>
范围:<input type="range" name="fw"> <br>
文件:<input type="file" name="wj">
<br>
喜欢的城市:<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="cc" selected>长春</option>
<option value="gz">广州</option>
</select>
<br>
<!-- 关联效果:点击文字即可选中复选框 -->
<input type="checkbox" id="ok">
<label for="ok">我同意以上协议</label>
<br>
<!-- 关联效果:点击文字即可选中输入框,且输入框有输入光标 I -->
<label for="nickname">昵称:</label>
<input type="text" id="nickname">
<br>
<!-- 多行文本域 -->
留言板:<textarea cols="30" rows="3" style="resize: none;">请留言~</textarea>
<hr>
<input type="submit" value="点我提交">
<input type="reset" value="点我重置">
<input type="button" value="普通按钮">
<button>h5新按钮</button>
</form>
</body>必须掌握：
| 题目 | 答案 |
|---|---|
| value加在输入框上，是设置什么? | 设置显示的默认值,用户输入的值也保存在value属性中 |
| value加在按钮上，是设置什么? | 设置按钮上显示的文字 |
| value加在单选/多选/下拉选框选项上,是设置什么? | 设置选中当前选项时提交的值 |
| 只读/禁用属性是什么?有什么区别? | readonly disabled 都是单值属性，都只允许看，不允许编辑，但禁用无法提交值 |
| 怎么设置单选/多选选项的默认选中? | checked单值属性 |
| 怎么设置下拉选框选项的默认选中? | selected单值属性 |
| 写单选时，必须要写的两个属性是什么? | name：将所有选项分到同一组；value：不然提交的是on |
音视频插入
音频标签<audio>
视频标签<video>
-
src= "插入资源的路径"
-
controls 显示播放控件 单值属性
-
muted 设置静音，必须设置静音才能自动播放 单值属性
-
autoplay 自动播放 单值属性
-
loop 循环播放 单值属性
图片的类型
- 最常用的图片展示格式----JPG/JPEG
- 透明图层展示格式----PNG
- 表情包常用到的格式----GIF
- 修图师常用的格式----PSD
- 打印文档常用图片格式----TIFF
- 画图工具和windows系统常用图片格式----BMP
- 谷歌新出的图片格式----WEBP
总结
- <html> - 定义 HTML 文档的根元素
- <head> - 包含文档的元数据（如字符编码、页面标题、样式、脚本等）
- <body> - 包含文档的可见内容（文本、图像、链接、表单等）
- <meta> - 提供关于 HTML 文档的元数据（如字符编码、页面描述、关键词等）
- <title> - 定义 HTML 文档的标题（显示在浏览器标签页上）
- <b> - 定义粗体文本（不强调重要性）
- <s> - 定义不再准确或相关的文本（显示为删除线）
- <i> - 定义斜体文本（通常用于术语、外语短语等）
- <u> - 定义下划线文本（通常用于拼写错误的文本或需要关注的文本）
- <mark> - 定义需要标记或高亮显示的文本
- <br> - 插入换行符（强制换行）
- <hr> - 插入水平线（用于分隔内容）
- <h1>-<h6> - 定义 HTML 标题（<h1> 最高级别，<h6> 最低级别）
- <p> - 定义段落
- <ul> - 定义无序列表（使用项目符号）
- <ol> - 定义有序列表（使用数字或字母）
- <li> - 定义列表项（用于 <ul> 或 <ol> 中）
- <span> - 定义行内容器（用于样式化行内部分文本）
- <div> - 定义块级容器（用于分组和样式化内容）
- <header> - 定义文档或章节的页眉（通常包含导航栏、标题等）
- <nav> - 定义导航链接区域
- <main> - 定义文档的主要内容（不包含重复内容，如侧边栏、页眉、页脚等）
- <footer> - 定义文档或章节的页脚（通常包含版权信息、联系信息等）
- <aside> - 定义与主要内容相关但次要的内容（如侧边栏、广告等）
- <article> - 定义独立的、自包含的内容（如博客文章、论坛帖子等）
- <img> - 插入图像
- <a> - 定义超链接（用于导航到其他页面或资源）
- <table> - 定义表格
- <tr> - 定义表格行
- <th> - 定义表格表头单元格
- <td> - 定义表格数据单元格
- <caption> - 定义表格标题
- <form> - 定义 HTML 表单（用于用户输入）
- <input> - 定义表单输入字段（文本框、密码框、复选框、单选按钮等）
- <button> - 定义可点击按钮
- <select> - 定义下拉列表
- <option> - 定义下拉列表中的选项
- <textarea> - 定义多行文本输入框
- <label> - 定义表单控件的标签（用于提高可用性）
- <audio> - 嵌入音频内容
- <video> - 嵌入视频内容