HTML
2020-12-21 11:54:54 13 举报AI智能生成
html基础总结
作者其他创作
大纲/内容
B/S、C/S架构
B/S：Browser-Server
Browser：浏览器、Server：服务
由系统服务器更新
比较小
浏览比较方便，不需要更新，对大的视频音频的传输
C/S：Browser-Client
Client：客户端
由用户更新
比较大、打补丁升级
相同的东西从服务器取，只用传输数据就可以了
主要C++进行编写
什么是HTML
定义
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体
结构
树状结构
HTML常用标记
<a>
意义：超链接
元素
href：指定跳转地址
target
意义：窗口的打开方式
_self：默认值在当前页面打开
_blank：在新窗口打开
title：鼠标悬浮时提示
<p>
意义：段落标记
特点：自动换行，且有行间距
<span>
意义：普通行内标记
特点：没有任何特点
<img>
意义：在页面显示图片
元素
src：文件地址
alt：
如果无法显示图像，浏览器将显示替代文本
把鼠标移到图像上方，最新的浏览器会在一个文本框中显示描述性文本
把鼠标移到图像上方，最新的浏览器会在一个文本框中显示描述性文本
width：宽度
height：高度
<table>
<table>
意义：表格
元素
border：边框的宽度
cellspacing：单元格之间的距离
cellpadding：内填充的距离
align
意义：表格浮动方向
left：向左浮动
right：向右浮动
center：居中
width：宽度
%
px
属性：可嵌套
<tr>
意义：表格的一行，可以包含任意个<th>或者<td>
<tb>
意义：表格中一行中的标准单元格
属性：正常字体左对齐
元素
colspan：横向合并单元格
rowspan：纵向合并单元格
<th>
意义：一行中的表头
属性：字体加粗且剧中
元素
colspan：横向合并单元格
rowspan：纵向合并单元格
<br>
意义：换行
<h1>~<h6>
标题标签
<button>
意义：按钮
元素
type="button"
onclick="funcion"
点击时触发函数事件
修饰字符的
<sup>
上角标
<sub>
下角标
<del>
中划线
<i>
意义：字体倾斜
<em>
字体倾斜 与 <i>相同
<strong>
字体加粗。与<i>相同
<b>
意义：字体加粗
列表
ul
意义：无序列表
ol
意义有序列表
il
列表项
HTML表单
<form>
<form>
元素
action
作用： 表单提交之后由哪一个程序来处理
method
get默认为get 显示传递的参数
post：不显示传递的参数
<input>
元素
<input>意义：标记的具体类型默认是test
type 内容可以不写，默认是文本框
type 内容可以不写，默认是文本框
name意义：标记的一个名称，该名称用于生成一个请求参数，
如果没有命名，则浏览器丌会该数据发送给服务器
如果没有命名，则浏览器丌会该数据发送给服务器
type
意义：input 标记的具体类型
元素
input标记
button：普通按钮
hidden：隐藏域
file上传文件
date日期
不同浏览器显示样式不同
color
IE浏览器不支持
number
点击输入数字
每个浏览器不一样
email
错误时会给出提示
checkbox复选框
用同一个name
checked 默认选项
radio单选框
用同一个name，同一组只可单选
checked 默认选项
password密码输入框
框内的字符不可见被加密
text文本输入框
required
必填项
readonly
只读项，会传值，可以选中不能改
disabled
禁止项，不会传值，不可以选中，不可以更改
submit提交按钮
value+改变字符
reset重置按钮
value+改变字符
非input标记
<select>
意义：下拉列表
value 属性： 是提交给服务器的值
multiple 属性：设置该属性值以后，下拉列表变成了一个多选框
<textarea>
意义：多行文本输入框
cols属性：文本的列数（每一行多少字）
rows属性：文本的行数
当使用该标记时，切忌使用换行符，否则换行的内容被视为"空格"
value意义：缺省值
五大主流浏览器
IE
FireFox
火狐
重
Chrome
谷歌
轻
Safire
苹果
Opera
挪威
CSS
什么是CSS
cascading style sheet 级联层叠样式表
CSS为网页提供表现得形式
规则
网页的结构与数据，应该写在.html文件里
网页的表现形式，应该写在.css文件里
网页的行为，应该写在.js文件里
这样做的原因是，将网页的数据、表现、行为相分离，这样做便于开发与维护
CSS选择器
定义：为了查找HTML文档中的节点
语法：选择器{
属性1：属性值；
属性2：属性值；
}
属性1：属性值；
属性2：属性值；
}
“；”代表一条语句的结束
常用选择器
元素|标签选择器
标签名{
属性：属性值；
}
属性：属性值；
}
类选择器
.class名{
属性：属性值；
}
属性：属性值；
}
ID选择器
#id名{
属性：属性值；
}
属性：属性值；
}
后代选择器
h1>div>#d1{}
兄弟选择器
h1+h2
伪元素选择器
：nth-child(n)
：nth-child(2n+1)
伪元素
：before
：after
算上本身，最多有三个
分组选择器（三大分组选择器的组合）
选择器优先级：id > class > 标签 > 浏览器默认样式
样式表优先级：内嵌样式表（标签里面）>内联样式表（<style>）>外联样式表（.css）
常用属性
文字
font-size字体大小
Chrome浏览器默认字体大小为16px
font-family字体样式
font-weight 加粗
bold加粗
normal默认
lighter 变细
bolder
100-900调整字体粗细
font-style
normal默认值
italic斜体
text-align字体浮动方向
left向左
right向右
center居中
text_decoration强调线
line-through（删除线）
underline（下划线）
overline（上划线）
cursor
auto
默认
help
帮助
pointer
超链接
wait
等待
text
文本
display
意义：显示方式
元素
none : 不显示该标记
block : 块元素，自动换行，宽度为父层元素的100%，按块标记的方式显示 <div>
inline : 行内元素，按行内标记的方式来显示 <span>
inline-block : 按行内块标记的方式来显示
table
tablecell
position
意义：位置的摆放方式
元素
static(缺省值)： 浏览器在默认情况下，会按从左到右，从上到下来依次摆放各个标记
absolute（绝对定位）： 不遵循文档流直接定位
relative（相对定位）： 先根据文档流摆放元素，然后再偏移
fixed：自适应定位 绝对定位的另一种表现形式
background
意义：背景
元素
background-color
#aaa|rgb（255，255，255）|red
background-image背景图片
url（img/.png）
镜像渐变
线性渐变
background-repaet
repeat重复（默认值）
no-repeat不重复
x-repeat水平重复
y-repeat数值重复
background-position
fixed
scroll
盒子模型
margin
-left -right -top -bottom
border
宽度 虚实 颜色
颜色：tranparent 透明色
-left -right -top -bottom
padding
-left -right -top -bottom
内填充值变大时会撑开整个DIV的大小
left|right|top|bottom
必须有positio：absolute|relative才能生效
列表
list-style-type
意义：列表样式
样式
disc实心圆（默认值）
none不显示
circle空心圆
square实心方块
decimal数字
块标记
<div>
<p>
<hn>
<table>
<ul>
<ol>
<li>
行内标记
<span>
<a>
<img>
<input>
CSS3
border-radius
圆角效果
左上 右上 右下 左下
%宽和高的百分比
px圆角的半径
backgroung（渐变色）
线性渐变
linear-gradient（方向（to top）|角度（180deg），#ffffff，#000000）
镜像渐变
boxsahdow
盒子阴影
x轴 y轴 模糊半径 扩散半径 颜色 里外
文本溢出的处理方式
rext-overflow
clip剪切
elipsis省略
overflow
hidden溢出的部分隐藏
white-space
nowrap不换行
自定义字体@font-face
font-family
“my-font“
src：url
filter
drop-shadow
x ,y 模糊半径 颜色
CSS3动画——变形
rotate旋转
rotate
（10deg,10deg）
以DIV对角线的交点为中心
rotateX
（10deg）
3D旋转
前后反转
rotateY
（10deg）
3D旋转
左右翻转
skew(扭曲)
skew
（10px，10px）
在（2n+1）Π/2值时函数不连续
skewX
(10px)
仅在水平方向扭曲
skewY
(10px)
仅在竖直方向扭曲
scale(缩放)
scale
(1.5,0.5)
在水平和竖直方向缩放
scaleX
(0.5)
水平方向缩放
scaleY
(0.5)
竖直方向缩放
translate(位移)
translate
（10px，10px）
在水平和竖直方向位移
translateX
（10px）
水平方向位移
translateY
（10px）
竖直方向位移
martix
CSS3动画——过渡
transition
要改变的属性的名称
不是所有的属性都能改变
duration
完成一次过度需要的时间
timing-funcitioin
ease（默认值）
先慢，再快，再慢
linear
匀速
ease-in
先快再慢
ease-out
先慢再快
iteration-icount
infinate
一直循环
n∈n*
direction
下一次播放是否逆向
play-state
播放暂停
dely
经过多少秒后开始过度
CSS3动画——自定义动画
@keyframes
from{}to{}
%0{}50%{}100{}
animation
name
自定义动画名
duration
延迟时间
timing-funcitioin
ease（默认值）
先慢，再快，再慢
linear
匀速
ease-in
先快再慢
ease-out
先慢再快
fill-mode
水平方向位移
iteration-icount
infinate
一直循环
n∈n*
play-state
播放暂停
direction
下一次播放是否逆向
弹性盒子模型——flex
在盒子模型基础之上添加了响应式布局
display:flex
显示方式为弹性盒子模型
align-items
交叉轴居中center
flex-direction
row（默认值）
justify-content
主轴居中center
order
值越小越靠前
flex
占容器剩下宽度的几份
0 条评论
下一页
为你推荐
查看更多
