基础知识了解
什么是网页
网页本质就是HTML文件，由图片、文字、音频、视频组成。
什么是HTML
HTML译为超文本标记语言，用来制作网页的一种标签语言，自己有对应的标签，文件后缀为.HTML。
什么是浏览器
1.国际常用：IE、谷歌Chrome、Edge、苹果Safar、欧朋OPera. 火狐。
谷歌最大，前端专用，使用的是webkit分支的Blink内核，非常好用，属于二次开发的，借用别 人的好处，出生于2008年。
2.浏览器中的浏览器内核
浏览器内核的作用：用来读取内容，整理信息。
什么是Web标准
是由W3C（万维网联盟）标准组成，包括结构HTML、表现CSS、行为JS三部分组成。
作用：在使用不同的浏览器下保证网页内容正常统一展示，不乱不错。
HTML知识
一、html语法规则
-
所有的标签都要包裹在一对尖扣号中 “< > ”.
-
大部分都要标签都要成对出现，成对出现的标签称为 “双标签”： < 开始标签 > < /结束标签 >
-
少部分没有结束标签的称为“单标签”：< 单标签 / >
-
标签关系分为：包含关系（父子关系） 和 并列关系（兄弟关系）
二、 HTML文档结构基本组成与标签关系
<HTML> // 最大的标签称为“根标签” 与 <head><tile><body> 标签为包含关系，是父亲其他是儿子关系
<head> // 文档头部 与<HTML>是包含关系,与<body>标签是并列关系，
<tile>文档标题是我</tile> // 标题标签 与<head>标签是包含关系
</head>
<body> // 文档的主体 与<head>标签是并列关系，与<HTML>是包含关系
我是整个文档的主体
</body>
</HTML>
三、关于vscode自动生成 HTML文档结构 的说明
快捷输入： ！+ 回车键 即可
<!DOCTYPE html> <!--声明为HTML5文档 文档类型声明标签，告诉浏览器用那种HTML版本进行编写显示网页的-->
<!--不属于HTML标签，要写在HTML文档最最最顶端-->
<html lang="en"> <!--当前文档显示语言，告诉浏览器或搜索引擎以哪种语言展示网页-->
<head> <!--定义了HTML文档的开头部分.它们之间的内容不会在浏览器的文档窗口显示.包含了文档的元(meta)数据-->
<meta charset="UTF-8"> <!--使用charset字符集和UTF-8万国码声明编码，全国通用不会产生乱码-->
<!--设置GBK为默认编码，则你需要设置为 <meta charset="gbk">-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--告诉IE以最高级模式渲染文档-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--移动端适配-->
<title>css样式优先级</title> <!--定义了网页标题,在浏览器标题栏显示-->
</head>
<body> <!--文档的主体,与<head>标签是并列关系，与<HTML>是包含关系-->
我是整个文档的主体
</body>
</html>
四、HTML常用标签
标签的语义就是标签的含义，用来干什么的，就是让页面结构更清晰的。
0.head内常用标签
<title></title> 定义网页标题
<style></style> 定义内部样式表
script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件
<meta/> 定义网页原信息
<base/> 页面中所有链接默认的链接目标地址
-
Meta标签介绍：
-
元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
-
标签位于文档的头部，不包含任何内容。
-
提供的信息是用户不可见的。
-
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
2.name属性:主要用于描述wangye,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的.–>
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">
base定义了所有链接的URL,使用 定义页面中所有链接默认的链接目标地址。
<base href="https://www.runoob.com/images/" target="_blank">
1.标题标签
当作标题使用的，依据重要递减。 特点： 文字加粗、独占一行、从重到轻。
<h1>一级标题我最大，只能有我自己，利于搜索引擎优化 </h1>
<h2> 二级标题 </h2>
<h3> 三级标题 </h3>
<h4> 四级标题 </h4>
<h5> 五级标题 </h5>
<h6> 六级标题 </h6>
2.段落标签
把文本分成若干份。 特点： 会自动换行、段与段之间有较大的空隙、每行为独占一行或多行在一起称为一段。
<p>这里写内容</p>
3.图像标签
展示图片。 特点：是单标签、其中src属性是必填属性，共6个属性，属性以 [ 键值对 ]形式：属性=“属性值” 即key=“value”
<img src="imgs/01.jpg" alt="图片未显示用我来提示" title="我是图片的标题" width="100" height="100" border="20"/>
所有属性都要写在img后面，6个属性不分先后顺序，多个属性之间用空格隔开，属性是以键值对形式：key=“value” 即：属性=“属性值 ”
▶︎ 属性具体细化为：
- src=“图片名称和图片路径”
- alt=“替换文本” 图像无法显示的时候使用文字代替
- title="提示文本“ 鼠标悬停在图片上显示的文字
- width=“图片宽度” 指定图片的宽度，不指定高度的时候，宽度会等比缩放，指定宽度不恰当时图片会变形，故只设置一个值即可
- height=“图片高度” 指定图片的高度，不指定款度的时候，高度会等比缩放，指定高度不恰当时图片会变形，故只设置一个值即可
- border=“图片边框粗细” 不需要加单位p x , 该属性文字会显示白色，不常用，在CSS中设置更好。
3-1 图像标签和路径
查找原则：以图片相对于HTML位置找
目 录：文件夹目录：最外且包裹根目录的
根目录: 与其他文件夹同级的，在文件夹目录中的
路 径：绝对路径 ：直接从电脑的盘符开始，在网络地址中图片存在绝对路径也是属于绝对路径的。 符号 \ 这边
相对路径：又分为 同级 / 上级 / 下级 符号 / 这边
同级：直接和html或j p g同级
上级：…/文件夹目录/文件名
下级：文件夹/文件名
4.换行标签
强制换行 特点：单标签、 会另起一行、行与行之间的间距很紧密。
<br />
5.文本格式化标签
突出文字重要性。特点：都是双标签
<strong></strong> 加粗
<em></em> 倾斜
<del></del> 删除
<ins></ins> 下划线
6.水平线标签
一条横线贯通整个页面。 特点：单标签
<hr />
7.音频标签
播放音乐。 特点：谷歌浏览器禁用自动播放音乐，需要调出播放控件方可。
<audio src="音频路径" controls loop></audio>**
▶︎ 属性具体细化为：
- src=“音频路径”
- autoplay 自动播放，但是谷歌浏览器禁用自动播放功能需要调用controls属性，完成自动播放。
- controls 调用播放控件。
- loop 循环播放
- 当属性🟰属性值的时候，就写属性就行。例：controls=“controls”
8.视频标签
播放视频。 特点：谷歌浏览器禁用自动播放音乐，需要调出播放控件方可
<video src="视频路径" controls loop muted ></video>
▶︎ 属性具体细化为：
- src=“视频路径”
- autoplay 自动播放，但是谷歌浏览器禁用自动播放功能需要调用controls属性，完成自动播放。
- controls 调用播放控件。
- loop 循环播放
- muted 在谷歌浏览器上自动静音播放
- 当属性🟰属性值的时候，就写属性就行。例：controls=“controls”
9.div标签
无语义，指的就是大盒子 布局网页的。 特点：一行只能用一个盒子，独占一行。
<div> 这里可以包含任何标签 </div>
10.span标签
无语义，指的就是小盒子 布局网页的。 特点：一行内可以有多个，横着水平显示。
<span> 这里可以包含任何标签 </span>
11.超链接标签
跳转页面的 。 特点：双标签，有2个属性 ，href为必填属性，target属性默认值为self。
<a href="跳转的目标" target="打开窗口的方式"> 跳转需要的文字内容 </a>
► href属性代表=“跳转的目标”
target属性代表=“打开窗口的方式”：打开窗口的方式有2个值可选：1是self代表当前窗口打开，2是_blank代表新窗口打开。
href属性的属性值将链接分类为6种：
1.外部链接： 在当前去别的地址，必须以http：//开始。 ✍️herf="http：//www.baidu.com "
2.内部链接： 网站内部页面之间的相互链接。 ✍️ 直接写内部链接的文件名字即可 , herf=" home.html"
3.空链接： 不确定跳转目标时,用 # 代替。 ✍️ herf=“#”
4.下载链接：链接的是一个文件或者压缩包，点击后会自动下载 ✍️ herf=“img.zip”
5.网页元素链接：可以包裹 文字、图片、视频、音频等标签当作链接进行跳转。
6.锚点链接：快速定位到页面中的某个位置。
2⃣️个步骤：
01:在链接文本的href属性中设置属性值为#文件名， <a href="#go">去指定的位置</a>
02:找到要跳到位置的标签，在标签中添加一个 ID属性 = 刚才的名字， <h2 id="go">就跳到我这个位置来></h2>
► HTML 链接- id 属性
id 属性可用于创建一个 HTML 文档书签。
提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。
► 实例
在HTML文档中插入ID:
<a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到"有用的提示部分(id=“tips”）"：
<a href="#tips">访问有用的提示部分</a>
或者，从另一个页面创建一个链接到"有用的提示部分(id=“tips”）"：
<a href="https://www.runoob.com/html/html-links.html#tips"> 访问有用的提示部分</a>
注释： 请始终将正斜杠添加到子文件夹。假如这样书写链接：href=“https://www.runoob.com/html”，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=“https://www.runoob.com/html/”。
12.特殊字符
13.HTML注释
vscode快捷键：ctrl+/ 行注释。 < !-- --> ，只给程序员自己看，代码不会显示到网页中 .。
14.表格标签
表格用于显示和展示数据的
【 01.表格的基本语法 】
<table> //定义表格的标签
<tr> //表格中的每一行，必须包含在<table>标签内。
<td> 单元格 </td> //表格中每一行里的单元格，必须包含在<tr>标签内
</tr>
</table>
【 02.表格的标签 】
<table> //定义表格标签
<caption> // 表格的大标题
<h3>表格的大标题</h3>
</caption>
<thead> //表格头部标签
<tr> //行标签
<th> 1 </th> //表头单元格
<th> 2 </th>
</tr>
</thead>
<tbody> //表格主体
<tr>
<td> 单元格 </td>
<td> 单元格 </td>
</tr>
</tbody>
</table>
【 03.表格属性 】
align —— 表格对齐方式 left center right
border ——表格边框 1 或 " "
cellpadding ——单元边与内容之间的空白 默认1像素。
cellspacing—— 单元格与单元格之间的空白 默认2像素。
width—— 表格宽度 单位为px 或 %
【 04.合并单元格 】
三要素：
1.搞清楚跨行(垂直方向) 跨列(水平方向)
2.找到合并的单元格
3.在第一个单元格上跨行 rowspan=“合并的数量” 跨列 colspan=“合并的数量” 不要的单元格 删除掉(注释掉)
16.列表 标签
列表是用来布局的。
特点：整齐、整洁、有序。
分三类： 无序列表 / 有序列表 / 自定义列表
无序列表 <ul> <li></li> </ul>
特点：无顺序、并列的、ul只能嵌套li,但li可以潜逃任何标签，有自己的样式，实际中使用c s s设置样式。
有序列表 <ol> <li></li> </ol>
特点：有顺序、ol只能嵌套li,但li可以潜逃任何标签，有自己的样式，实际中使用c s s设置样式。
自定义列表 <dl> <dt></dt> <dd></dd> </dl>
特点：dl只能包含 dt和dd , dt和dd个数没有限制，一个d t对应多个d d可以放任何标签。
17.表单标签
HTML 表单用于收集用户的输入信息。
将表单域区域的内，用户收集到的信息发送到 Web 服务器。
【 表单的组成 】
由 表单域 表单元素（控件 ） 提示信息 三部分组成。
- 表单域
就是包含表单元素的区域。
<form> </form>表单域
●使用<form>标签包裹内的表单元素会提交给服务器。
●name是用来给表单元素起名称的,区分不同的表单元素，每个表单元素都应有自己对应的name属性。
● value 的值 要传到服务器上去的
●action 收集的信息提交给那个文件处理
<form action="1.php">
姓名: <input type="text" name="username">
<br><br>
密码: <input type="password" name="pwd">
<br><br>
性别: <input type="radio" name="sex" value="man"> 男
<input type="radio" name="sex" value="women"> 女
<br><br>
<input type="submit" value="提交按钮">
</form>
表单元素
元素分三类： input输入 ｜ select下拉菜单 ｜ textarea文本域
1. ● <input type=" ” name=" " > 收集用户信息的。
有type| name | valve | checked | max length ｜ label 属性，input是个单标签。
● type属性有10个属性值
◦ text 用户输入文本框的，默认20个字符。
◦ password 用户输入密码框，默认字符被掩码。
◦ placeholder 占位符，提示用户输入内容的文本。
◦ radio 单选按钮。
◦ checkbok 多选按钮，属性值：checked 默认选中。
◦ submit 提交按钮，把表单域form中表单元素里面的值提交给后台服务器。
同时可以通过value属性设置 提交按钮的名字。
◦ reset 重置按钮，点击后恢复表单默认值。
◦ button 普通按钮，配合j s的点击事件使用 。
◦ file 文件上传 属性值：multiple多文件选择 。
◦ hidden 隐藏输入字段的。
◦ image 图像格式的提交按钮。
● name属性 表示input表单元素的名字，使用多选或者单选元素时所以的name的属性值要统一，才可以实现多选一，属性值用户自定义，value值可以不相同（只在单选和多选值name值要一致）。
● value属性表示input表单元素的默认值， 属性值用户自定义（只在文本框中有值）,要传到服务器上的。
● checked属性 表示input表单元素首次加载默认选中，属性值只有一个为checked
● maxlength属性 表示输入字段最大长度，属性值必须为正整数，用户最多输入几个字符。
● label标注标签，不属于表单标签，但是常和input标签一起使用，会扩大点击范围浏览器会自动对焦，增强用户体验。
使用方法①：
1.将文字使用<label for="xx ” > 标签包裹，并添加 for属性=“ 元素名称”
2.在表单标签上添加id属性 ，添加 ID= ‘’ 刚刚的x x ‘’
使用方法②：
1. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
2. 需要把label标签的for属性删除即可
总结：
<!--方法一：-->
<label for=“sex”> 男 </label>
<input type="radio" name="sex" id="sex" />
<!--方法二：-->
<label>
<input type="radio"/>
</label>
- select标签在网页中提供多个选择项的下拉菜单表单控件，是个双标签。
代码演示：
<form>
<select>
<option>上海</option>
<option selected=“selected” >北京</option>
<option>深圳</option>
</select>
</form>
使用规则：
- select标签中至少包含一个标签
- 在option标签中添加 属性 selected=“selected” 表示默认选中
- 要包含在form表单域中
3.textarea文本域在网页中提供可输入多行文本的表单控件，常用做留言板等
有两个属性 cols=“一行字内的个数”与rows=“行数”
也要包含在form表单域中
代码演示：
<form>
<textarea cols="100" rows="10">我是默认的提示文字信息</textarea>
</form>
使用规则：
- 右下角可以拖拽改变大小
- 实际开发时针对于样式效果推荐用CSS设置
163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
