Javaweb - 2 HTML
目录
HTML 入门
1. HTML & CSS & JavaScript 的作用
2. 什么是 HTML
3. 什么是超文本
4. 什么是标记语言
5. HTML 基本结构
6. HTML 概念词汇解释
7. HTML 的一些语法规则
8. 开发工具 VsCode
安装插件：
常见设置：
HTML 常见标签
标题标签
段落标签
换行标签
列表标签
超链接标签
多媒体标签
表格标签
表单标签
布局相关标签
特殊字符
完！
HTML 入门
1. HTML & CSS & JavaScript 的作用
HTML 主要用于网页主体结构的搭建（比较简陋~）
CSS 用于页面美化
JavaScript 主要用于动态处理页面元素，可以进行人机交互
2. 什么是 HTML
HTML：即 Hyper Test Markup Language ，超文本标记语言。作用是搭建网页结构，在网页上展示内容。
3. 什么是超文本
HTML 本质上是文本文件。但是可以通过标签，来把其他网页，音频等资源引入到当前网页中。即：本身是文本，但最终呈现出来的效果超越了文本。
4. 什么是标记语言
HTML 不像 Java C 等编程语言，它是由一系列标签组成的，没有常量，变量....那些功能。HTML 的每个标签都有它固定的含义和确定的页面显示效果。
- 双标签：例：<p> </p>
- 单标签：例：<br />
- 属性：<a href = "http://www.xxx.com"> xxx 网站 </a> 其中，href = “http://www.xxx.com”就是属性，href 就是属性名，"http://www.xxx.com"就是属性值
5. HTML 基本结构
1.<!DOCTYPE html> ：文档声明。HTML 文件中第一行的内容，用于告诉浏览前当前 HTML 文档的基本信息以及 HTML 文档遵循的语法标准。
2. <html> </html>：根标签。其他所有标签都必须放在这对标签里面。
3. <head> </head>：头标签。头标签是根标签的第一个一级子标签，用于定义文档的头部。存放一些，不直接展现在页面主体，但很重要的内容。例如：字符集 <meta charset = "utf-8 "/> 告诉浏览器用什么字符集对文件进行解析。title 标签，script 标签，style 标签，link 标签....
4.<body> </body>：体标签。是根标签的第二个一级子标签，用于标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到 body 标签内。
5. <!-- xxxxxxx --> 注释
6. HTML 概念词汇解释
标签（tag）：代码中的一个 <> 叫做一个标签，有些标签成对出现，称之为双标签，有些单独出现，称为单标签。
属性（attribute）：在开始标签中，用于定义标签的一些特征。
文本（text）：双标签中间的文字，包含空格换行等结构。
元素（element）：经过浏览器解析之后，每一个完整的标签（标签 + 属性 + 文本）可以称之为一个元素。
7. HTML 的一些语法规则
- 根标签 <html> </html> 有且只能有一个
- 标签要注意正确关闭 <p> </p> <br />
- 标签可以嵌套，但不要交叉嵌套。
- 属性必须有值，值必须加引号。H5 中规定，当属性名和值相同时，可以省略属性值~
- HTML 中不严格区分字符串使用单还是双引号。但，当存在字符串嵌套的时候，需要单引号嵌套。
- HTML 标签不严格区分大小写，但是不能大小写混用。
- HTML 中不允许自定义标签名，强行定义则无效。
8. 开发工具 VsCode
下载 VsCode，一路 next 即可~
安装插件：
Auto Rename Tag 自动修改标签对
Chinese Language Pack 汉化包
HTML CSS Support HTML CSS支持
Live Server 实时载功能的小型服务器
open in browser 通过浏览器开前文件的插件
Prettier-Code formatter 代码化格式化插件
Vetur VScode中的Vue工具插件
vscode-icons 文件显示图标插件
Vue3 snipptes 生成VUE模件插件
Vue language Features Vue3语言特征插件
Intellij IDEA Keybindings IDEA 快捷键支持
常见设置：
- 设置字体：
- 编码自动保存：搜索 “Auto Save”，选择为“afterDelay”。
HTML 常见标签
w3school 在线帮助文档：hhtp://www.w3school.com.cn
标题标签
<h1> </h1>
h1 - h6，h1 的字体最大
段落标签
<p> </p>
多个段落标签之间自动实现分段的效果
换行标签
单纯实现换行的标签是 <br />
添加分割线：<hr />
列表标签
有序列表（order list）：分条列展示数据的标签，每一项的前面都带有顺序特征。
<ol><li>Java</li><li>javaweb</li><li>大数据</li>
<ol>无序列表（unorder list）：分条列展示数据的标签，每一项的前面没有顺序特征。
<li> </li> 为列表项标签，list item。
嵌套列表：
超链接标签
点击后跳转连接标签， 也叫做 a 标签
href 属性用于定义要跳转的目的资源的地址
1. 完整的url：http://www.baidu.com/
2. 相对路径：以当前资源所在的路径为出发点去找目标资源
./ 表示当前资源所在路径，可以省略不写
../ 表示当前资源的上一层路径，需要时必须显示写出
3. 绝对路径：无论当前资源在哪里，使用固定的位置作为出发点去找目标资源。以 / 开头
target 用于定义目标资源的打开方式：
_self 在当前窗口打开目标资源
_blank 开启一个新的窗口打开目标资源
多媒体标签
img：
src 定义图片的路径
1. url
2. 相对路径
3. 绝对路径
title 属性定义鼠标悬停时提示的文字
alt 属性定义图片加载失败时提示的文字
表格标签
table 代表整张表格
thead 表头 可以省略不写
tbody 表体 可以省略不屑 浏览器解析时候会自动添加
tfoot 表尾 可以省略不屑
tr 表格中的一行
td 行中的一个单元格
th 自带加粗居中效果的 td
单元格跨行：通过 td 的 rowspan 属性实现上下跨行
单元格跨列：通过 td 的colspan 属性实现左右的跨列
表单标签
可以实现让用户在界面上输入各种信息，并进行提交的一种标签，是向服务端发送数据主要的方式之一 ~~
form 表单标签
action 定义数据的提交地址
1. url
2. 相对路径
3. 绝对路径
method 定义数据的提交方式
GET
1. 参数会以键值对的形式放在 url 后提交，url?key=value&key=value&key=value
2. 数据直接暴露在地址栏上，相对不安全
3. 地址栏长度有限制，所以提交的数据量不大
4. 地址栏上，只能是字符，不能提交文件
5. 相比于 post 效率高一些（一般察觉不到~）
POST
1. 参数默认不放到 url 后
2. 参数不会直接暴露在地址栏上，相对安全
3. 数据是单独打包通过请求体发送，提交的数据量比较大
4. 请求体中，可以是字符，也可以是字节数据，可以提交文件
5. 相比于 GET 效率略低一些~
PUT
DELETE
......
表单项标签
表单项标签一定要定义 name 属性，该属性用于明确提交时的参数名
表单项还需要定义 value 属性，用于明确提交时的实参
input 标签：主要的表单项标签，可以用于定义表单项
type 输入信息的表单项类型
text 单行普通文本框
password 密码框
submit 提交按钮
reset 重置按钮
radio 单选框 多个选项选择一个，多个单选框使用相同的 name 属性值，则会有互斥效果
checkbox 复选框 多个选项选多个
select 和 option 下拉框
select 定义下拉列表 option 设置列表项
name 属性在 select 标签中设置 value 在 option 标签中设置
option 标签中的标签体是显示出来给用户看的 提交到服务器的是 value 属性的值
通过 option 标签中设置 selected 属性实现默认选中的效果
按钮
普通按钮：点击后无效果，需要通过 JavaScript 绑定单击响应函数
重置按钮：点击后将表单内的所有表单项都恢复为默认值
提交按钮：点击后提交表单
隐藏域
通过表单隐藏域设置的表单项不会显示到页面上，用户看不到，但是提交表单时慧一起被提交。用来设置一些需要和表单一起提交，但是不希望被用户看到的数据。
多行文本框 textarea 注意：textarea 没有 value 属性，如果要设置，需要写在开始和结束标签之间~
文件标签： file
布局相关标签
div 标签：俗称“块"，主要用于划分页面结构，做页面布局，自己独占一行的元素。块元素的 CSS 样式的宽高等，往往都是生效的。
span 标签：俗称”层“，可以用于划分元素范围，配合 CSS 做页面元素样式的修饰。不会自己独占一行的元素，行内的 CSS 样式的宽高等等，很多都是不生效的。
特殊字符
对于有特殊含义的字符，需要通过转义字符来表示，注意，这里并不是像 Java 一样直接加 / 即可~
转换表详情：HTML ISO-8859-1 参考手册