- img标签的属性是什么??
- src图片地址
- Height 高度
- Width宽度
- Title鼠标悬挂文字
Alt文字代替图片
a标签的属性是什么??
1.href 链接地址 可以说地址也可以有自己的地址html页面
2.target 跳转 打开新窗口选项 self 默认 本页面跳转 blank 打开新窗户跳转
3.锚链接 跳到固定位置 a链接的一种href里面加# id 图片上 id属性 再加一个名字
块级元素的定义?块级元素有哪些?
无论内容是多少,元素都是独家的
- p标签
- h1-h6标签
- hr中划线
行级元素的定义?行级元素有哪些?
内容打开宽度,左右都是行内元素,可以放在一排
- a标签
- em倾斜标签
- label加粗标签
- Img图像标签
什么是单标签?
- hr中划线
- br换行标签
- img图像标签
- meta编码标签
双标签有哪些标签?
- a标签
- p标签
- label加粗标签
- h1-h6标签
- em倾斜标签
- html文本标签
- head标签
- title标题标签
- body标签
特殊符号
-  空格
- >大于号
- <小于号
- "双引号
- ©版权符号
- Ctrl,alt的用途
- ctrl /注释
- ctrl A全选
- ctrl K对齐
- ctrl C复制
- ctrl Z剪切
- ctrl V粘贴
- ctrl B加粗
- alt /提示
- alt A微信截图
第二章
ul 声明列表无序列表
li列表项独占一行 块元素
Ol 有序列表 声明列表
li列表项独占一行 块元素
Dl 自定义列表
Dt 总项 dd 分项 列表项独占一行 块元素
Table 表格 border边框宽度 cellpadding 单元格与单元格之间的间距 cellspacing 单元格与单元格内容的间距
Tr 行 一个tr是一行 td、th
单元格 一个td th是单元格 colspan 合并行 往后合并 rowspan 合并列 往下
Video src视频路径 controls播放控件 autoplay 自动播放 loop 循环播放 width height
Source标签 放在Video 里面的标签 视频可以放多种格式 根据自己的支持,浏览器只播放一个
Audio 音频标签 src音频路径 controls播放控件 autoplay 自动播放 loop 循环播放
Iframe 内联框架 name 起名 src 引用地址
Width height
<a href=“跳转地址1” target=“iframe里面的name值”>
<a href=“跳转地址2” target=“iframe里面的name值”>
<a href=“跳转地址3” target=“iframe里面的name值”>
<Iframe name=”name” src=”引用地址” width=“1000px”>
第三章
action提交地址 method 提交方式 get post
input表单标签 type表单类型 name 提交的属性名字 这两个属性必须的
value默认值
type
text 文本类型
password 密码类型
url网址 自带网址验证
submit 提交按钮
email 邮箱 自带邮箱验证
这四个都是文本框 可以输入 可以设置文本框的宽度用size属性 maxlength最大字符输入
submit 提交按钮 写的内容提交到你的action里面
form表单的按钮
submit 提交按钮 点击进行数据提交 value 按钮里面的文字
button 只是一个按钮 可以点击 但是没有效果
rest 重填按钮 把form表单上面输入的数据全部清除
image 图片提交 点击图片会把表单数据提交
跟submit一样提交表单数据的
按钮不需要name属性 提交上面表单的数据
radio 单选按钮 只是在name属性值一样的里面选择一个
checkbox 复选按钮 可以多个选择 提交的时候一起提交 提交的是value的值
select 单独标签 没在input的type里面 下拉框选择 单选 每个option是一个下拉选项 里面填的内容
提交的时候都是name值加上value值 checked默认选中 selected默认选择属性 加到option里面
type="hidden" 隐藏功能
在页面上不占地方 有name和value的话 会进行提交
readonly 只读属性 文本框不能修改的写入 提交的时候会提交 适用于文本框 给上value值
disabled 禁用属性 适用所有表单元素 不进行数据提交了 里面的name和value都不提交
required 必填属性 适用于文本框时必填的内容
适用于单选、多选时,必须选择一个 不填的话提交不了 会有提示让你填写此文段
placeholder=""提示属性 里面的文字后出现在文本框里面
不占字符位置 可以从头开始输入
提交的时候placeholder里面的文字不提交 只适用于文本框
pattern正则表达验证 \d只匹配数字 \w匹配数字跟英文
textarea单独的标签 可以输入多行文字 rows长度 cols宽度
input type="file" 是文件上传类型 要给form标签加上enctype="multipart/form-data"是对文件进行编码
第四章
行内样式 直接在标签里面写style
内部样式 是在head里面写style
外部样式 新建.css文件 然后再head里面应用 用link 标签 href里面填地址
优先级 行内>内部>外部
标签选择器 直接写标签的名后面跟大括号 多个的话用,隔开 p,h1{}
类选择器 在标签里面加class=“值” 在style用.加class的值
Id选择器 在标签里面加id=“值” 在style 用#加id的值
优先级 id选择器>类选择器>标签选择器
后代选择器 body p{} 选择body之下的所有p标签
子选择器 body>p 选择body的下一级的子标签p
相邻兄弟选择器 H1+P{} 选择h1的同级的下一个 紧挨着的p标签
通用兄弟选择器 h1~p 选择的是h1的同级的所有p标签 可以不紧挨着h1标签
Body P:First-child 选择作为子标签的第一个p标签
Body 的第一个子标签要是p
P:last-child 选择作为子标签的最后一个p标签
P:nth-child(3){} 选择作为子标签的具体某一个p标签
这几个p标签要紧挨着
P:nth-of-type(3){} 选择p标签的具体某一个标签这几个p标签不必紧挨着
属性选择器
A[href] 选择a标签里面带href属性的a标签
A[href=”name”] 选择a标签里面href值等于name的a标签
A[href^=”w”] 选择a标签里面href值以w开头的a标签
A[href$=”html”] 选择a标签里面href值以html结尾的a标签
A[href*=”t”] 选择a标签里面href值 b包含t的a标签
第五章
字体属性
Font-size 字体大小 正常字体大小16px
Font-family 字体样式 宋体 楷体
Font-weight 字体粗细 正常400 bold加粗700 lighter变细200
Font-style oblique italic 倾斜 none 正常
Font(style weight size family) 顺序
文本属性
Color 字体颜色
Text-align 水平对齐方式 center right left
Line-height 行高 行间距 默认行高16px
Text-indent 首行缩进 1.3rem字符单位
Text-decoration 下划线 underline overline line-through none
Vertical-align 垂直对齐方式 top middle bottom
Text-shadow 文本阴影 颜色 -x轴平移位置 -y轴平移位置
a链接的属性
A:link 链接未点击时的样式设置
a: visited 链接点击之后的样式设置
A:hover 链接鼠标悬停的样式设置
A:active 链接按住不动的样式设置
设置顺序A:link>a: visited>A:hover>A:active
列表样式
List-style-type disc实心圆 circle 空心圆 square 实心方块
Decimal 数字 none没有
背景样式
Background-color 背景颜色
Background-image背景图片 url(图片路径) 默认全部重复
Background-repeat 默认全部重复 repeat-x x轴重复repeat-yy轴重复
No-repeat 不重复
Background-position 图片定位 10px 10px ,center center
Background:position repeat image color 没有顺序要求
Background-size cover 全部填充 contain 按比例缩放当一个边满足就停止缩放
80% 50%
背景颜色渐变
Background:linear-gradient(to left top,red,green,red)
To 方向 可以写一个方向 也可以写2 一个为水平方向一个为
垂直方向,颜色最少要2个颜色
第六章
边框
边框颜色 boder-color
边框样式 border-style dotted原点虚线 solid 实线 double双实线
Dashed 边框虚线 none 没有
边框宽度 boder-weight blod 400 600
Border-left-style
Boder :宽度 样式 颜色
宽度 样式 颜色
内外边距
外边距 margin 元素与外边元素的间距
Margin:10px 20px 30px 40px;
Margin-left:10px;
Padding:10px 20px 30px 40px;
Padding-left:10px;
边框圆角:
Boder-radius 边框每个角的曲度(半径)
Div(width:100 height:100)Boder-radius:50px(50%);就成一个圆了
Boder-left-radius:20px;
盒子阴影:box-shadow (颜色,x轴偏移,y轴偏移,模糊程度(越大越模糊) )
第七章
Display block把行内元素变为块元素 独占一行,设置宽高有用
Inline把块元素变为行内元素 不独占一行,设置宽高没用
Inline-block 行内的块元素 不独占一行,设置宽高有用
None 隐藏 不占位置
Float 浮动 只有2个方向left right 浮动完之后变为行内元素,原来的地方不占位置
多个元素一起浮动,按顺序排列
清除浮动 浮动之后,边框会塌陷,
Clear left right both
第一种方法
最后加一个空的div给这个div设置clear:both
第二种:给div设置一个宽高,不是很好用
第三种:给最外边的div设置overflow:hidden
第四种:div:after{
Content:“”;
Display:block;
Clear:both
}
第八章
元素定位
Position:相对定位
relative 相对于自己本身的位置进行偏移,原来的位置会被保留,占位置,
偏移之后不占位置
Absolute 绝对定位 相对于已经定位的祖先元素,进行偏移,如果祖先元素没有定位
则相对于浏览器进行偏移,原来的位置不占地方,偏移之后也不占地方
Fixed 固定定位 相对于浏览器边框定位,不管祖先元素有没有定位,都是相对于浏 览器,原来的位置不占地方,偏移之后也不占地方
Position:定位方式;
Left/ringht:20px;
Top/bottom:20px;
定位之后的层次;z-index 默认值为0,越大越往上,只针对于定位过的元素,没定位的设 置没效果
元素的透明度:opacity:0-1之间越大越清晰,越小越模糊,适用于所有的元素
第九章
skew 倾斜函数,单位是deg,倾斜度数,x轴y轴倾斜角度
skewx,skewy 单独方向的倾斜
rotate 旋转函数,单位是deg,旋转度数,按x轴的旋转角度