【大数据平台开发】【Web前端】002HTML基础
文章目录
一. HTML概述
1.1 HTML概念
- HTML(HyperText MarkUp Language)： 超文本标记语言。
- 不区分大小写。
1.2 标签、元素、属性
- 标签 ： 以尖括号包围，例：
<title>，通常成对出现，也有单标签，如：<img>。 - 元素 ： 标签+内容， 例：
<title>百度一下，你就知道</title> - 属性 ： 标签中还有属性，如：
<img src = 'logo.png'>，一个标签可以有多个属性，且不同属性间的顺序没有硬性要求。
1.3 标签嵌套
- 以缩进来区分父、子元素。
- HTML DOM树：用于表征标签结构，它对JS的操作有很关键的作用。
二. HTML的文件结构
2.1 HTML5的骨架结构
- 网页是存在固定的骨架结构的，需要通过HTML标签进行描述。
<html>
<head>
<title>网页标题</title>
...
</head>
<body>
网页的主体内容
...
</body>
</html>
- 头部(head)： 记录浏览器所需信息。
- 主体(body)： 网页中包含的具体内容。
2.2 用VScode编辑网页文件
- 打开VScode以及相应的文件夹；
- 新建一个HTML文件；
- 下指令，让VScode生成HTML骨架，输入" ! " ， 然后回车，即可；
- 右键选择open in default browers 或 Alt + B，即可在浏览器中打开该文件。（需要预先安装open in brower插件）
- 注意： VScode如何设置默认浏览器 以及 Open browser failed! 如何解决？都可以通过设置默认浏览器来解决。
- 在扩展页面进入open in brower插件的设置界面
- 填写默认浏览器（Google Chrome/Firefox/）
2.3 头部（head）中的一些细节内容
- 页面定时跳转：
- 浏览网页时经常会看到一些有欢迎信息的界面，经过一段时间后，页面会自动跳转。
- 可以利用meta标签的http-equiv属性来实现，如
<meta http-equiv="refresh" content="5;url=网址名1">，这表示打开该网页5秒后会自动刷新并跳转到网址1。 - 当然，也可以只刷新不跳转，如
<meta http-equiv="refresh" content="5">，即每5秒刷新一次。
- 网页编码方式：
- 网页的字符编码方式是可以选择的。
- 可以利用meta标签的charset属性来实现，如
<meta charset='UTF-8'>，这表示网页将采用UTF-8的编码方式。 - 一般是推荐使用UTF-8的，但无论使用什么，一定要确保源文件的编码方式与浏览器的解码方式相同，否则会出现乱码的情况。
三. HTML基本标签1
3.1 标题标签 h1~h6
3.2 段落标签 p
- 自动换行，自动忽略多个连续的空格、空行。
- 想多打空格就要借助特殊字符，详情参考常见的特殊字符。
3.3 段内换行 br
- 单标签
3.4 预留格式 pre
- 可以保留输入的格式，也就是说另一种打多空格、多行的方法。
3.5 段内分组 span
- 组合行内元素，默认不换行，用处是方便CSS格式化。
3.6 水平线 hr
- 单标签
3.7 注释 <!-- -->
3.8 标签的属性的一点点说明
- 任何标签的属性可以写在开始标签的内部；
- 标签上可以同时存在多个属性；
- 标签名与属性之间，属性与属性之间必须用空格隔开；
- 属性间没有顺序之分；
四. HTML基本标签2——超链接 a
- 超链接
<a href="目标网页地址" target='_blank'>目标网页描述</a> - href属性指向目标网址，如果网站开发初期不知道跳转到哪里好，不妨给href赋值 # （空链接）。
- target属性： 目标网页的打开形式。_self：默认值，在当前窗口跳转（覆盖原网页） ；_blank： 在新窗口中跳转（保留原网页）。
- a标签默认不换行。
五. HTML基本标签3
5.1 图像标签 img
5.1.1 图像格式
- 常见的图像格式：JPG、GIF、PNG，其中JPG色彩丰富、有损压缩。GIF、PNG支持背景透明。
5.1.2 图像标签 img
- 单标签，默认不换行。
- 属性src：指示图像的来源。
- 属性alt： 指定加载失败时的代替文本。
- 属性title： 提示文本，当用户鼠标悬停时才显示的文本；title不止可以应用于图片标签，还可以用于其它标签。
- 属性width：宽度（数字）
- 属性height：高度（数字），注意如果只设置width或height中的一个，则图像会按原比例缩放，但如果同时设置两个 ，图像可能会变形。
- 小知识：网页加载一个较大的图片时，往往以隔行扫描的形式进行加载，这样开始看起来图片有些模糊，然后一点点添加细节，直到图像完全显现。
5.1.3 绝对路径、相对路径
- 有绝对路径与相对路径之分，一般推荐使用相对路径。
- “ …/… ” 表示上级目录的上级目录。
5.2 音频标签 audio
- src: 音频路径
- controls ： 显示播放的控件
- autoplay ： 自动播放（部分浏览器不支持）
- loop ： 循环播放
5.3 视频标签 video
- src: 视频路径
- controls ： 显示播放的控件
- autoplay ： 自动播放（谷歌浏览器中需配合muted实现静音播放）
- loop ： 循环播放
六. HTML基本标签4
6.1 区域 div
- 将元素组成单独的结构，自带换行效果。
- 可以通过属性设定样式，但是不常用，更多的是用CSS来实现各种样式。
6.2 列表 ul ol li
6.2.1 无序列表
- ul：无序列表
- li：列表项
- 其中，
<ul>里只能有<li>，但<li>里啥都可以有，甚至是<ul>。
6.2.2 建立有序列表
- ol：有序列表
- li：列表项
- 总体上与无序列表很像，只是多了序号罢了
6.3 自定义列表 dl dt dd
- 代码结构
<dl>
<dt>自定义列表主题</dt>
<dd>列表元素</dd>
<dd>列表元素</dd>
<dd>列表元素</dd>
<dd>列表元素</dd>
</dl>
6.4 表格 table tr td th
6.4.1 表格标签
- table： 表格声明
- tr： 表格行
- td： 表格
- th： 表头格
- caption ： 表格大标题 ，默认在表格整体顶部居中位置显示。
- 注意点 ： 标签的嵌套关系 ： table-> tr-> td
- 注意点 ： caption标签书写在table标签内部 ， th标签书写在tr标签内部（用于替换td标签）。
6.4.2 表格的结构标签（了解）
- 场景：让表格的内容结构分组， 突出表格的不同部分（头部、主体、底部），使语义更加清新。
- thead ： 表格头部
- tbody ： 表格主体
- tfoot ： 表格底部
- 注意点 ： 表格结构标签内部用于包裹tr标签 ， 表格的结构标签可以省略
6.4.3 合并单元格（属性）
- 场景 ： 将水平或垂直多个单元格合并成一个单元格。（跨行合并、跨列合并）
- 通过左上原则，确定保留谁删除谁
- 上下合并，只保留最上的，删除其他的
- 左右合并，只保留最左的，删除其他的
- 给保留的单元格设置 ： 跨行合并或跨列合并
- rowspan ： 属性值为合并单元格个数 ， 跨行合并，垂直合并
- colspan ： 属性值为合并单元格个数 ， 跨列合并，水平合并
- 注意点 ： 只有同一结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead，tbody，tfoot）
七. HTML基本标签——表单
7.1 表单域 form
- 用于标识出表单区域范围，其内部包含表单元素。
- 表单用于收集信息。
- 属性action： 指示收集到的信息提交到何处。
7.2 表单标签 input
- input： 通过type属性值的不同 ， 展示不同效果。
- 单标签。
- type属性值 ：
- text ： 文本框， 用于输入单行文本
- password ： 密码框， 用于输入密码
- radio ： 单选框， 用于多选一
- checkbox ：多选框 ， 用于多选多
- file ： 文件选择，用于之后上传文件
- submit ： 提交按钮 ， 用于提交数据给后端服务器
- reset ： 重置按钮 ， 用于重置，恢复表单默认值
- button ： 普通按钮 ， 默认无功能 ， 之后配合js添加功能
7.3 占位符（提示信息）
- 场景 ： 在网页中显示输入单行文件的表单控件
- type属性值 ： text
- 常用属性名 ：placeholder 占位符，提示用户输入的文本内容。
7.4 单选框
- 场景： 在网页中显示多选一的单选表单控件。
- type属性值 ： radio
- 常用属性 ：
- name 分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中。
- value 是被提交到后台的信息
- checked 默认选中。
- 注意点 ： name属性对于单选框有分组功能，有相同name属性值的单选框为一组， 一组中只能同时有一个被选中。
7.5 按钮
- 场景 ： 在网页中显示不同功能的按钮表单控件
- type属性值 ： submit 、 reset 、 button
- 注意点 ： 如果需要实现以上按钮功能 ， 需要配合form标签使用。如果要改变按钮的提示文字用到value属性
7.6 button按钮标签
- 场景 ： 在网页中显示用户点击的按钮
- 标签名 ： button
- type属性值 ： 同input的按钮系列
- 注意点 ： 谷歌浏览器中button默认是提交按钮；button标签是双标签，更便于包裹其它内容：文字、图片等；双标签之间的内容是按钮上填充的东西。
7.7 select下拉菜单标签
- 场景 ： 在网页中提供多个选择项的下拉菜单
- 标签组成：
- select ： 下拉菜单的整体
- option ： 下拉菜单的每一项
- 常见属性 ： selected 下拉菜单的默认选中项。
7.8 textarea文本域标签
- 场景 ： 在网页中提供可输入多行文本的表单控件，如：评论区
- 标签名 ： textarea
- 常见属性 ：
- cols ： 规定了文本域内可见宽度
- rows ： 规定了文本域内可见行数
- 注意点 ： 右下角可以拖拽改变大小 ， 实际开发的效果建议用css实现。
7.9 文件选择
- 场景 ： 在网页中显示文件选择的表单控件
- type属性值 ： file
- 常用属性 ： multiple 多文件选择
7.10 label标签
- 场景 ： 常用于绑定内容与表单标签的关系，如把单选框和它的注释联系起来，点注释等同点单选框
- 标签名 ： label
- 使用方法：
- 方法一
使用label标签把内容（如文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置成对应id的属性值
- 方法二
直接把使用label标签把内容（如文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可
7.11 url属性
- 场景： 用于说明网站网址，提交表单时会自动验证url的值
<input type="url" >
7.12 email属性
- 场景： 用于输入E-Mail地址，提交表单时会自动验证格式是否正确。
<input type="email" >
7.13 日期与时间
- 场景： 选取时间
属性 ： 含义
- date ： 选取日、月、年
- month： 选取日、月
- week： 选取周、年
- time： 选取时间
- datetime ： 选取时间、日、月、年
- datetime-local ： 选取时间、日、月、年（本地时间）
7.14 number属性
- 场景： 可以输入数字，也可以单击微调按钮选择数字
7.15 required属性
- 场景：用于规定某条为必填项。
- 举例
<input type="text" required= "required">
八. 语义标签
8.1 语义标签
- 标签 ：
- header ： 网页头部
- nav ： 网页导航
- footer ： 网页底部
- aside ： 网页侧边栏
- section ：网页区块
- article ： 网页文章
- 注意点 ： 以上标签显示特点与div一致，只是多了语义便于程序员了解各部分功能。做手机端网页用得上。
8.2 文本格式化标签
- 场景：需要文字加粗、下划线、倾斜、删除线等效果
- 代码：
- b : 加粗
- u ： 下划线
- i ： 倾斜
- s ： 删除线
- 或者
- strong : 加粗
- ins ：下划线
- em ： 倾斜
- del ： 删除线
- 这两组的视觉效果完全相同，只是为了让程序员分清重要性，如果某部分内容格外重要，用后一种方式。
- 注意：以上的功能用CSS能更细致的实现，因此只做了解即可。
- 语义： 突出重要性的强调语境。
8.3 上标和下标文本
- HTML中，分别用
<sup>...</sup>，<sub>...</sub>实现上标文字和下标文字。
7241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
