黑马程序员技术交流社区
标题:
html
[打印本页]
作者:
fany
时间:
2019-6-6 08:59
标题:
html
电脑 pc端页面布局（html+css）
移动端页面布局（html5 + css3 ）
手机
ipad
HTML5：
新增的语义化标签
header 头部标签
nav 导航标签
article 内容标签
section 块级标签
aside 侧边栏标签
footer 尾部标签
音频标签（audio）
属性
值
描述
autopl ay
autoplay
如果出现该属性，则音频在就绪后马上播放。
controls
controls
如果出现该属性，则向用户显示控件，比如播放按钮。
loop
loop
如果出现该属性，则每当音频结束时重新开始播放。
preload
preload
如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。
src
url
要播放的音频的 URL。
视频标签 (video)
属性
值
描述
autoplay
autoplay
视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controls
controls
向用户显示播放控件
width
pixels (像素)
设置播放器宽度
height
pixels (像素)
设置播放器高度
loop
loop
播放完是否继续播放该视频，循环播放
preload
auto（预先加载视频）
none（不应加载视频）
规定是否预加载视频(如果有了autoplay 就忽略该属性）
src
url
视频url地址
poster
Imgurl
加载等待的画面图片
muted
muted
静音播放
input表单标签
type="email"
限制用户输入必须为Email类型
type="url"
限制用户输入必须为URL类型
type="date"
限制用户输入必须为日期类型
type="time"
限制用户输入必须为时间类型
type="month"
限制用户输入必须为月类型
type="week"
限制用户输入必须为周类型
type="number"
限制用户输入必须为数字类型
type="tel"
手机号码
type="search"
搜索框
type="color"
生成一个颜色选择表单
新增的表单属性
属性 值
required
required
表单拥有该属性表示其内容不能为空，必填
placeholder
提示文本
表单的提示信息，存在默认值将不显示
autofocus
autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete
off / on
当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 默认已经打开，如 autocomplete=”on “ 关闭 autocomplete =”off” -需要放在表单内同时加上name属性 -同时成功提交
multiple
multiple
可以选中多个文件提交
css3：
类选择器 属性选择器 结构伪类选择器 权重为10
属性选择器
1. E[att] 选择具有att属性的E元素。
2. E[att="val"] 选择具有att属性且属性值等于val的E元素。
3. E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素。
4. E[att$="val"] 选择具有att属性且属性值为包含val的字符串的E元素
5. E[att*="val"] 选择具有att属性属性值为包含val的字符串的E元素。
结构伪类选择器
:first-child
:last-child
:nth-child(n)
n可以是数字、单词、公式（从0开始）
不考虑元素的类型
指定父元素
:first-of-type
:last-of-type
:nth-of-type()
考虑元素的类型
伪元素和标签选择器一样 权重为1
伪元素选择器
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
content不能省略，可以设置为空
2D转换
移动 transform:translate(x,y)
x,y可以是具体的像素值，还可以是百分比
1. translate中的百分比单位是相对于自身元素的宽和高 translate:(50%,50%);
2. translate类似定位，不会影响到其他元素的位置
对行内标签没有效果
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2