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