html笔记

HTLM

1、HTML基本结构

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 图像

相对路径和绝对路径：

./ 代表当前目录可以不写

.../ 代表返回上级目录

2.1、列表

有序列表（有序号的）

第一章
第二章
第三章

**无序列表** 没有序号的

第一章
第二章
第三章

**自定义列表**

:
第一节
:
第二节
:
第一节
:
第二节

**a标签超链接 **
**1、做超链接 href 放网络网址/本地网页**
你好
**2、做锚点（锚标记/锚记）（锚点也可以跳转到其他页面的指定地方，需要在锚点跳的位置写好路径）**

html 复制代码

<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的无序符号在前面
list-style-position:inside;	li的无序符号在后面
list-style-image:url('路径')	更改无序符号的图标为指定图片

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;

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：

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;
盒子之间的距离问题
盒子之间的距离：
块状元素的垂直距离**：

取两者之间的较大值(上和下)

行内元素之间的水平距离：

取两者之和(左+右)

行内元素的margin和padding 只有水平生效垂直方向不生效

浮动元素：

**水平距离：**两者之和(左+右)

**垂直距离：**两者之和(上+下)

18、渐变效果

/ 渐变色 _ / / _ * radial-gradient径向渐变 _ / /_ linear-gradient 线性渐变 */**

参数一角度 deg

方位 to + 方位向哪里渐变

19、定位

position：absolute / relative / fixed （绝对定位/相对定位/固定定位）
通常使用：top right bottom left 进行调整
概念：
绝对定位：先判断父(不仅仅是直接父亲还包含以上元素)元素有没有进行定位？
1.如果没有：以浏览器窗口左上角原点为基准，偏移。
2.如果定位：以已经定位的父(不仅仅是直接父亲还包含以上元素)元素为基准，偏移。
将元素/标签放到页面中的指定位置上。任意放置。脱离文档流。
重叠盒子的基础就是定位！
绝对定位脱离标准文档流完全脱离
父相子绝: 一般父元素相对定位，作为子元素偏移的基准点
相对定位：

相对定位：相对于自己本身原有的位置，发生偏移。没有脱离文档流(原本的位置会保留)
固定定位：

始终以 body为基准偏移（也就是始终会固定在当前窗口，不会随着页面的滚动而滚动）
margin的穿透问题：
比如盒子的嵌套的时候如果是说外盒子没有设置边框线；给内盒子设置margin-top会造成外盒子和内盒子一起加上边距：

可以通过以下几种方式来进行处理：

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 文本域