目录
前端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>
标签:网页,样式,day01,元素,选择器,id,内联,前端,页面
From: https://www.cnblogs.com/Wang707/p/17023445.html