1. HTML5
meta标签
<meta name="keywords" content="HTML5,前端,CSS3">
<meta name="description" content="这是一个非常不错的网站">
语义化标签
<!--
标题标签:
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
-->
<!--
块元素（block element）
- 在网页中一般通过块元素来对页面进行布局
行内元素（inline element）
- 行内元素主要用来包裹文字 <p></p>
-->
<!--
布局标签（结构化语义标签）：
header 表示网页的头部
main 表示网页的主体部分(一个页面中只会有一个main)
footer 表示网页的底部
nav 表示网页中的导航
aside 和主体相关的其他内容（侧边栏）
article 表示一个独立的文章
section 表示一个独立的区块，上边的标签都不能表示时使用section
div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
span 行内元素，没有任何的语义，一般用于在网页中选中文字
-->
三种html列表
1、有序列表
2、无序列表
3、定义列表
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
</dl>
超链接、图片、内联框架、音视频
<a href="https://www.baidu.com">超链接</a>
<img src="./img/1.gif" >
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
<!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径 -->
<audio controls>
<!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ -->
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>
实体（转义字符）
 ； 空格
> ； >
< ； <
© ； 版权符号
2. CSS3
使用CSS来修改元素的样式（3种方法）：
1.内联样式（ 注意：开发时绝对不要使用内联样式）
<p style="color:red; font-size: 60px;">少小离家老大回，乡音无改鬓毛衰</p>
2.内部样式表
<style>
p{
color: blue;
font-size: 20px;
}
</style>
<body>
<p> 会当临绝顶，一览众山小</p>
</body>
3.外部样式表（最佳实践）
<link rel="stylesheet" href="./style.css">
选择器
复合选择器
交集选择器：选择器1选择器2选择器3选择器n{} #b1.p1h1.red{}
并集选择器：选择器1,选择器2,选择器3,选择器n{} #b1,.p1,h1,span,div.red{}
关系选择器
子元素选择器 ：父元素 > 子元素{}
后代元素选择器：祖先 后代{}
选择下一个兄弟：前一个 + 下一个{}
选择下边所有的兄弟：兄 ~ 弟{}
伪类选择器 a伪类
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
:nth-child(even){} 选中偶数子元素
:nth-child(odd){}选中奇数子元素
:not() 否定伪类
a:link{}
a:visited{}
a:hover{}
a:active{} 点击
伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
伪元素使用
::before 元素的开始
::after 元素的最后
- before 和 after 必须结合content属性来使用
div::before{
content: 'abc';
color: red;
}
选择器的权重
内联样式 1,0,0,0
id选择器 0,1,0,0 |#id名{}
类和伪类选择器 0,0,1,0 |.class{}
元素选择器 0,0,0,1 | p{} h1{}
通配选择器 0,0,0,0 |*{}
继承的样式 没有优先级
可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，注意：在开发中这个玩意一定要慎用！
class 是一个标签的属性，它和id类似，不同的是class可以重复使用
长度单位
像素
- 屏幕（显示器）实际上是由一个一个的小点点构成的
- 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
- 所以同样的200px在不同的设备下显示效果不一样
百分比
- 也可以将属性值设置为相对于其父元素属性的百分比
- 设置百分比可以使子元素跟随父元素的改变而改变
em
- em是相对于元素的字体大小来计算的
- 1em = 1font-size
- em会根据字体大小的改变而改变
rem
- rem是相对于根元素的字体大小来计算
发表评论
还没有评论，快来抢沙发吧！