标签：01 JavaWeb 标签 表单 HTML 属性 选择器 定义
浏览器内核对前端代码进行渲染解析，为确保解析效果一直制定web标准。
Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。由三个组成部分：
- HTML：负责网页的结构（页面元素和内容）。
- CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。 层叠样式表
- JavaScript：负责网页的行为（交互效果）。
什么是HTML ?
HTML: HyperText Markup Language，超文本标记语言。
超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
标记语言：由标签构成的语言HTML标签都是预定义好的。例如：使用 <h1> 标签展示标题，使用<a>展示超链接，使用<img>展示图片，<video>展示视频。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
HTML页面的基础结构标签
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
<title>中定义标题显示在浏览器的标题位置，<body>中定义的内容会呈现在浏览器的内容区域。
- HTML标签不区分大小写
- HTML标签的属性值，采用单引号、双引号都可以
路径书写方式
绝对路径:
1. 绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\news_logo.png
<img src="C:\Users\Administrator\Desktop\HTML\img\news_logo.png">
2. 绝对网络路径: https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
相对路径:
./ : 当前目录 , ./ 可以省略的
../: 上一级目录
CSS引入方式
具体有3种引入方式，语法如下表格所示：
| 名称 | 语法描述 | 示例 |
| 行内样式 | 在标签内使用style属性，属性值是css属性键值对 | <h1 style="xxx:xxx;">中国新闻网</h1> |
| 内嵌样式 | 定义<style>标签，在标签内部定义css样式 | <style> h1 {...} </style> |
| 外联样式 | 定义<link>标签，通过href属性引入外部css文件 | <link rel="stylesheet" href="css/news.css"> |
CSS选择器
，id选择器，class选择器，语法以及作用如下：
优先级: id选择器 >类选择器 >元素选择器
1.元素（标签）选择器：
- 选择器的名字必须是标签的名字
- 作用：选择器中的样式会作用于所有同名的标签上
元素名称 {
css样式名:css样式值；
}
2.id选择器:
- 选择器的名字前面需要加上#
- 作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的）
#id属性值 {
css样式名:css样式值；
}
3.类选择器：
- 选择器的名字前面需要加上 .
- 作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个
.class属性值 {
css样式名:css样式值；
}
正文排版实现中，还用到了几个CSS属性：
- text-indent: 设置段落的首行缩进
- line-height: 设置行高
- text-align: 设置对齐方式, 可取值为 left / center / right
超链接标签: <a>
<a href="..." target="...">央视网</a>
- 属性:
- href: 指定资源访问的url
- target: 指定在何处打开资源链接
- _self: 默认值，在当前页面打开
- _blank: 在空白页面打开
视频、音频标签
- 视频标签:
<video>
-
- 属性:
- src: 规定视频的url
- controls: 显示播放控件
- width: 播放器的宽度
- height: 播放器的高度
- 音频标签:
<audio>
-
- 属性:
- src: 规定音频的url
- controls: 显示播放控件
盒子模型
- 盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
盒子的大小，其实就包括三个部分： border、padding、content。
布局标签<div> <span>
- 布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。
- 标签：
<div> <span>
- 特点：
- div标签：
- 一行只显示一个（独占一行）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高（width、height）width：70%；
- span标签：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高（width、height）
表格标签<table>
- <table> : 用于定义整个表格, 可以包裹多个 <tr>， 常用属性如下：
- border：规定表格边框的宽度
- width：规定表格的宽度
- cellspacing: 规定单元之间的空间
- <tr> : 表格的行，可以包裹多个 <td>
- <td> : 表格单元格(普通)，可以包裹内容 , 如果是表头单元格，可以替换为 <th>
表单<form>
- 表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。
- 表单标签:
<form>
- 表单属性:
- action: 规定表单提交时，向何处发送表单数据，表单提交的URL。
- method: 规定用于发送表单数据的方式，常见为： GET、POST。
- GET：表单数据是拼接在url后面的， 如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。
- POST： 表单数据是在请求体（消息体）中携带的，大小没有限制。
- 表单项标签: 不同类型的input元素、下拉列表、文本域等。
- input: 定义表单项，通过type属性控制输入形式
- select: 定义下拉列表
- textarea: 定义文本域
表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name属性。 否则，无法提交该表单项。
用户名: <input type="text" name="username">
表单项
在一个表单中，可以存在很多的表单项，而虽然表单项的形式各式各样，但是表单项的标签其实就只有三个，分别是：
- <input>: 表单项 , 通过type属性控制输入形式。
| type取值 | 描述 |
| text | 默认值，定义单行的输入字段 |
| password | 定义密码字段 |
| radio | 定义单选按钮 |
| checkbox | 定义复选框 |
| file | 定义文件上传按钮 |
| date/time/datetime-local | 定义日期/时间/日期时间 |
| number | 定义数字输入框 |
| email | 定义邮件输入框 |
| hidden | 定义隐藏域 |
| submit / reset / button | 定义提交按钮 / 重置按钮 / 可点击按钮 |
- <select>: 定义下拉列表, <option> 定义列表项
- <textarea>: 文本域
标签：01,
JavaWeb,
标签,
表单,
HTML,
属性,
选择器,
定义
From： https://blog.csdn.net/gjw3037109961/article/details/142104631