HTML
2018-11-28 13:54:32 2 举报AI智能生成
除上述
作者其他创作
大纲/内容
HTML
1.1 html 是什么？
是超文本标记语言（hyertext markup language）
1.2 文本结构
头部<head>和身体<body>
1.3 各种标签
无结尾标签
mate:主要用于消息头
br：换行
标记
a：超链接
witdh：宽度
height：高度
img: 图片的引用
tr:列
td：列
table：表格
border:边框 单位是像素
cellspacing：单元格与单元格之间的间隙
cellpadding：单元格与单元格里内容之间的间隙
align：水平对齐方式，值有center，right，left
colspan：跨列合并单元格
rowspan：跨行合并单元格
valign：垂直对齐，值有top，middle，bottom
1.4 HTML中的注释
<!-- -->
1.5 引入css样式的方式
内部引用
<style> .context{ color:red;}</style>
外部引用
<link rel=\"stylesheet\" href=\"1.css\">
1.6 引入脚本
内部引入
头部引入
<script >
当前行引入
就近原则
外部引入
.js 脚本引入
1.7 主要浏览器
IE
firefox
chrome
safari
opera
2.1 form表单
各种元素
<input>
input输入类型
text：文本输入的单行字段
password：定义密码字段
sumbit：提交表单到表单处理程序的按钮
radio：定义单选按钮
CheckBox：定义复选框
data：定义日期
<option>
定义等待的选择项
<textaera>
定义多行输入字段
<button>
定义可点击的按钮
属性
name：定义表单同组
method：表单的提交方式，共有8种，常用的有两种post和get
post：更安全；默认缺省值无限；URL中不显示提交的值
get:默认缺省值4k左右；请求在不改变服务器端配置的情况下不支持中文
options： 返回服务器针对特定资源所支持的HTTP请求方法。也可以利用向Web服务器发送'*'的请求来测试服务器的功能性。
head 向服务器索要与GET请求相一致的响应，只不过响应体将不会被返回。这一方法可以在不必传输整个响应内容的情况下，就可以获取包含在响应消息头中的元信息。
PUT 向指定资源位置上传其最新内容。
DELETE 请求服务器删除Request-URI所标识的资源。
TRACE 返回显服务器收到的请求，主要用于测试或诊断。
CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
value：规定输入字段的初始值
action
css样式表
css选择器
标签选择器
class选择器
id选择器
分组选择器
选择器的派生（包含选择器，子类选择器）
样式的继承：字标记会继承父标记的样式
样式的优先级：内联>内部>外部>默认
两个关键属性
display
none:不显示该标记
block：按块标记的方式显示
inline：按行内标记的方式来显示
inline-block：按行内块标记的方式来现实
position
relative（相对定位）：先按照默认的方式摆放，在偏移
static（缺省值）：浏览器在默认的情况下，会按从左到右，从上到下来依次摆放各个标记
absolute（绝对定位）：相对父标记偏移
fixed :自定义定位
块标记和行内标记
css3
圆角效果
border-radius：10px；所有角都使用半径为10px的圆角可以诠释圆形
border-radius：5px 4px 3px 2px； 四个半径值分别为左上角 右上角 右下角和左下角，顺时针
border-radius的值有px，百分比或者em，但兼容性不是太好
实心上半圆： 把高度（height）设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致
实心圆：把宽度（width）与高度（height）值设置为一致（也就是正方形），并把四个角值都设置为他们的一半
阴影效果
box-shadow：x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式
inset可以写在参数的第一个或者最后一个，其他位置是无效的
添加多个阴影： 只需要用逗号隔开
渐变色彩
线性渐变：background-image： liner-gradient（to bottom ，#fff ， #999）
径向渐变：background：radial-gradient（yellow，red） ；
指定渐变起始点位置：radial-gradient（circle at 1px 5px，yellow，red）
指定颜色断点：radial-gradient（closest-side circle at ，yellow 33.33% ， red 66.66%）
动画效果
变形
旋转rotate（）： 通过指定的角度参数使元素相对原点进行旋转 transform：rotate（15deg）
扭曲skew（）： 以其中心位置围绕x轴y轴按照一定的角度倾斜 transform：skew（x，y）
line-height：行高 参数为px
缩放scale（）： 让元素根据中心原点对对象进行缩放
位移translate(): 可以将元素向指定的方向移动
过渡属性transition-property
transition-property:指定过渡或动态模拟的css属性
transition-property:制定完成过渡所需要的时间
transition-timing-function：指定过渡函数
ease：默认值，从开始到终止速度由快到慢
liner：恒速
ease-in：速度越来越快，呈加速状态，为渐隐效果
ease-out：速度越来越慢，一种减速效果
ease-in-out：先加速后减速
transition-delay：指定开始出现的延迟时间
弹性盒子flexbox
flex-direction：指定主轴的方向，从而改变项目的排列方向
row：默认，从左到右横向排列
row-reverse：从右到左，横向
column：从上到下，纵向
column-reverse：从下到上，横向
flex-wrap：指定装不下时是否换行
no-wrap：默认不换行
wrap：换行
wrap-reverse：反向换行
flex-fiow：是flex-direction和flex-wrap的复合属性
justify-content：定义了项目在主轴上的对齐方式
flex-start:左对齐（默认）
flex-end：右对齐
center：居中
space-between：两端对齐（项目间间隔相同）
space-around：两端间隔对齐（项目间间隔是项目与边框间隔的2倍）
align-items:定义项目在交叉轴（即纵轴）上如何对齐
stretch：未设置高度（或height auto）的项目占满整个容器高度（默认）
flex-start：交叉轴起点对齐
flex-end：交叉轴终点对齐
center：交叉轴中点对齐
baseline：项目第一行文字的基线对齐
align-content：定义多根轴线的对齐方式
strech:轴线占满整个交叉轴
flex-start：与交叉轴的起点对齐
flex-end:与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线间间隔相等
space-around：每根轴线两侧的间隔都相等
0 条评论
回复 删除
下一页
