webUI1
1. HTML简介
超文本标记语言（英语：HyperText Markup Language）是一种用于创建网页的标准标记语言。
使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解释呈现最后的效果。
是一门解释型语言。
2. 基本语法
1）源代码文件 *.html , *.htm
2）不区分大小写，不识别源代码的空格、换行
3）允许使用注释
<!-- 注释 -->
4）标记的形式
形式一：
<标记 属性1="值" 属性2="值" ...> 文本或者其他标记 </标记>
形式二：
<标记 属性1="值" 属性2="值" ... />
5）页面基本结构
6）所有的标记都支持如下属性
style -- 设置css样式
class -- 设置类名，或者加载css类选择器
id -- 设置id标识，或者加载css的ID选择器，值在整个页面具有唯一性
title -- 设置鼠标移到该标记所表现的内容上显示的文本
3. 文档常用标记
tip : 标记不区分大小写，源码不识别空格与换行
1）html、head、body、title
2）标题子标记 h1---h6 【加粗，大小不同，段间距】
3）段落 p 块级
4）文本格式化标记
https://www.runoob.com/html/html-quicklist.html
b、strong
i、em、斜体
address（斜体，单独成行）
u 、 del 下划线
sub、sup 上标 下标
blockquote -- 引用【左右缩进】
pre -- 预览效果，所写即所见
<br/> -- 换行
<wbr /> -- HTML5新增，软换行，更好的指示英文单词的换行
<hr/> -- 水平线
code 代码颜色浅小
cite 斜体
4. 符号实体
https://www.runoob.com/html/html-entities.html
在html源代码中用到了一些符号，比如 <, > 等
页面就是需要呈现这些符号，此时可以使用符号实体
符号实体对大小写敏感，都是以 & 开头，以 ; 结尾
空格
< <
> >
© 圈c
& 圈R
® 已注册
™ TM
5. 颜色设置
https://www.runoob.com/html/html-colors.html
有两种方式 ： 颜色英文单词，比如 red ；RGB十六进制整数表示
RGB 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
颜色值 从 #000000 --- #FFFFFF
tip : 如果颜色值六位中每两个位置颜色值一样(#AABBCC)，可以使用三位数字(#ABC)表示法：
比如 #112233 , 可以表示为 #123
tip : 推荐使用css来设置样式
比如 : <标记 style=" color:文字色"> ... </标记>
6. 块标记和行标记
<div> -- div中的内容独立成行
<div id = "container">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
<span> -- span中的内容没有任何特殊效果 和style搭配使用
tip : 一般搭配css一起使用
7. 路径
URL : 统一资源定位符 ==> 用一个字符串表示一个资源（图片，音频，css文件，js文件，html文件等）所在位置。
以上所说的字符串描述方式，两种：一种是绝对路径，一种是相对路径
绝对路径：从根位置出发查找资源所经过的字符串，比如
D:\^软通资料^\2021课程\2021大软课程\开学典礼.ppt
/opt/home/oo/html/test.html
https://www.runoob.com/html/html-colors.html
相对路径 : 【不要以驱动器符号，或者/ , \ , 或者 http，https开头】
从当前文件查找目标资源文件所经过的路径。
进入目录使用 "目录名/" , 返回上一级目录使用"../"
WebUI-56/笔记.md
./WebUI-56/笔记.md
../教材/node.js.docs
../../项目答辩评审表.xlsx
结论 ：站内资源访问使用相对路径；站外资源访问使用以http或者https开头的绝对路径
相对路径描述举例:
Demo/
index.html
pages/
admin/
userManager.html
login.html
assets/
imgs/
default.png
index.html 引用 default.png ： assets/imgs/default.png
login.html 引用 index.html : ../index.html
login.html 引用 default.png : ../assets/imgs/default.png
userManager.html 引用 default.png : ../../assets/imgs/default.png
8. 超级链接 a
1）超链接实现
<a href="链接资源url" target="目标资源打开位置">链接表现内容--文字或图片</a>
【说明】
- 链接表现：默认外观 文字蓝色并且带有下划线，链接过后是紫色，鼠标以上链接内容呈现小手状
- target ：打开新页面
_self (默认值) 在当前窗口打开新页面
_blank 新标签页打开
_top
_parent
frameName
2）锚点链接
定位到某个页面的特定位置
需要两步 ：
-- 制作锚点 <a name="锚点名"> 。。。</a> , 设置在要定位的位置上
-- 编写链接 <a href="#锚点名">。。。。</a>
如果定位本页面锚点，可以没有url
9. 多媒体资源加载——必加属性 src
1）加载图片
tip : img 是行内标记，但是支持css设置宽和高。
<img src="图片源url" width="" height="" alt="图片不能加载时显示的文本" title="鼠标移上文本" />
2）加载音频 ： mp3 , wav , ogg
tip : 记得设置controls属性，chrome与firefox没有控制台，不自动播放
两种描述方式 ：
方式一：
<audio src="url" controls>
controls控制台 必须加 audio行内元素
音频不能加载时显示的文本
</audio>
方式二：
<audio controls>
<source src="url" />
<source src="url" />
<source src="url" />
</audio>
3）加载视频 : MP4, WebM, 和 Ogg:
两种描述方式 ：
方式一：
<video src="url" controls>
视频不能加载时显示的文本
</video>
方式二：
<video controls>
<source src="url" />
<source src="url" />
<source src="url" />
</video>
4）Flash资源加载
tip : 需要浏览器安装flash播放器插件
<embed src="" width="" height="" />
10. 列表
tip ： li单独成行，而且右侧有缩进
1）无序列表 ul + li 块级标签独立成行
<ul type="disc|square|circle">
<li>....</li>
...
</ul>
|
<ul> |
.nav ul , .nav li { |
2）有序列表 ol + li
<ol type="1|i|I|A|a" reversed>倒数
<li>....</li>
...
</ol>
3）定义列表 dl + dt + dd 分层次
<dl>
<dt>SSM</dt>
<dd>SpringMVC</dd>
<dd>Spring</dd>
<dd>MyBatis</dd>
<dt>SSH</dt>
<dd>Strusts2</dd>
<dd>Spring</dd>
<dd>Hibernate</dd>
</dl>
11. 框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
<iframe src="加载html的url" width="像素值或者百分比值" height="" name="自定义框架名称" frameboder="0|1"></iframe>
如果超链接点击，希望在iframe窗口显示 ：
-- iframe设置name属性
-- a 标记的target值时iframe的name值
如果iframe中加载的页面希望在顶级窗口打开，则a标记的target属性设置值为 _top
12. 框架集【废弃】【frameset+frame】
13. 表格
1）基本设置
-- 容器 table
-- 区域划分 thead , tbody , tfoot , caption表格标题
-- table，thead，tbody，tfoot内部放置 tr(行)
-- tr中放置 td或者th
2）table的主要属性
width
border="0|正整数"
cellspacing="单元格与单元格之间的距离"
cellpadding="单元格文本和单元格边框之间的距离"
3）单元格合并，td或者th的属性
tip: 单元格合并时不能跨越区域 thead，tbody，tfoot
colspan="跨列合并数"
rowspan="跨行合并数"
### 14. fieldset
区域块 ==》外围边框线
可以通过legend标记设置该区域块的标题，该标题将显示在边框线左上角位置。
### 1. 表单
【掌握表单元素标记以及属性；理解表单提交两种方式差异性】
#### 1）表单标记 form
-- 如果点击表单的“提交”按钮，则页面会发生跳转，跳转到action所设置的url位置；可以通过javascript来阻止表单的提交。
-- 表单元素一定要设置name属性，不然表单元素的值不能提交到服务器端
-- 提交到服务器上表单元素值构成形式 ：
name=value&name2=value&...
-- 绝大多数表单元素都支持 value属性，用来设置默认值
#### 2）form的属性
| 名称 | 值 | 含义 |
| ------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| method | get\|post | 不设置该属性，默认是get<br />get方式，表单元素值绑定在url后面一起提交到服务器端 ：<br /> url?name=value&name2=value&...<br />post方式，表单元素值单独发送到服务器端，安全性更高；如果表单中有文件上传，必须使用post提交表单。 |
| action | url | 设置表单提交位置，不设置该属性则提交到本页面 |
| target | 同\<a>的target | url打开位置 |
| enctype | multipart/form-data<br />默认值是<br />application/x-www-form-urlencoded | 如果表单中有文件上传，必须设置该属性，并且取值为multipart/form-data |
#### 3）表单元素 input 标记
实现：单行文本域、密码域、单选按钮、复选框、文件域、按钮、隐藏域
**属性 type ， 值如下**
| 值 | 表单元素 | 说明 |
| -------- | -------- | ------------------------------------------------------------ |
| text | 文本域 | 默认值 |
| password | 密码域 | |
| radio | 单选按钮 | 若干为一组的radio要设置相同的name属性，不同的value属性<br />支持checked属性来实现初始化选中 |
| checkbox | 复选框 | 若干为一组的checkbox要设置相同的name属性，不同的value属性<br />支持checked属性来实现初始化选中 |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| button | 普通按钮 | |
| file | 文件域 | |
| hidden | 隐藏域 | 页面不显示该元素，一定要设置value属性=》隐含提交到服务器 |
**其他属性**
| 名 | 含义 |
| ----------- | ------------------------------ |
| required | 必填项 |
| placeholder | 设置提示信息 |
| disabled | 禁用，该元素值不能提交到服务器 |
| readonly | 只读，可以获取焦点，但不能编辑 |
#### 4）表单元素 button标记--双标记
三种 submit , reset , button（搭配js一起使用）
#### 5）下拉菜单或者列表
select （容器）+ option（选项）
select支持的属性
multiple--列表 多选 ， 可以使用size="int" 列表显示项数
option支持的属性
value ， selected初始化选中
【html5】选项分组，实现 ：
将为一组的option放入一个optgroup标记内；
optgroup允许使用label标属性设置该组的标签
#### 6）多行文本域--双标记
textarea
支持属性 cols ， rows
#### 7）label
为表单元素设置提示信息，支持for属性来绑定到表单元素上 id值
#### 8）input标记的type属性其他值（h5)
【受浏览器支持性限制】
email （单击提交按钮时有数据格式校验）
url（单击提交按钮时有数据格式校验）
tel（单击提交按钮时有数据格式校验）【浏览器不支持】
number 该类型表单元素可以设置min与max
range 该类型表单元素可以设置min与max
color 提交值是 #RGB
search
date、time、datetime、datetime-local、month、week
> tip : 一般如果输入email或者tel，一定要使用js进行数据格式校验
>
> 如果页面中使用日期，时间，日期时间，都是其他插件实现
>
> 日期提交到服务器上，年月日使用 "-" 分隔
#### 9）datalist的使用
datalist+option为输入框值提供选择
```html
<p>
<label>input+datalist</label>
<input type="text" name="from" list="fromList"/>
<datalist id="fromList">
<option value="绑定">融创软通</option>
<option>中软国际</option>
<option>中天</option>
<option>IBM</option>
</datalist>
</p>
```
### 2. Html5中结构语义标记
这些标记的外观表现就是块级容器，独立成行
【搭配css来页面布局】
header ， nav ， aside ， article ， section ， footer
### 3. Html5 其他标记
-- figure 与 caption
规定独立的流内容（图像、图表、照片、代码等等）。
```html
<figure>
<figcaption>这是一只猴子</figcaption>
<img src="../assets/imgs/female.jpg" height="190" width="190"/>
</figure>
```
-- details + summary
```html
<details>
<summary>Copyright 1999-2011.</summary> <!-- 显示 -->
<!-- 下方内容可以展开/隐藏 -->
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
```
-- ruby + rp + rt
为中文加汉语拼音 ，ruby是容器，rt是注释音标，rp是浏览器不支持ruby时所显示的内容
```html
<ruby>
汉 <rp>(</rp><rt>Han</rt><rp>)</rp>
字 <rp>(</rp><rt>zi</rt><rp>)</rp>
韩 <rt>han</rt>
</ruby>
```
-- mark
文本做标记 ==》黄色底背景
-- time
无效果，一般将日期时间放入该标记内
-- progress（双标记）
进度条，可以设置min，max，value属性，动态效果要结合js使用
-- dialog
目前不能实现对话框
```html
<p>
这是一个<mark>带有标记内容的段落</mark>
<br/><time>登录时间为 2012-03-16 13:31:31</time>
</p>
<p><dialog open>This is an open dialog window</dialog></p>
<progress min="1" max="100" value="30"></progress> 30%
```
### 4. head标记
该标记内部可以嵌套如下标记
-- title 设置标题
-- style 设置css样式
-- link 引入外部css文件
-- script 设置js内容或者引入外部js文件
-- base （略）为页面中所有相对路径设置基路径
-- meta 设置页面元信息
### 5. meta标记
通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
```html
实例 1 - 定义文档关键词，用于搜索引擎：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
实例 2 - 定义web页面描述：
<meta name="description" content="Free Web tutorials on HTML and CSS">
实例 3 - 定义页面作者：
<meta name="author" content="Hege Refsnes">
实例 4 - 每30秒刷新页面：
<meta http-equiv="refresh" content="30">
实例 5 - 页面编码设置
<meta charset="UTF-8" />
```
> tip : meta 的viewport属性
>
> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
1. CSS简介
-- CSS 指层叠样式表 (Cascading Style Sheets)
-- 修饰页面==> CSS样式作用在HTML元素上
-- 实现页面内容和表现外观相分离
-- 提高性能和页面加载速度 ==> 样式可以反复使用
2. CSS样式的定义位置
1）内联样式表【该样式只能应用在当前HTML元素】
<标记 style="css属性描述"></标记> <!-- 不涉及选择器-->
2）内部样式表【只限当前页面使用】
<head>
<style type="text/css">
/* CSS样式定义 */
</style>
</head>
3）外部样式表（独立的css文件）【可以被应用在任何一个HTML页面】
-- 【推荐】 <link>
<link rel="stylesheet" href="css文件url" />
-- 导入式
<head>
<style type="text/css">
@import url("css文件url")
</style>
</head>
tip : 当一个标记上所设置的以上样式中某个css属性值冲突，则采取就近原则
内联样式 > 内部样式 > 外部样式
3. CSS 样式的定义语法
-- 允许使用注释，/* 注释 */
-- 尺寸、大小必须使用单位 ：px（像素），pt（磅），em（字）
-- 颜色值支持两种形式：名字和RGB值
-- CSS的属性描述为 ： 属性名 : 值 ;
选择器 {
/* css属性描述 */
属性 : 值 ;
属性2 : 值 ;
...
}
4. 选择器
https://www.runoob.com/cssref/css-selectors.html
1）基本选择器
-- HTML标记选择器
html标记 {
css 样式
}
该样式自动应用在页面所有对应的标记上
-- ID选择器
#名称{
css 样式
}
应用 :
<标记 id="名称">
-- 类选择器
.名称{
css 样式
}
应用 :
<标记 class="名称">
-- 应用在所有html元素
* {
css 样式
}
-- 多个选择器组合，使用逗号间隔
选择器1 , 选择器2 , ... {
css 样式
}
应用 :
或关系，几种选择器样式一致。
2）层次选择器
-- 使用空格间隔选择器
选择器1 选择器2 ... {
css 样式
}
应用 :
逐层递进，选择器逐层嵌套（只要是后代即可）
-- 标记+选择器（"+"表示紧连在一起)
标记选择器{
css 样式
}
应用：
应用了选择器的特定标记
tip：区别
p.mark {...}
.mark p { ... }
-- 使用 **>** 连接选择器
```css
选择器>选择器{
...
}
使用：
父子关系，选择子代
```
-- 使用 **+** 连接选择器
```css
选择器+选择器{
...
}
使用：
兄弟关系，选择紧挨着的第一个弟弟
```
-- 使用 **~** 连接选择器
```css
选择器~选择器{
...
}
使用：
兄弟关系，选择所有弟弟
``
3）属性选择器[]
【说明】根据html元素的属性或者属性值来进行匹配
[属性] {
...
}
应用 ：
只要标记含有该属性就应用样式
[属性=值] {
...
}
应用 ：
含有属性，并且符合相应值
[属性*=值] {
...
}
应用 ：
标记含有的属性并且值中含有所设置选择器描述的值
[属^=值] {
...以谁开头
}
应用 ：
标记属性值以选择器描述的值开头
[属性$=值] {
...已谁结尾
}
应用 ：
标记属性值以选择器描述的值结尾
4）伪元素选择器 :?
一般搭配标记一起使用
-- 修饰超链接
a:link 未访问
a:hover 鼠标在连接上
a:active 按下去
a:visited 访问过的
-- 鼠标移上状态设置
?:hover
-- 匹配指定元素某一个或者某几个
:nth-child()
如 ：tr:nth-child(3) 第3个tr
tr:nth-child(even|odd) 偶奇位置
tr:nth-child(an+b) n从0开始
-- 第一个xxx
:first-letter 选择第一个字母
:first-line 第一行
:first-child 第一个子项
-- 和表单元素相关
:checked
-- :before , :after
在元素前或者后插入内容，内容通过css的content内容属性来加载
```html
.locBox p:before {
content : 'Before' ;
color : red ;
font-size:xx-large;
}
.locBox p:after {
content : 'After' ;
color : blue ;
```
5. 边距属性
外边距 -- margin ， 元素和兄弟元素或者父元素之间的距离
内边距 -- padding，元素的内容和边框之间的距离
margin与padding都可以有四个方向的距离 : top , right , bottom , left
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
------------------------
margin : 100px 50px ; /*100-top,bottom , 50-left,right*/
margin : 1px 2px 3px 4px;
----------------
margin : 50px ; /* 四个方向都是50 */
margin : 0 auto ; /* 上下是0，左右是(父容器大小-元素大小)/2 */
6. 边框线属性
粗细 width，样式 style，颜色 color
四个方向 : top , right , bottom , left
border : solid red 1px; /* 四个方向样式 style样式，color颜色，width粗细*/
-------------
border-style:dashed ;
border-width:5px;
border-color:green ;
-----------------
border-left : dotted red 1px; /* 左边框线 */
dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框
【CSS3 -- 3个属性】
boder-radius 圆角
7. 盒子模型（理解）
https://www.runoob.com/css/css-boxmodel.html
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。该四项内容宽度和构成页面上占用空间宽度。
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度[width]+左填充[padding-left]+右填充[padding-right]+左边框[border-left]+右边框[border-right]+左边距[margin-left]+右边距[margin-right]
元素的总高度最终计算公式是这样的：
总元素的高度=高度height+顶部填充+底部填充+上边框+下边框+上边距+下边距
--- 当空间大小一定时，width计算方式是 ：
空间大小 - borderLeft - borderRight - paddingLeft - paddingRight - marginLeft - marginRight
只有 250 像素的空间
div {
width: 200px; <!-- 250-15*2-5*2-10*2 -->
padding: 15px;
border: 5px solid gray;
margin: 10px;
}
8. 定位与浮动
1）标准文档流
https://blog.csdn.net/weixin_43734523/article/details/110878644
标准文档流：指的是元素排版布局过程中，元素会默认从左往右、从上往下的流式排列方式。前面的内容发生变化后，后面的内容位置也会随着发生变化。
三个微观现象
1、空白折叠现象：无论写多少个空格（或者换行），最终显示的都只有一个空格！
2、底边对齐现象：当排列在同一行的元素高度不一致的时候，会出现底边对齐的现象！
同一行内放了四个元素（span、a、img、input），四个元素的 height 不一致，最终以底边对齐的形式展示！
3、自动换行：当一行展示不下的时候，会自动排列到下一行进行展示！
三个元素等级：在标准流中，大部分元素都是区分等级的，习惯将元素划分为以下几种加载级别：
1、块级元素。2、行内元素。3、行内块元素。
1、块级元素
a、可以设置宽高。如果不设置宽高，会被内容自动撑开高度！
b、必须独占一行，不能与其他元素并排显示。
---大部分容器级标签都是块级元素，如：div、h1~h6、p 标签等。
2、行内元素
a、不能正常加载 height、width 属性。
b、无论是否设置 height、width 属性， 高度和宽度都只能被内容自动撑开。
c、可以与其他行内、行内块元素并排显示！
-- 大部分文本标签都是行内元素，比如 span、a、b标签等。
-- 如果希望width与height起到作用，可以使用 display:inline-block
3、行内块元素
a、行内块元素可以设置宽高。
b、行内块元素可以并排一行显示。
c、如果没有设置宽高，则会被内容自动撑开。
d、行内元素可以同时设置宽高，和并排显示，但是还是存在标准文档流的微观性质：如 空白折叠现象（元素之间存在空隙）比如 img、input标签等。
可以通过 display：block / inline / inline-block 更改元素显示模式。
2）以下设置会使元素脱离标准的文档流
-- 给元素添加浮动： float -- 绝对定位： position：absolute -- 固定定位： position：fixed
3）浮动 ：
float : left|right
清除浮动 clear : left|right|both
tip : 【注】需要浮动的相关元素处理后，一般建议清除浮动（布局），一般借助div应用样式 \ <div style="clear:both"></div>
4）定位
https://www.cnblogs.com/guolao/p/9048308.html
position、left、top、right，bottom，width、height
【应用】导航子菜单，广告漂浮，导航条固定
position : static 标准文档流，left、top、right，bottom不起作用
position : absolute -- 元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
position : relative -- 参考元素在父容器的原位置进行偏移
postion : fixed -- 位置不会随滚动条滚动而改变
------------------
width , height 设置元素内容占用空间大小
left、top、right，bottom 设置元素所在位置