html笔记
HTLM1、HTML基本布局
html:超文本标志性语言
<!doctype html> 页头：告诉浏览器 用哪个版本的html来解析当前页面
<html lang="en"> 网页的根标签：en英语zh中文（语言）
<head> 网页头头标签：里面会放置一些配置信息
<meta charset="UTF-8"> mata：元信息；charset字符集编码；主要作用就是为了防止网页乱码
<title>Document</title> 标题：整个网页的标题
</head>
<body> 整个网页的主体标签;
</body>
</html>
本地访问：file:///D:\Project\html\html01\html01/第一章.html
[*]文件传输协议
http://
https:// 加密协议
网络传输协议 超文本传输协议
元素分类：行内元素、块元素、行内块元素
常见的块级元素：< h1 >~< h6 >、< p >、< div >、< ul >、< ol >、< li >、< dd >、< dt >、< dl >等，其中 < div > 标签是最典型的块元素。特点：独占一行，宽高内外边距可以控制
常见的行内元素：** < a >、< strong >、< b >、< em >、< i >、< del >、< s >、< ins >、< u >、< span >、< img />、< input />、< select >、< textarea >、< br />**、等，其中 < span > 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。特点： 一行可以；表现多个；宽高直接设置是无效的
行内块元素：< img />、< input />、< td > 特点：同时具备以上两种的全部有特点
2、html常用标签
1、标签的格式
使用**<> **包起来
两类 (单标签 双标签)
<标签名>标签体</标签名> 双标签
<标签名 /> 单标签
必须闭合，字母都用小写
必须精确的嵌套
2、常用标签
h1–h6 标题1-6；（正常一个网页只能有一个h1标签；为了更好的seo）
p 段落
br 换行
hr 分隔线
img 图像 https://blog.csdn.net/图片路径
相对路径和绝对路径：
./ 代表当前目次 可以不写
…/ 代表返回上级目次
2.1、列表
有序列表 （有序号的）
[*]
[*]第一章
[*]
[*]第二章
[*]
[*]第三章
[*]
**无序列表** 没有序号的
[*]
[*]第一章
[*]
[*]第二章
[*]
[*]第三章
[*]
**自定义列表**
第一章
第一节
第二节
第二章
第一节
第二节
**a标签 超链接 **
**1、做超链接 href 放网络网址/本地网页**
你好
**2、做锚点（锚标志/锚记）（锚点也可以跳转到其他页面的指定地方，需要在锚点跳的位置写好路径）** <a name="aaa"></a> 锚点要跳到的位置
<a id="bbb"></a>锚点
<a href="#aaa"></a>点的地方
点超链接---》锚点跳
3、发邮件/打电话 (会帮你打开邮件/电话)
发邮件
文本标签
font字体 i斜体 b粗体 sup上标 sub下标
音频audio，视频标签video
src ：放音频/视频路径；controls 控制按钮
<audio src=“” =“controls”>
特殊字符：特殊字符有不同的表示需自查
3、表格
表格的基本布局：
定义表格大概可以设置一些表格的样式
** 定义表格的标题
** 定义表头信息 作为列的标题容器
** 定义表格内容的主体部分
** 定义表格中的每一行 有几行 就有几个tr
定义表头单元格 （默认：加粗 居中）
** 定义普通的数据单元格
表格宽高如果不设置默认以内容撑起的
** 表格的常见属性：
frame=void 去掉外边框
border-collapse：collapse 融合边框
border边框 只要有border设置 就会给表格添加边框 但是 border的值 只能控制 外层边框的粗细cellspacing表格之间的间距cellpadding单元格内容与边框之间的距离bgcolor背景颜色 可以给table tr td 分别设置background背景图片width设置宽度height设置高度**align **设置水平方向的对齐方式 left center right 默认居左valign设置垂直方向的对齐方式 top center bottom 默认居中特性：一行中 只要有一个单元格高度固定 那么整行高度都固定 一列中 有一个单元格宽度固定 整列宽度都固定 归并单元格：（归并几个就等于几）
横向归并归并列colspan=”“纵向归并归并行rowspan=“” 步调：
1.在编码也确定要归并的单元格
2.确定归并方式
3.归并
4.多余的干掉
4、css的使用：
4.1、css :层叠样式表(cascading style sheet)
分类：
1.内部样式表
在head标签中创建
3.行内样式表(内联样式) 优先级最高
在标签之内 直接通过style属性调整
eg:
你好哈哈哈
样式表最基础的优先级：就近原则。优先级只针对 相同的属性 不同的属性，共同生效
**4.2、 选择器 **
选择器{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
…
}
4.2.1、基础选择器的分类
- * 通配符 全局选择器 优先级最低
*{属性:属性值;}
- 标签选择器：
使用：直接以标签名 作为 选择器
h1{}
h2{}
h3{}
p{}
ul {}
li{}
特点：选择中页面中全部的同类标签 无法区分做单独设置！
所以常用它来做 基础的共性设置
- 类选择器：
使用：
- 需要调整的标签之内 添加 class=‘类名’
- 样式表之内：
.类名{属性:属性值; }
- 特点：类选择器 在页面中可以重复使用
- id选择器：
使用：
- 需要调整的标签之内 添加 id=‘id名’
- 样式表之内：
#id名{属性:属性值; }
- 特点：id选择器 相同名字的 在一个页面中只能使用1次 针对 js 来说的！
- 选择器优先级：
id选择器 > 类选择器 > 标签选择器 > *
选择器进阶：
[*]并集选择器 h1,.p1{color:red;}
[*]交集选择器 p.p1{color:red;}
[*]儿子选择器 .box > p{color:red;}
** .box > div > p{color:red;}
**
[*]后代选择器 .box p{color:red;}
## 5、标签分类 **语义化：html中每一个标签都是有自己的语义的，在使用时**
**从布局来分别：**
**- 行内元素**
特点：可以或许在一行之内排列，不能设置宽高，宽高由内容撑起来
a span
span:是一个没有任何语义的行内容器 跟div一样。
**- 块状元素**
特点：独占一行(宽度)，可以设置宽高，高度默认由内容撑起来，一般用来做布局容器
h1-h6 p table div
div:层级标签 布局容器 自己没有任何语义，它所能做的都是有开辟者赋予的。
**- 行内块状元素（置换元素）**
特点：可以在一行内排列，也可以设置宽高
img input## 6、背景样式 **background-color**:;背景颜色
**background-image**:url();背景图片
**background-repeat**:; 背景平铺 no-repeat 不平铺 repeat-x repeat-y
**background-position:**; 背景位置
- 位置表示
水平 left center right
垂直 top center bottom
- 坐标 推荐
- 百分比
**background-size:**; 背景大小
综合设置
background:red url('路径') no-repeat center center / 300px 300px;
## 7、边框样式 /* 宽度，颜色，样式（solid 实线 dashed 虚线） */
综合设置：border:宽度 样式 颜色;
eg：border:5px red solid;
/* 分开设置1 */
border-width:10px;
border-color:blue;
border-style:dashed; /* 分开设置2 */<br /> border-top:30px yellow solid;
/* 分开设置3 */<br /> border-bottom-color:purple;
8、列表样式：
list-style-type:disc;li的无序符号在前面https://img-blog.csdnimg.cn/img_convert/f4abf673cb1ebfd0cbedc113383957b8.pnglist-style-position:inside;li的无序符号在后面https://img-blog.csdnimg.cn/img_convert/748f9be6cc06e7e25b735f728d11add0.pnglist-style-image:url(‘路径’)更改无序符号的图标为指定图片https://img-blog.csdnimg.cn/img_convert/2846e95a4496ff8724c64c0fffffe928.png
9、文字样式
默认：微软雅黑 16px 浏览器可以或许辨认的最小 12px
字体颜色 color:red;
字体类型 font-family:‘华文行楷’;
字体大小 font-size:50px;
字体样式 normal:正常字体 italic:斜体 ** font-style:italic;
字体加粗** bold 400 bolder 900 100-900 font-weight:900;
overflow:hidden:当文本容器不敷时多余文本不表现（切）
10、文本样式
**text-align:center; 文本对齐方式 left center right **
line-height:500px; 行高:一般跟高度团结 做 垂直居中效果 行高===高
letter-spacing:20px; 字体间距
text-decoration:line-through; overline 上划线
line-through 中划线
underline 下划线
text-shadow: 3px 3px 3px red, 文本阴影 x y z模糊 颜色
*调整基线 vertical-align
vertical-align （一般用于 img input button）
** 1.该属性用于调整 元素相对于 基线的位置**
** 一般用于调整 行内/行内块元素 调整的是元素自己 而不是容器！ 2.该属性 用于 表格中调整的就是 表格中内容的垂直对齐方式**！
11、矢量图标引用步调
[*]在网站下载：https://www.iconfont.cn/ 下载代码；解压放到项目目次下
[*]在头部引用：
[*]挑选相应图标并获取类名，应用于页面：
12、过渡动画
过渡效果 transition元素的样式 从一种 渐渐过渡到另外一种 需要团结 :hover来使用
transition: all 5s linear;
** 过度内容 时间 过度动画曲线**
13、动画
起首定义动画的关键帧
@keyframes aaa{
第一种
from{margin-left:0;}
to{margin-left:500px;}
第二种（画一个正方形）
0%{margin-left:0;}
起始位置
25%{margin-left:500px;
margin-top:0;}
50%{margin-left:500px;
margin-top:500px;}
75%{margin-top:500px;
margin-left:0;}
100%{margin:0;}
竣事位置
_/ 使用动画 */_*
animation: aaa 2s linear 2 alternate;
aaa：使用的动画名称
2s ：动画指定需要多少秒或毫秒完成
linear：动画从头到尾的速度是相同的。（速度曲线）
alternate：
*css两大特性
**继承性：**子元素会主动的继承父元素的某一些样式(文本样式)
**层叠性：**多个选择器 共同去调整同一个元素，不同的属性 会都生效，但是相同的属性设置 按照优先级生效。
14、菜单隐藏（display）
展示表现
block块状表现 inline行内表现 inline-block行内块状 none不表现
dispaly:; table table-cell …
*CSS优先级
选择器的优先级计算
权值：
id 100
class 10
p 1
* 0
权值相加 计算 优先级!
留意：两个组合选择器 比力，先比力两个组合选择器中 最高层级，如果最高层级都比不过，后续就不需要再举行权值相加比力了。（纵然有 一百个class没有一个id的优先级高）
*伪元素
可以直接在class里面用类名
/* 伪元素 /
名称
/ .clearfix::before{
}
/
.clearfix::after{
/ 伪元素的内容 */可以解决盒子塌陷题目
content:‘’;
display:block;
clear:both;https://img-blog.csdnimg.cn/img_convert/b211066f97a9e4f7b111d67f2fa41d89.png
https://img-blog.csdnimg.cn/img_convert/cab42ea322196f72a2876581a8c153b6.png }
15、浮动
常用的一种布局方式
概念：子元素可以在父元素之内 漂泊 向左 大概向右 漂泊 以父元素的边界为终点 大概 遇到别的浮动元素时 停止。
浮动的由来：围绕效果！之后才慢慢衍生出 浮动布局
标准文档流：页面中的元素的默认排列方式 行内元素从左到右排列 排满 主动换行 ，块状元素从上向下排列。
浮动脱标：完全脱离，部分脱离
浮动属性：
float: none left right;
特点：行内元素浮动之后 可以设置宽高 还可以在一行之内排列
块状元素浮动之后 失去独占一行的特性,但是可以设置宽高
浮动塌陷题目
概念：当一个父元素(没有设置高度) 其中存在有浮动的子元素时 ，此时父元素的高度不会被其内没有浮动的子元素撑开。
如果一个父元素中全部子元素都浮动了，此时 父元素的高度为0。
解决：1.给父元素设置高度
2.overflow:hidden;
3.在父元素之内添加一个空 div 给空div设置 clear:both;
4.使用伪元素
16、浮动框架
就是在页面里开辟一个小窗口独立表现一部分内容
浮动框架 ：name: 浮动框架的名字
src: 框架中默认表现的网页
使用：
<iframe src="网页地址" name=“名称” width=“800px” height=“600px”> 也可以搭配 a标签来使用（将iframe里的src里面放入a标签的target属性值）
eg： https://img-blog.csdnimg.cn/img_convert/c75ced523d5692d101aed55a06823cc1.png
17、盒子模型
盒子模型:从布局头脑思量
指的就是 页面中的全部的元素。 把这个元素都看做是一个盒子
有4个组成部分：
content 就是 宽高
padding 内容与边框之间的距离 内边距 会改变盒子的大小
border 边框
margin 盒子与盒子之间的距离 外边距 不会改变盒子自己的大小 占位会有
盒子的大小：border+padding+content
盒子的占位：margin+border+padding+content
盒子模型的分类：
标准盒模型(w3c盒子)：margin border padding content 四部分 相互独立
怪异盒模型(IE盒子)： margin content (border padding )
切换标准盒子和怪异盒子：解决边框值不固定对盒子以外布局产生影响
** box-sizing:border-box(怪异盒子)/content-box;
https://img-blog.csdnimg.cn/img_convert/427488011c4b3ea9be49ff3acea11333.png
盒子之间的距离题目
盒子之间的距离：
块状元素的垂直距离**：
取两者之间的较大值(上和下)
行内元素之间的水平距离：
取两者之和(左+右)
行内元素的margin和padding 只有水平生效 垂直方向不生效
浮动元素：
**水平距离：**两者之和(左+右)
**垂直距离：**两者之和(上+下)
18、渐变效果
/ 渐变色 _/ /_* radial-gradient径向渐变 _/ /_ linear-gradient 线性渐变 */**
参数一 角度 deg
方位 to + 方位 向那边渐变
https://img-blog.csdnimg.cn/img_convert/578d36997b66f709b38e2664c5f90f55.png
https://img-blog.csdnimg.cn/img_convert/ad8aff542625be2a1b3ca5d158b7be99.png
19、定位
position：absolute / relative / fixed （绝对定位/相对定位/固定定位）
通常使用：top right bottom left 举行调整
概念：
绝对定位：先判断父(不但仅是直接父亲还包罗以上元素)元素有没有举行定位？
1.如果没有：以浏览器窗口左上角原点为基准，偏移。
2.如果定位：以已经定位的父(不但仅是直接父亲还包罗以上元素)元素为基准，偏移。
将 元素/标签 放到页面中的指定位置上。任意放置。脱离文档流。
重叠盒子的基础就是定位！
绝对定位脱离标准文档流 完全脱离
父相子绝:
一般父元素相对定位，作为子元素偏移的基准点
相对定位：
相对定位：相对于自己自己原有的位置，发生偏移。 没有脱离文档流(原本的位置会保存)
固定定位：
始终以 body为基准偏移（也就是始终会固定在当前窗口，不会随着页面的滚动而滚动）
margin的穿透题目：
比如盒子的嵌套的时间如果是说外盒子没有设置边框线；给内盒子设置margin-top会造成外盒子和内盒子一起加上边距：
https://img-blog.csdnimg.cn/img_convert/e12da4f7a3925e9f2da2eda7a3232e2d.pnghttps://img-blog.csdnimg.cn/img_convert/37e4d2f1be1bf8f5e538f10dfa52e2db.png
可以通过以下几种方式来举行处理：
overflow:hidden使用时需要思量盒子溢出部分将会被切除（被遮盖）float:left会影响布局；上面浮动下面会钻到底下position:absolute使用绝对定位会使其脱离文档流display:inline-block;改为行内块状元素
20、表单
form 标签创建表单（不会在页面中有任何的表现效果。）
[*] method: 请求的方式
[*] get : 默认
get方式会把表单数据以字符串的形式 拼接到路径的后边 相对不安全<br /> 如果表单数据较多 或者有一些私密数据 不推荐使用get
[*] **post: **post会把表单数据以数据块的情势 发送到后台，相对安全
[*] **action: **指定处理该表单的服务器步伐路径
表单提交后 会默认跳转页面！
表单元素：
input 输入框 属性：
type:表单的输入类型
text任意文本类型 默认值password密码类型 非明文radio单选类型checkbox复选 /多选button普通按钮image图片hidden隐藏 有一些属性，我们需要把它发送到后台，但是又不想让用户看到，就可以隐藏file文件reset清空/重置submit提交 h5之后新增：
time
date
datetime
datetime-local
color
range
week
month
number
name:
表单元素的名字
当数据发送到后台服务器时，服务器也可以通过 name属性来区分表单的值。
value:
表单元素的初始值
select option 下拉框
(disabled失效不能被选择)
（selected默认选中）
select表示创建下拉框
option 表示下拉框中每一个选项
textarea 文本域
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]