HTML笔记
- HTML笔记
- 1.1软件分类
- 1.2C/S架构与B/S架构等
- 1.3网页相关概念及特点
- 1.4HTML注释
- 1.5标签及语法格式
- 1.6排版标签
- 1.7超链接
- 1.8表格
- 1.9插入图片
- 1.10列表
- 1.11视频
- 1.12特殊符号
- 1.13音频
- 1.14form表单
HTML笔记
1.1软件分类
系统软件（各种操作系统）、应用软件（微信、qq等）
1.2C/S架构与B/S架构等
1：C/S（client：客户端/server：服务器）、B/S（browser：浏览器/server：服务器）；服务器：为软件提供数据的设备。C/S架构特点：需要安装、偶尔更新、不跨平台、开发更具针对性。B/S架构特点：无需安装、无需更新、可跨平台、开发更具通用性。
2：运行网页的浏览器有： 谷歌(Chrome) 、 Safari 、 IE 、 火狐(Firefox) 、 欧 朋(Opera) 等。
1.3网页相关概念及特点
1。网址：我们在浏览器中输入的地址。
2：网页：浏览器所呈现的每一个页面。
3：网站：多个网页构成了一个网站。
4：网页特点：无需安装、无需更新、跨平台。
5：网页中使用语言：HTML、CSS、JavaScript；
6：HTML全程：HyperText Markup Language（超文本标记语言）。超文本：暂且简单理解为 “超级的文本”，和普通文本比，内容更丰富。标 记：文本要变成超文本，就需要用到各种标记符号。语 言：每一个标记的写法、读音、使用规则，组成了一个标记语言。
7：相关国际组织：
IETF：全称：Internet Engineering Task Force（国际互联网工程任务组），成立于1985年底，是一个权威 的互联网技术标准化组织，主要负责互联网相关技术规范的研发和制定，当前绝大多数国际互联网 技术标准均出自IETF。官网：https://www.ietf.org
W3C：全称：World Wide Web Consortium（万维网联盟），创建于1994年，是目前Web技术领域，最具影 响力的技术标准机构。共计发布了200多项技术标准和实施指南，对互联网技术的发展和应用起到 了基础性和根本性的支撑作用，官网：https://www.w3.org
WHATWF：全称：Web Hypertext Application Technology Working Group（网页超文本应用技术工作小组）成立 于2004年，是一个以推动网络HTML 5 标准为目的而成立的组织。由Opera、Mozilla基金会、苹果， 等这些浏览器厂商组成。官网：https://whatwg.org/
1.4HTML注释
1：写法
<!-- 单行注释 -->
<!--
多行注释
-->
2：特点：注释中内容会被忽视，不会呈现于页面中，但代码中可见
3：作用：对代码解释说明
1.5标签及语法格式
1：标签 又称元素，html的基本组成单位
2：分类：单标签、双标签
单标签：
双标签：
3：语法格式：
双标签
单标签：
4：html：标准结构：! + 回车可自动生成
<!--html标准格式-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
1.6排版标签
| 标签名 | 标签含义 | 单/双标签 |
|---|---|---|
| h1~h6 | 标题 | 双 |
| p | 段落 | 双 |
| div | 没有任何含义，用于整体布局（生活中的包装袋）。 | 双 |
1.7块级元素：独占一行（排版标签都是块级元素）
块级元素特点：块级元素中能写行内元素和块级元素；⽆论是否使⽤ <br/>换⾏标签，块级元素都会⾃动换⾏;块级元素的宽度、⾼度都可以改变
行内元素：不独占一行
行内元素特点：行内元素 中能写 行内元素，但不能写 块级元素;内联元素也叫⾏内元素，最主要的特点是 不换⾏ 。
1.8：<strong>标签和<b>标签的区别：⽤在⽹⻚上，默认情况下它们都是起到加粗字体的作⽤
<b> 标签：仅仅是在样式上有加粗效果，不具备HTML语义；<strong> 标签：不仅是在样式上有加粗效果，具备HTML语义，表示强调
1.9<em>标签和<i>标签的区别：⽤在⽹⻚上，默认情况下它们都是起到字体倾斜的作⽤
<em> 标签（emphasize的缩写）⽤来强调标签中的内容很重要，同时将标签中的字体显示为斜体；<i> 标签没有强调作⽤，只是在样式上起到明显的效果，将标签中的⽂字样式显示为斜体
1.7超链接
1：超链接作用：从当前页面进行跳转。可以实现：①跳转到指定页面、②跳转到指定文件（也可触发下载）、③跳转到锚点位置、④唤起指定 应用。
2：绝对路径和相对路径：
相对路径不带有盘符，通常是以HTML⽹⻚⽂件为起点，通过层级关系描述⽬标⽂件的位置 。绝对路径⼀般是指带有盘符的路径或者完整⽹络地址
3：跳转到网页：
<!-- 跳转其他网页 -->
<a href="https://www.jd.com/" target="_blank">去京东</a>
<!-- 跳转本地网页 -->
<a href="./10_HTML排版标签.html" target="_self">去看排版标签</a>
<!-- href ： 指定要跳转到的具体目标。
target ： 控制跳转时如何打开页面，常用值如下:
_self ：在本窗口打开。
_blank ：在新窗口打开。
_search：如果两个链接都设置为_search，会指向同⼀个新⻚⾯，不会另外打开新窗⼝。
id ： 元素的唯一 标识，可用于设置锚点。
name ： 元素的名字，写在 a 标签中，也能设置锚点。
-->
4：跳转到文件：
<!-- 浏览器能直接打开的文件 -->
<a href="./img/自拍.jpg">看自拍</a>
<a href="./video/电影.mp4">看电影</a>
<a href="./resource/猪.gif">看猪</a>
<a href="./resource/人.pdf">人</a>
<!-- 浏览器不能打开的文件，会自动触发下载 -->
<a href="./resource/资源.zip">资源</a>
<!-- 强制触发下载：下载一般使用这个-->
<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>
5：锚点：
设置锚点：
<!-- 第一种方式：a标签配合name属性 -->
<a name="test1"></a>
<!-- 第二种方式：其他标签配合id属性 -->
<h2 id="test2">我是一个位置</h2>
使用锚点：
<!-- 跳转到test1锚点-->
<a href="#test1">去test1锚点</a>
<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>
<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>
<!-- 刷新本页面 -->
<a href="">刷新本页面</a>
<!-- 执行一段js,如果还不知道执行什么，可以留空，javascript:; -->
<a href="javascript:alert(1);">点我弹窗</a>
<!--
1. 具有 href 属性的 a 标签是超链接，具有 name 属性的 a 标签是锚点。
2. name 和 id 都是区分大小写的，且 id 最好别是数字开头。
-->
6：唤起应用：
<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>
1.8表格
1：表格使用标签
table ：表格
caption ：表格标题
thead ：表格头部
tbody ：表格主体
tfoot ：表格注脚
tr ：每一行
th 、 td ：每一个单元格（备注：表格头部中用 th ，表格主体、表格脚注中用： td ）
<table>
<caption>表格标题</caption>
<!-- 表头部分 -->
<thead>
<!-- ⾏ -->
<tr>
<!-- 表头中的单元格 -->
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<!-- 表格主要内容部分 -->
<tbody>
<!-- ⾏ -->
<tr>
<!-- 普通单元格 -->
<td></td>
<td></td>
<td></td>
</tr>
<!-- ⾏ -->
<tr>
<!-- 普通单元格 -->
<td></td>
<td></td>
<td></td>
</tr>
<!-- ⾏ -->
<tr>
<!-- 普通单元格 -->
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
2：常用属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ButJoSKc-1690788172142)(/…/1689431586144.png)]
3：跨行跨列
rowspan ：指定要跨的行数。
colspan ：指定要跨的列数。
3⾏3列表格
<table border="1" cellspacing="0" width="300" height="180">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
合并第1⾏的第2列和第3列
合并第1列的第2⾏和第3⾏
<table border="1" cellspacing="0" width="300" height="180">
<!-- 1. 跨列合并：合并第1⾏的第2列和第3列 -->
<tr>
<td></td>
<td colspan="2"></td> <!-- 根据需求，找到第1⾏第2列，写上colsp
an="2",并注释掉第3列 -->
<!-- <td></td> -->
</tr>
<!-- 2.跨⾏合并：合并第1列的第2⾏和第3⾏ -->
<tr>
<td rowspan="2"></td> <!-- 根据需求找到第1列的第⼆⾏,写上rowsp
an="2"，同时注释掉第1列第3⾏ -->
<td></td>
<td></td>
</tr>
<tr>
<!-- <td></td> -->
<td></td>
<td></td>
</tr>
</table>
1.9插入图片
1：常用属性及格式：
<img src="../img/html5.png" alt="图⽚⾛丢了~">
<!--
src ：图片路径（又称：图片地址）—— 图片的具体位置
alt ：图片描述 ;图片因为一些原因无法加载出来的话就会显示alt中的属性
width ：图片宽度，单位是像素，例如： 200px 或 200
height ：图片高度， 单位是像素，例如： 200px 或 200
title :当鼠标移入图片上方时显示title中的属性
-->
2：常见图片格式：
jpg 格式：
概述：扩展名为 .jpg 或 .jpeg ，是一种有损的压缩格式（把肉眼不容易观察出来的细节 丢弃了）。
主要特点：支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。
使用场景：对图片细节没有极高要求的场景，例如：网站的产品宣传图等 。—— 该格式网 页中很常见。
png 格式：
概述：扩展名为 .png ，是一种无损的压缩格式，能够更高质量的保存图片。
主要特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。
使用场景：①想让图片有透明背景；②想更高质量的呈现图片；例如 ：公司logo图、重要配 图等。
bmp 格式：
概述：扩展名为 .bmp ，不进行压缩的一种格式，在最大程度上保留图片更多的细节。
主要特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动 态图。
使用场景：对图片细节要求极高的场景，例如：一些大型游戏中的图片 。（网页中很少使 用）
gif 格式：
概述：扩展名为 .gif ，仅支持256种颜色，色彩呈现不是很完整。
主要特点：支持的颜色较少、支持简单透明背景、支持动态图。
使用场景：网页中的动态图片。
webp 格式：
概述：扩展名为 .webp ，谷歌推出的一种格式，专门用来在网页中呈现图片。
主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。
使用场景：网页中的各种图片。
base64 格式
本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。
原理：把图片进行 base64 编码，形成一串文本。
如何生成：靠一些工具或网站。
如何使用：直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。
使用场景：一些较小的图片，或者需要和网页一起加载的图片。
1.10列表
1：有序列表：
<h2>要把大象放冰箱总共分几步</h2>
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>
2：无序列表
<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>上海</li>
<li>西安</li>
<li>武汉</li>
</ul>
在ul和li中间不能嵌套其他标签
去掉前面圆点：list-style:none
3：嵌套列表：
<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>
<span>上海</span>
<ul>
<li>外滩</li>
<li>杜莎夫人蜡像馆</li>
<li>
<a href="https://www.opg.cn/">东方明珠</a>
</li>
<li>迪士尼乐园</li>
</ul>
</li>
<li>西安</li>
<li>武汉</li>
</ul>
4：自定义列表
<h2>如何高效的学习？</h2>
<dl>
<dt>做好笔记</dt>
<dd>笔记是我们以后复习的一个抓手</dd>
<dd>笔记可以是电子版，也可以是纸质版</dd>
<dt>多加练习</dt>
<dd>只有敲出来的代码，才是自己的</dd>
<dt>别怕出错</dt>
<dd>错很正常，改正后并记住，就是经验</dd>
</dl>
总结：
| 列表分类 | 说明 |
|---|---|
| 有序列表 | <ol> 表示有序列表， <li> 表示列表中的每⼀项，默认使⽤阿拉伯数字编 号。 |
| 无序列表 | <ul> 表示⽆序列表， <li> 表示列表中的每⼀项，默认使⽤ ● 符号作为作 |
| 自定义列表 | <dl> 表示定义列表， <dt> 表示定义术语、<dd> 表示定义描述。⼀般情况下，每个 <dt> 搭配⼀个 <dd> ，⼀个 <dl> 可以包含多对 <dt> 和 <dd> 。 |
1.11视频
1：语法格式
<video src="../video/402890330.mp4"poster="../img/loadingfailed.webp" (controls autoplay loop)></video>
<!--
src属性 ：⽤于指定视频的地址
poster属性 ：⽤于指定⼀张图⽚作为视频的封⾯图，并且在当前视频数据⽆效时也可以显示该预览图
controls属性 :⽤于向浏览器指明⻚⾯制作者没有使⽤脚本⽣成播放控制器，需要浏览器启⽤本身的播放控制栏;控制栏需包括播放暂停控制，播放进度控制，⾳量控制等等
autoplay属性:Autoplay属性 ⽤于设置视频是否⾃动播放，是⼀个布尔属性;当出现时表示⾃动播放，去掉时表示不⾃动播放
loop属性:loop属性 ⽤于指定视频是否循环播放，也是⼀个布尔属性
-->
1.12特殊符号
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lpCviHfS-1690788172144)(/…/1689434038816.png)]
1.13音频
<audio src="../audio/mojito.mp4" controls autoplay loop>当前浏览器不⽀持audio标签</audio>
<!--
src ：指定⾳频的播放路径
autoplay ：⾳频会尽快⾃动播放，不会等到整个⾳频下载完成
controls ：浏览器会提供包括声⾳、播放进度、播放暂停的控制⾯板（不同浏览器不⼀致），⽤户可以控制⾳频播放
loop ：循环播放⾳频
-->
1.14form表单
1.input表单控件
2.text文本框:
⽤户账号：<input type="text" name="username" placeholder="请输⼊账号" maxlength="10" size="25">
<!--
placeholder:设置⽂本框中的提示信息，当在输⼊框中输⼊内容时，提示信息会被覆盖
maxlength:设置输⼊框中的最⼤输⼊字符数
value: 设置输⼊框中的默认值
disabled :禁止使用该选项
required :必填，如果值为空，则浏览器会⾃动弹出提示
readonly :只读，添加readonly属性的输⼊框中内容⽆法被改变
name: 表单元素的名字，是每个表单元素都有的属性值，主要为了给后台传递数据
-->
3.password:
⽤户密码：<input type="password" name="pwd" placeholder="请输⼊密码" maxlength="6">
4.email:
会⾃动验证 email 输⼊域值的合法性
⽤户邮箱：<input type="email" placeholder="请输⼊您的邮箱" name="useremail"/>
5.url:
⾃动验证url输⼊格式
⽹址：<input type="url" placeholder="请输⼊⽹址">
6.number:
于应该包含数值的输⼊域
价格：<input type="number" value="4" step="2" max="20" min="2">
<!--
value 属性：number框中的默认值
max 属性：规定允许的最⼤值
min 属性：规定允许的最⼩值
step 属性：规定数字变化的幅度，默认值是1
-->
7.search:
⽤于搜索域，⽐如站点搜索或 Google 搜索(有一个清空的” × “)
搜索：<input type="search" name="search" placeholder="请输⼊要搜索的内容">
8.<datalist>元素:
所在城市：
<input list="city">
<datalist id="city">
<option value="⻄安市">Xi'An</option>
<option value="延安市">YanAn</option>
<option value="安康市">AnKang</option>
<option value="汉中市">HanZhong</option>
</datalist>
<!--
<datalist> 元素规定输⼊域的选项列表（以下拉框的形式存在），它是不可⻅的
<datalist> 属性规定 form 或 input 域应该拥有⾃动完成功能。当⽤户在⾃动完成域中开始输⼊时，浏览器应该在该域中显示填写的选项
使⽤ <input> 元素的列表属性与 <datalist> 元素绑定，如不绑定则⽆法显示
-->
9.hidden:
代表隐藏域，隐藏域在⻚⾯中对于⽤户是不可⻅的，通常⽤来传递参数；⽤户在点击 按钮将表单数据发送到后台时，隐藏域的数据也会⼀起被发送到服务器上
<form action="https://www.baidu.com" method="get">
<input type="hidden" name="userid" value="0001">
账号：<input type="text" name="username"><br><br>
密码：<input type="password" name="userpwd"><br><br>
<input type="submit">
</form>
10.radio单选:
定义表单的单选框选项
⽤户性别：
<input type="radio" name="gender" value="man"checked="checked">男
<input type="radio" name="gender" value="woman">⼥
<!--
name 属性:代表元素的名字，性别单选按钮中必须拥有相同的 name 才能多选⼀；要想把表单控件的数据发送到后台服务器，必须要设置 name 属性； name 属性可以重复
value 属性:代表控件中携带的值，未设置 value 值时会显示 on ，数据不会传递到后台
checked 属性:表示默认选中的选项，该属性中属性值可以省略不写
-->
11.checkbox复选框:
复选框可以选取⼀个或多个选项
⽤户爱好：
<input type="checkbox" name="habbit" value="lanqiu">篮球
<input type="checkbox" name="habbit" value="zuqiu" checked>⾜球
<input type="checkbox" name="habbit" value="yumaoqiu">⽻⽑球
12.file⽂件上传:
⽤于在⽹⻚中上传⽂件
上传头像：<input type="file" name="file">
13.color:
⽤在input字段主要⽤于选取颜⾊
颜⾊：<input type="color" name="color">
14.time:
允许选择⼀个时间
体检时间：<input type="time">
16.date:
允许你从⼀个⽇期选择器选择⼀个⽇期
体检⽇期：<input type="date">
17.datetime-local:
允许你选择⼀个⽇期和时间 (⽆时区)
⽇期时间：<input type="datetime-local">
19.week:
允许选择周和年
体检星期：<input type="week">
20.month:
允许选择⼀个⽉份
体检⽉份：<input type="month">
21.<select>元素：
⽤来定义下拉列表
所在省份：
<select name="sheng">
<option value="ShanXi">陕⻄省</option>
<option value="HeNan">河南省</option>
<option value="YunNan" selected="selected">云南省</option>
<option value="GuiZhou">贵州省</option>
</select>
22.<textarea>元素：
表多⾏⽂本框，⼜叫做⽂本域
<textarea cols="30" rows="10" placeholder="请写下⼀段⾃我介绍吧~"></textarea>
<!--
cols 属性⽤来指定每⾏可以显示的字符数，也就是⽂本域的可⻅宽度；如果内容超出⽂本域宽度，会⾃动换⾏显示
rows 属性⽤来设置⽂本域的可⻅⾏数，也就是⽂本域的⾼度。当⽂本内容超出设置⾼度时，会出现纵向滚动条，拖动滚动条可以看到全部内容
⽂本域中也有 placeholder 属性，⽤来显示⽂本域中的提示信息
与其他 <input> 标签不同， <textarea> 是双标签，它包含起始标签和结束标签，⽂本内容需
-->
23.按钮元素
1.submit:提交按钮
<input type="submit" value="登录">
<!--
submit: 代表该按钮是带有提交功能的按钮
value 属性:可以设置按钮上要显示的⽂字
-->
2.button:普通按钮
<input type="button" value="登录">
3.<button>标签中的submit
<button type="submit">登录</button>
4.<button>标签中的button类型
<button type="button">登录</button>
5.reset重置按钮
<input type="reset">
<button type="reset">button标签中的重置</button>
<!--
reset: 重置按钮⽤于清除当前所在form表单中填写的所有内容
<input> 标签中的 reset 类型不需要设置⽂字，默认“重置”⼆字
<button> 标签中的 reset 类型需要设置⽂字，如果不设置则不显示任何⽂字
-->
5.<form>标签
<form action="URL" method="get/post">
表单中的其他标签
</form>
<form action="https://www.baidu.com/s" target="_blank" method="get">
<input type="text" name="wd">
<button>去百度搜索</button>
</form>
<!--
action ：用于指定表单的提交地址。
target ：用于控制表单提交后，如何打开页面，常用值如下：
_self ：在本窗口打开。
_blank ：在新窗口打开。
method ：表示使⽤哪个⽅式提交数据，包括 GET 和 POST 两种⽅式，它们两者的区别如下：
GET：⽤户点击提交按钮后，提交的信息会被显示在⻚⾯的地址栏中。⼀般情况下，GET 提交⽅式中不建议包含密码，因为密码被提交到地址栏，不安全
POST：如果表单包含密码这种敏感信息，建议使⽤ POST ⽅式进⾏提交，这样数据会传送到后台，不显示在地址栏中，相对安全
-->
6.<label>标签:⽤于绑定⼀个表单元素，当点击 <label> 标签内的⽂本时，浏览器会⾃动将光标
转到对应的表单元素上，⽤于增加⽤户体检
<form action="http://www.apesource.com">
登录邮箱：<input type="email" /><br><br>
<label for="username">登录账号：</label><input id="username"/>
</form>
3878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
