菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 李虎跃2022-11-22 [打印本页]

作者: 李维尼 时间: 2023-1-5 23:27
标题: 李虎跃2022-11-22
HTML5和CSS3 HTML5

html5优点：语义更加明确，便于浏览器解析；缺点：大部分标签只有Google和safari支持

新增的input类型（type属性值）

email 内容必须是email类型

url 输入内容必须是完整的地址/域名

date 生成日期控件

time 生成时间控件

month 选择月份

week 选择哪年的第几周

number 输入内容只能是数字

search 可以输入有清除符号的内容

color 生成颜色选择表单元素

新增表单属性

placeholder=“提示文本”，用placeholder时不用value

multiple=”multiple“多选文件进行提交

required=”required“限制此项为必填项

autofocus=“autofocus”让光标自动聚焦到当前表单元素

autocomplete=“on/off”，输入的内容是否被记录，此项必须和name连用才能生效

新增多媒体标签

1.video视频标签

autoplay=autoplay，视频自动播放，必须和muted连用

controls=controls，增加视频播放控件

loop=loop,循环播放

preload=auto/none，视频是否预加载，有autoplay时忽略preload

src=视频地址

poster=加载画面图片地址

muted=muted，静音播放

width=视频宽度

height=视频高度

2.audio音频标签

controls=controls，显示音频播放控件

loop=loop，循环播放

src=音频地址

CSS3怪异盒子模型

border-box大小为盒子width+height，使用box-sizing时padding和border不要超过盒子的宽高

属性选择器

input[value]{样式} 选择具有value属性的input标签

input[type=“search”]{样式} 选择具有type属性的值等于search的input标签

input[type^="t"]{样式} 选择具有type属性的值以t开头的input标签

input[type$="ch"]{样式} 选择具有type属性的值以ch结尾的input标签

input[type*="e"]{样式} 选择具有type属性的值包含e的input标签

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)