前端网页设计day01

目录

• 前端HTML5基础内容
  • HTML页面内容
  • 块元素和内联元素
  • CSS页面基础内容

前端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:1111111111@qq.com">点击发送邮件给我</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>