HTML复习
通过学习网课、他人笔记整理出的知识点，非原创。
vscode学习
一些快捷键：
- 生成页面骨架 ！（英文）在按Tab键/直接点
- 新建文件ctrl+N；一定要保存ctrl+S，注意移动要保存
为.html - 放大缩小ctrl+滚轮上下；
- 预览页面，鼠标右键选择“Open in Default Browser”
- VSCode工具生成骨架标签新增代码
vscode自动生成,基本不需要我们重写。
1.<!DOCTYPE> 标签
文档类型声明标签，作用就是告诉浏览器使用哪种HTML版本来显示网页。
2.lang语言
用来定义当前文档显示的语言。
en定义语言为英语
zh-CN定义语言为中文
3.charset 字符集
字符集(Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。
在标签内，可以通过 标签的charset属性来规定HTML 文档应该使用哪种字符编码。
charset常用的值有：GB2312 、BIG5 、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符.<meta charset="UTF-8" />
meta viewport的用法
通常viewport是指视窗 、视口。
浏览器上(也可能是一个app中的webview)用来显示网页的那部分区 域 。在移动端和pc端视口是不同 的 ，pc端的视口是浏览器窗口区域 ，而在移动端有三个不同的视口概念 ：布 局 视 口 、视 觉 视 口 、理 想 视 口
meta有两 属性name和http-equiv
name属 性 的 取 值
keywords (关 键 字)告 诉 搜 索 引 擎 ，该 网 页 的 关 键 字
description(网 站 内 容 描 述)用 于 告 诉 搜 索 引 擎 ，你 网 站 的 主 要 内容 。
viewport (移 动 端 的 窗 口)
robots (定义搜索 引 擎 爬 虫 的 索 引 方 式)robot s用 来 告 诉 爬 虫 哪 些 页面 需 要 索 引 ，哪 些 页 面 不 需 要 索 引
author(作 者)
generator (网 页 制 作 软 件 ）
copyright (版 权)
http-equiv有 以 下 参 数
http-equiv 相当于htt p的 文 件 头 作 用 ，它 可 以 向 浏 览 器 传 回 一 些 有用 的 信 息 ，以 帮 助 正 确 和 精 确 地 显 示 网 页 内 容
content-Type设 定 网 页 字 符 集(Html4用 法 ，不 推 荐)
Expires(期限),可 以 用 于 设 定 网 页 的 到 期 时 间 。一 旦 网 页 过 期 ，必 须到 服 务 器 上 重 新 传 输 。
Pragma(cache模 式),是 用 于 设 定 禁 止 浏 览 器 从 本 地 机 的 缓 存 中 调 阅页 面 内 容 ，设 定 后 一 旦 离 开 网 页 就 无 法 从Cache中 再 调 出
Refresh(刷 新),自动刷新并指向新页面。
cache-control（请 求 和 响 应 遵 循 的 缓 存 机 制 ）
< meta name=“viewport” content="width=device-width,initial-scale=1.0 ">
HTML初识
「HTML」(Hy per Text Mark up Language):超 文 本 标 记 语 言
「所 谓 超 文 本 ，有2层 含 义 ：」
因 为 它 可 以 加 入 图 片 、声 音 、动 画 、多 媒 体 等 内 容（超越文本限制）；不 仅 如 此 ，它 还 可 以 从 一 个 文 件 跳 转 到 另 一 个 文 件 ，与 世 界 各 地 主机 的 文 件 连 接（超级链接文本）
HTML骨架格式
<html>
<head>
<title>Title</title> 【网页头部】
</head>
<body>
【主体部分】(ps:所有内容只有写在这里面才有效)
</body>
</html>
demo1
<!--DOCTYPE：告诉浏览器我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head 网页头部-->
<head>
<!-- meta描述性标签，描述网站的一些信息 -->
<!-- meta一般用来做SEO -->
<meta charset="UTF-8">
<meta name="keywords" content="关键字:前端html">
<meta name="description" content="描述：可以学习java"
<!-- 标题标签 -->
<title> 我的第一个网页 </title>
</head>
<!--body 网页主体-->
<body>
hello！
</body>
</html>
团队约定大小写
HTML标 签 名 、类 名 、标 签 属 性 和 大 部 分 属 性 值 统 一 用 小 写
HTML元素标签分类
- 常规元素(双标签)
<head>、</head>、<body>、</body>
等成对的标签分别叫开放标签和闭合标签
- 空元素(单标签)
单独呈现的标签（空元素）如<hr/>（自闭合标签）
用/来关闭空元素
HTML标签关系
嵌套关系 父子级 包含关系
并列关系 兄弟级 并列关系
HTML注释
<!-- 注释内容 --> 【注释的快捷键Ctrl+/】
HTML常用标签
1. 排版标签（主要搭配css使用）
汇总：
-1-
标题标签<h1> </h1>
段落标签<p> </p>
换行标签<br/>
水平线标签<hr/>
-2-
字体样式标签
粗体<strong> </strong>；<b> </b> strong或b（用strong语义更强烈）
斜体<em> </em> em或i （同上）
删除线<del> </del> del或s
下划线<ins> </ins> ins或u
-3-
<div>和<span>是没有语义的，就是一个盒子，用来装内容（布局）。
<div> </div>
(division:分割、分区；一行只能放一个<div>，大盒子)
<span> </span>
(span:跨度、跨距；一行可以多个<span>，小盒子)
-4-
注释(ctrl+/)和特殊符号(& ；
--特殊符号--
空 格:
<br/>
空 格
<br/>
>(>)
<(<）
©(版权符号)
特殊符号记忆方式：&+随便一个字母去找特殊符号
2. 图像标签和路径
image
格式
<img src="" alt="" title="" width="" height="">(前两个必填)
（1）必填的
src:图片地址(推荐使用相对地址）
相对地址(…/resources/image/1.jpg);
绝对地址(从盘符开始的地址）
…/ 代表上一级目录
alt:图像的替代文字,图片加载失败比如路径不对等等，就会输出alt
（2）可略的
title:表示鼠标停留在上面显示的文字
width(宽)
height(高)
举例
<img src="../resources/image/1.jpg" alt="XX学院" title="悬停文字" width="300"height="300">
3. 超链接标签及应用
anchor
格式
<a href="path "target="目标窗口的弹出方式"> 链接文本或图像</a>
a标签
href:必填,表示要跳转到哪个页面，用于指定链接目标的url地址
target:表示窗口在哪里打开，用于指定链接页面的打开方式
_blank 在新标签中打开
_self 在自己的网页中打开
例子
<a href="4.链接标签.html#down">跳转</a>
- src 和href区别
src是引入资源的；href是跳转url的
src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。 - 注意
外部链接 需要添加 http://www.baidu.com
内部链接 直接链接内部页面名称即可 比如<a href="index.html"> 首页
如果当时没有确定链接目标，则href属性定义为“#”（href=“#”），表示该链接暂时为空链接
不仅可以创建文本还可以创建图像、表格、音频、视频等等的超链接。
- 锚链接标签
快速定位到目标内容
（1）相应id名标注跳转目标位置（找目标）
（2）<h3 id="two">第2集</h3><a href="#id名"> 链接文本</a>创建链接文本（被点击的）<a href="#two">举例 1需要一个标记<a name="top">顶部</a> 2 跳转 <a href="#top">回到顶部</a>
4. 注释标签
快捷键ctrl+/
约定：注释内容前后各一个空格字符，注释位于注释代码上面，单独一行
5. 路径
6. 特殊字符
7. XHTML
8. 写html代码注意点
表格标签
创建表格
格式
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
<table>
行 tr
列 td
(table、tr、td是创建表格的基本标签，缺一不可)
表头单元格标签th
表格标题caption
举例
<table border="1px"> 加边框border="1px"
<tr>
colspan 跨列 rowspan 跨行
<td colspan="4">1-1</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
表格属性
合并单元格
合并顺序：先上后下、先左后右
跨行合并 rowspan=“合并单元格个数”
跨列合并 colspan=“合并单元格个数”
总结表格
表格划分
举例
表格table
<table>
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">kk</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">mm</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
列表标签
列表
（1）有序列表(试卷,问答)
<ol>
<li>java</li>
<li>c++</li>
<li>前端</li>
<li>后台</li>
<li>888</li>
</ol>
（2）无序列表(导航,侧边栏)
<ul>
<li>java</li>
<li>c++</li>
<li>前端</li>
<li>后台</li>
<li>888</li>
</ul>
（3）自定义列表(公司,网站)
dl:标签
dt:列表名称
dd:列表内容
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>c++</dd>
<dd>前端</dd>
<dd>后台</dd>
<dd>888</dd>>
</dl>
无序列表
<ul></ul>中只能嵌套 <li></li>，直接在<ul></ul>标签输入其他标签或者文字是不可以的。
<li>与</li>之间相当于一个容器，可以容纳所有元素。
格式
<ul>
<li>标题</li>
<li>标题</li>
</ul>
有序列表
<ol>标签中的type属性值为排序的序列号，不添加type属性时，有序列表默认从数字1开始排序。
<ol reversed="reversed">中的reversed属性能倒序排列。
<ol start="3">中的start属性值为3，有序列表的第一个序列号从3开始
格式
<ol > <!-- <ol type="A"> -->
<li>标题</li>
<li>标题</li>
</ol>
自定义列表dl
格式
<dl>
<dt>标题1</dt>
<dd>。。</dd>
<dd>。。</dd>
...
<dt>标题2</dt>
<dd>前端</dd>
<dd>后台</dd>
...
</dl>
扩充
【媒体元素：音频和视频】
src:资源路径
controls:控制条
autoplay:自动播放
<video src="../resources/video/"controls autoplay></video>
<audio src="../resources/video/" controls autoplay></audio>
表单标签
表单：表单控件（元素）、提示信息、表单域
表单form
action:表单提交的位置,网址/请求处理地址
method:提交方式,post/get
get方式提交:可以在url(网址)中看到我们提交的信息,不安全,但高效
post:比较安全,传输大文件
文本输入框:input name="name" type="text">
type="text"文本输入框 password密码框 submit提交 reset重填
<h1>注册</h1>
<form method="get" action="1.我的第一个网页.html">
<p>名字:<input name="username" type="text""></p>
<p>密码:<input name="pass" type="password"></p>
<!--单选框
name要同样才能在一组-->
<p>性别:
<input type="radio"value="boy"name="sex">男
<input type="radio"value="girl"name="sex">女
</p>
<p>
<input name="Button" type="submit"value="提交"/>
<input name="Reset" type="reset"value="重填"/>
</p>
<!--多选框
input type="checkbox"
-->
<p>爱好:
<input type="checkbox"value="sleep"name="hobby">睡觉
<input type="checkbox"value="code"name="hobby"checked>敲代码
<!--checked 默认选中-->
<input type="checkbox"value="chat"name="hobby">聊天
</p>
<!--按钮
<input type="button">普通按钮
<input type="image">图像按钮
<input type="submit">提交按钮
<input type="reset">重置按钮
-->
<p>按钮:
<input type="button"name="bnt1"value="点击">
<!--图片按钮-->
<input type="image"src="../resources/image/1.jpg">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
<!--下拉框,列表框-->
<p>下拉框:
<select name="列表名称" >
<option value="选项的值">A</option>
<option value="选项的值">B</option>
<option value="选项的值"selected>C</option>
<!--selected 表示默认选择C-->
<option value="选项的值">D</option>
</select>
</p>
<!--文本域-->
1. input控件
格式
<input type="属性值" value="你好"">
（还有其他属性）
<input/>标签为单标签
2. label标签
3. textarea控件（文本域）
4. select下拉列表
5. form表单域
浏览器的多进程架构
2702
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
