目录
前端HTML5基础内容
HTML页面内容
设置网页关键字；
<meta name="keywords" content="页面">
设置网页的描述（content后为该页面的描述）；
<meta name="description" content="本人自己设计的页面">
设置请求的重定向，content后先跟秒数，再跟要跳转到的网址（例子为三秒后跳转至百度）；
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
可以将样式表编写到外部的css表中，通过link标签将外部的css文件引入当前界面。也可以将CSS样式编写到head中的style标签里 ，将样式表编写到style标签中，然后通过css选择器选中指定元素，可以同时为这些元素一起设置样式，这样可以使样式进一步的复用，是我们推荐的使用方式（例子将字体颜色设置为cornflowerblue，字体大小设置为30像素）；
<style type="text/css">
p{
color: cornflowerblue;
font-size: 30px;
}
将样式直接编写在style中成为内联样式，内联样式只对元素中的内容起作用
<p style="color: aqua; font-size: 20px;">锄禾日当午</p>
iframe使用内联框架引入一个外部界面，src：指向一个外部页面的路径，可以使用相对路径。frameborder:值为1时有边框，为0时没有边框。width,height,name属性都可以添加。一般不使用内联框架，因为框架中的内容不会被检索；
<iframe src="练习1.html" frameborder="1"></iframe>
<iframe src="index.html" frameborder="1" name="apple"></iframe>
跳转的位置直接在href中写"#"+"所在位置的id"就可以跳转到该位置了
<a href="#bottom">点击跳转到id为bottom所在的位置</a>
a标签中的target可以指定链接打开的位置
_self：表示在当前窗口打开
_blank：表示在新的窗口打开
<a href="https://www.baidu.com" target="_blank">超链接</a>
center标签里的内容会自动居中显示
<center>I Love You</center>
创建超链接时，如果地址不确定可以直接写一个#作为占位符，点击超链接不会跳转,但可以回到链接顶部（br是换行符）；html中id可以作为标签的唯一标识，id属性在同一个页面中只能有一个不能重复
<a id="apple" href="#">这是一个链接</a><br>
发送电子邮件的超链接:href="mailto：邮件地址"，点击后自动打开计算机中默认的邮件客户端，并且将收件人设置为mailto后的邮件地址，没有客户端会根据浏览器打开其他；
<a href="mailto:[email protected]">点击发送邮件给我</a><br>
在HTML页面可以使用CTRL+?添加注释
<!--需要注释的内容--!>
块元素和内联元素
块元素就是会独占一行的元素，与其内容和宽度无关；例如div、p表示一个段落、h1表示一个标题；div标签没有任何语义，就是一个纯粹的块元素，并且不会为里面的内容设置任何样式，主要是用来对页面进行布局的。
内联元素（行内元素），指的是只占自身大小的元素，不会占用一整行，当一行占不下会自动换行；例如a、img、iframe、span；span标签没有任何语义，专门用来选中文字，并为文字设置样式
<span style="color:blue;">文字内容</span>
块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式；一般情况下块元素可以包含内联元素，但内联元素不会包含块元素。
a元素可以包含任意的元素，除了它本身。
<a href='#'>
<div>
文字内容
</div>
</a>
<a><a>不能这样写</a></a>
p元素不能包含其他任何块元素。
<p><div>不能这样写</div></p>
<p><p>这样也不行</p></p>
CSS页面基础内容
css的注释，在style标签中也用css注释；
alt+/是提示功能
ctrl+回车 不论光标在哪个位置都可以可以换行
css的语法：选择器 声明块
选择器：选中页面所有指定元素，并且将声明块中的样式应用到对应的选择器元素；语法：标签名{}
声明块：用一对{}括起来，里面是一组一组的名值对结构，多个声明之间用分号隔开，样式名和样式值之间用冒号连接；
<style>
p{color:red;}
h1{color:blue;}
</style>
id选择器：通过元素的id属性值选中唯一的一个元素。语法：#id属性值{}
<style>
#p1{fonts-size=50px;}
</style>
<p id="p1">文字内容</p>
可以为元素设置class属性，class属性和id属性类似，不过class属性可以重复；拥有相同class属性值的元素，我们说他们是一组元素。
类选择器：通过元素的class属性值选择一组元素。语法：.class属性值{}
<style>
.p2{color:yellow;}
</style>
<p class="p2">文字内容1</p>
<p class="p2">文字内容2</p>
<p class="p2">文字内容3</p>
class可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开。
<style>
.p2{color:yellow;}
.hello{fonts-size:50px;}
</style>
<p class="p2 hello">文字内容1</p>
<p class="p2">文字内容2</p>
选择器分组(并集选择器）：通过选择器分组可以同时选中多个选择器对应的元素。语法：选择器1，选择器2，...，选择器n{}
<style>
#p1,.p2,h1{background-color:yellow;}
</style>
通配选择器：可以用来选中页面中的所有元素。语法：*{}
<style>
*{color:blue;}
</style>
复合选择器（交集选择器）：可以选中同时满足多个条件的元素。语法：选择器1选择器2选择器n{}。对于id选择器来说不建议使用复合选择器。
<style>
#p1.p2h1{background-color:yellow;}
</style>