今日所学内容
H5C3
HTML5部分：
HTML5的新特性
主要是增加了一些新的标签、新的表单属性，这些特性都有兼容性的问题，基本上要IE9以上的浏览器才能支持，如果不考虑兼容性，可以大量使用新特性
H5新增标签
<!-- 头部部分 -->
<header></header>
<!-- 导航栏标签 -->
<nav></nav>
<!-- 内容标签 -->
<article></article>
<!-- 侧边栏标签 -->
<aside></aside>
<!-- 底部标签 -->
<footer></footer>
H5标签的优缺点：
优点：便于搜索引擎来解析
缺点：会有兼容性问题
HTML5新增的input的type属性的属性值
<!-- 显示用户输入的内容必须是Email -->
<input type="email">
<!-- 限制用户输入的必须为URL地址 -->
<input type="url">
<!-- 限制用户输入的必须是日期类型 -->
<input type="date">
<!-- 限制用户必须输入时间类型 -->
<input type="time">
<!-- 限制用户必须输入月类型 -->
<input type="month">
<!-- 限制用户输入周类型 -->
<input type="week">
<!-- 限制用户输入数字类型 -->
<input type="number">
<!-- 搜索框 -->
<input type="search">
<!-- 生成颜色选择表单 -->
<input type="color">
<!-- 手机号码 -->
<!-- 因为全世界的号码都不尽相同,所以不能做出明确的限制,需要配合JS和正则表达式来限制 -->
<input type="tel">
HTML5新增属性：
<!-- required="required"代表此表单为必填项 -->
<input type="text" required="required"><br>
<!-- placeholder 填写表单的提示信息,如果有默认值将不显示 -->
<input type="text" placeholder="请输入你的前女友"><br>
<!-- autofocus="autofocus代表自动聚焦 页面首次加载时聚焦到该表单元素 -->
<input type="text" autofocus="autofocus"><br>
<!-- 当用户提交内容是浏览器记录用户提交过的内容 -->
<!-- 注意:
1.元素必须有autocomplete="on"
2.元素必须有name属性
3.在浏览器中输入的内容必须提交成功
如果不想被记录,将autocomplete="off"即可 -->
<input type="text" autocomplete="on" name="repeat"><br>
<!-- 可以多选文件进行提交 -->
<input type="file" multiple="multiple"><br>
修改placeholder里面的文字样式(在css文件中写，或者内部样式书写）
input::placeholder {
color: greenyellow;
}
HTML5新增的多媒体标签
<audio>标签 音频标签
当前所支持的三种音频格式
浏览器 MP3 Wav Ogg
IE YES NO NO
Chrome YES YES
常用的属性和属性值
autoplay="autoplay" 自动播放
controls="controls" 向用户展示播放控件
loop="loop"
<video>标签 视频标签
当前视频标签所支持的三种视频格式
浏览器 MP4 WebM Ogg
IE
Chrome
CSS3新增属性
CSS怪异盒模型
css3中可以通过box-sizing来指定盒模型，它分别有两个值，分别为content-box和border-box。
box-sizing：content-box；盒子的大小是width+padding+border（默认值）
box-sizing：border-box；盒子的大小为width；
注意点：
使用box-sizing：border-box；时，padding和border都不要超过盒子不能的宽高
CSS3新增选择器
属性选择器
概念：属性选择器可以根据元素的特定户型来选择元素，这样就可以
<style>
input[value] {
color: skyblue;
}
/* 选择特定属性中的属性值来进行选择,具有type属性的text属性值的input标签 */
input[type="text"] {
color: blue;
}
/* 选择特定属性中以(type)t开头的input标签 */
input[type^="t"] {
color: chartreuse;
}
/* 选择特定属性中以h结尾的input标签 */
input[type$="h"] {
color: coral;
}
/* 选择特定属性中包含e的input标签 */
input[type*="e"] {
color: pink;
}
</style>
</head>
<body>
<input type="text" value="追风少年">
<input type="text" value="追图少年">
<input type="search" value="追分少年">
</body>
结构伪类选择器
概念：
结构伪类选择器主要时根据文档的结构来选择元素，通常用于根据父级元素来选择里面的子元素的情况。
伪元素选择器
nth-child(n)
n是数字的情况（n代表从0开始不断递增的数字）
n是关键字的情况
n是公式的情况
nth-child和nth-of-type的区别：
nth-child对父元素里面所有的子元素排序选择（序号是固定的），先找到第n个孩子，然后再看是否和相应元素匹配
nth-of-type对父元素里面的所有指定的子元素进行排序选择，先去进行相应元素的匹配，再排序去选择第n个元素
|
