第一天
1.HTML5的新特性
针对以前的不足,增加了一些新的标签,新的表单控件和新的表单属性等。
1.1 HTML5新增的语义化标签
div对于搜索引擎来说,是没有语义的。
<!-- 头部标签 -->
<header>我是头部</header>
<!-- 导航栏标签 -->
<nav>我是导航栏</nav>
<!-- 某个区域 -->
<article>内容</article>
<!-- 选中某个区域 -->
<section>选中某个区域</section>
<!-- 侧边栏 -->
<aside>我是侧边栏</aside>
<!-- 尾部标签 -->
<footer>我是尾部</footer>
注意:
1.主要针对于搜索引擎
2.可以使用多次
3.在IE9中,需要转换成块级元素
4.移动端更喜欢这些标签
5.还增加了很多其他标签
总结
1.什么是语义化标签
标签具有明确的含义和作用
2.标签语义化的优点
- 页面有清晰的结构
- 浏览器能更好的解析
- 利于浏览器的搜索引擎搜索
- 方便其它设备解析,盲人阅读器根据语义渲染网页
1.2 新增的多媒体标签
1.2.1.视频
语法:
<video src="./media/mi.mp4" autoplay controls loop muted></video>
谷歌浏览器添加静音播放才会自动播放
总结:
1.2.2.音频
语法:
<audio src="./media/music.mp3" controls></audio>
总结:
1.3 新增的input类型
邮箱: <input type="email"/>
网址: <input type="url"/>
日期: <input type="date"/>
时间: <input type="time"/>
**数量: <input type="number"/>**
手机号码: <input type="tel"/>
搜索: <input type="search"/>
文本:<input type="text">
颜色: <input type="color"/>
**<input type="submit" value="提交" />**
总结:
1.4 新增的表单属性
<!-- 搜索 -->
<input name="sear" id="" required placeholder="请输入" autofocus autocomplete="off"/>
<!-- 上传 -->
<input name="" type="file" id="" multiple/>
<!-- 提交 -->
<input value="提交" type="submit"/>
总结:
2.CSS3
的新特性
2.1 现状
- 新增的
css3
特性有兼容性问题 - 移动端支持优于PC端
- 不断改进中
- 应用相对广泛
CSS3
新增选择器
1.属性选择器
根据元素特定属性的来选择元素
<style>
/* 必须是input 但是同时具有 value这个属性 选择这个元素 [] */
input[value]{
color: yellowgreen;
}
/* 只选择 type =text 文本框的input 选取出来 */
input[type=text] {
color: cadetblue;
}
/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
/* 属性选择器是用[属性] [属性=属性值] */
/* 类选择器和属性选择器 伪类选择器 权重都是 10 */
div[class^=icon] {
color: aquamarine;
}
section[class$=data]{
color: bisque;
}
section[class*="-"]{
color: rgb(155, 155, 234);
}
</style>
</head>
<body>
<!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
<input type="text" value="请输入用户名" />
<input type="text" />
<!-- 2. 属性选择器还可以选择属性=值的某些元素 重点 -->
<input type="text" name="" id="" />
<input type="password" name="" id="" />
<!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>
<!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-data">我是安其拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon3-ico">哪我是谁</section>
</body>
效果图
总结:
**注意:**类选择器,属性选择器,伪类选择器,权重都是10。
2.结构伪类选择器
主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素。(出现第一个或第几个一定用的是结构伪类选择器)
/* 选中第一个改变背景色 */
ul li:first-child {
background-color: rgb(218, 224, 122);
}
/* odd是单数 */
ul li:nth-child(odd) {
background-color: #e38a92;
}
ol li:nth-child(2n+1) {
background-color: pink;
}
/* even是双数 */
ul li:nth-child(even) {
background-color: rgb(138, 200, 142);
}
ol li:nth-child(2n) {
background-color: #e29090;
}
/* 选中最后一个改变背景色 */
ul li:last-child {
background-color: antiquewhite;
}
/* 选中第5个改变背景色 */
ul li:nth-child(5) {
background-color: aqua;
}
</style>
</head>
<body>
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ul>
</body>
效果图:
nth-child(n)选择某个父元素的一个或多个特定的子元素
n可以是数字,关键字: even 偶数 ,odd 奇数,公式(公式中的变量只能是n,从0开始)
总结:
1.结构伪类选择器一般用于选择父级里面的第几个孩子
2.nth-child 对父元素里面的所有孩子排序(序号是固定的)先找到第n个孩子,然后再看看是否和e匹配
3.nth-of-type 对父元素里面指定子元素进行排序选择,先去匹配E,然后再根据E找到第n个孩子
4.关于nth-child(n)我们要知道n是从0开始计算的,要记住常用的公式
5.如果是无序列表,我们肯定用nth-child更多
6.类选择器,属性选择器,伪类选择器,权重为10.
3.伪元素选择器
可以帮助我们利于CSS创建新标签元素,而不是HTML标签
注意:
1.before和after创建一个元素,但属于行内元素
2.新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
3.语法:element::before{}
4.before和after必须有content属性
5.before在父元素内容的前面创建元素,after在父元素内容的后面插入元素
6.伪元素选择器和标签选择器一样,权重为1
伪元素清除浮动
本质 1.额外标签法(隔墙法)clear:both;
4. CSS3
盒子模型
CSS3
中可以通过 box-sizing 来指定盒模型,有2个值:即可指定为 content-box、 border-box,这样我们计算盒子大小的方式就发生了改变
1.box-sizing:content-box 盒子大小为width+padding+border
2.box-sizing:border-box 盒子大小为width
5. CSS3
其它特性
1.图片变模糊
滤镜:filter:函数();
例:blur模糊处理 数值越大越模糊 注意数值要加px
单位。
2.计算盒子宽度width:calc
函数
calc()
此CSS函数让你在声明CSS属性值时执行一些计算。
子盒子宽度永远比父盒子小300像素
width: calc(100% - 300px);
"-"前后加空格
6.CSS3
过渡
过度动画:是从一个状态渐渐地过渡到另外一个状态
transition:要过渡的属性 花费时间 运动曲线 何时开始;
1.属性:想要变化的css
属性,宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过渡,写一个all就可以。如果想要写多个属性,利用逗号进行分割。单位不可省。
俩个时间时,第一个是过渡时间,第二个是延迟时间。
过渡的口诀:谁做过渡给谁加。
2.花费时间:单位是秒(s)
3.运动曲线:默认是ease
4.何时开始:单位是秒(s),可以设置延迟触发时间,默认是0s
品优购
1.网站 favicon 图标
1.1 制作图标
1.1 把品优购图标切成 png 图片。
1.2 把 png 图片转换为icon 图标,这需要借助于第三方转换网站,例比特虫:http://www.bitbug.net/
1.2 网站TDK三大标签SEO优化
SEO ( Search Engine Optimization )汉译为搜索引擎优化,是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式
SEO的目的是对网站进行深度的优化,从而帮助网站获取免费的流量,进而在搜索引擎上提升网站的排名,提高网站的知名度
页面必须有三个标签用来符合 SEO优化。
1.2.1 description 网站说明
简要说明我们网站主要是做什么的。
logo SEO优化
- logo 里面首先放一个 h1 标签,目的是为了提权,告诉搜索引擎,这个地方很重要。
- h1 里面再放一个链接,可以返回首页的,把logo 的背景图片给链接即可。
- 为了搜索引擎收录我们,我们链接里面要放文字( 网站名称,但是文字不要显示出来)