HTML简单用法
标签的属性
1.一般以键值对出现
2.属性名小写,属性值用双引号括起来
3.如果属性值和属性名完全一样.直接写属性名即可
<h1 style="color:red">Hello world!</h1>
这个h1标签的属性style被设置成了"color:red"
,所以显示出来是红色的
body标签中的基本标签
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.
<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
<b> <strong>: 加粗标签.
<strike>: 为文字加上一条中线.
<em>: 文字变成斜体.
<sup>和<sub>: 上角标 和 下角表.
<br>:换行.
<hr>:水平线
<div>:本身无功能,块级标签
<span>:本身无功能,内联标签
block(块)标签的特点:总是在新行上开始;宽度缺省是它的容器的100%,除非设定一个宽度;它可以容纳内联元素和其他块元素。
inline(内联)标签的特点:和其他元素都在一行上;宽度就是它的文字或图片的宽度,不可改变;内联元素只能容纳文本或者其他内联元素。
其他内容参考最后的博客。
CSS的四种引入方式
1.行内式(没有体现出CSS优势,不常用)
<div style="background-color: beige; color: #ff863f;">hello d</div>
2.嵌入式
嵌入式是将CSS样式集中写在网页的<head></head>
标签对的<style></style>
标签对中。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*根据标签名div找到div标签*/
div{
color:red;
background-color: yellow;
}
</style>
</head>
<body>
<div>hello d</div>
</body>
3.链接式
在<head></head>
中写一个<link>
标签:<link type="text/css" rel="stylesheet" href="css_style.css">
,相应的style写在一个css文件中(内容相当于上面<style></style>
标签对中的内容):
/*css_style.css*/
div{
color: aqua;
background-color: blue;
}
4.导入式
直接在<head></head>
中的<style></style>
标签import一个css文件:
<style>
@import "css_style.css";
</style>
CSS的选择器(Selector)
上面的<style></style>
标签中通过标签名div来找到标签,CSS的 Selector 还支持其他的方式来选择标签。
1.*:所有标签
<style>
*{
color: yellow;
font-size: larger;
}
</style>
2.根据标签名
这种方法的缺点是如果有相同类型的标签,CSS样式会对它们都生效。
3.根据id 来选择特定的标签
如果有两个标签<p id="p1">Hello P1!</p>
,<p>Hello p!</p>
,可以通过标签的id来寻找到第一个标签,id的选择器为#
:
<style>
#p1{
color: yellow;
font-size: 45px;
}
</style>
4.根据class 来选择特定的标签
class与id的区别是,class可以是多个标签的属性,但是每个标签的id一定是唯一的。class的选择器为.
。
参考:
https://www.cnblogs.com/yuanchenqi/articles/5976755.html
https://www.cnblogs.com/yuanchenqi/articles/5615774.html