HTLM
1、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、做锚点(锚标记/锚记)(锚点也可以跳转到其他页面的指定地方,需要在锚点跳的位置写好路径)**
<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 文本域