前端基础笔记03

来源：互联网发布：福耀玻璃知乎编辑：程序博客网时间：2024/06/05 20:08

1.html:5 Tab 补全h5结构
如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

2.html中的空格合并现象

html中对缩进空格换行不敏感
不管有多少空格缩进换行浏览器只会当做一个空格来解析

&nbsp 占得是一个汉字的长度，是空格的两倍

空格占得是半个汉字的长度

3.如何显示一段标签

去掉标签的尖括号 <>
用&lt &gt代替

二、没有语义的标签

div
1.默认占一整行

span
1.宽高跟内容相关
2.一行可以放多个span标签

查看div或者span的大小在浏览器右键检查（审查元素）
可在浏览器修改但是并不会修改源码修改font-size 按向上键

css中color是字体颜色没有font-color这个属性
1.0 英文单词表示
2.0 16进制表示
#000000——》#000 6个数12个相同写作一个
34个相同写作一个
56.。。。。。。
3.0 RGB表示
color:rgb(0,0,0);分别对应红绿蓝

rgb表示的颜色范围最广其次16进制其次英文单词

字体的连写：
font：font-style font-weight font-size font-family
font：italic 900 20px "微软雅黑"
注意：font-style 和 font-weight是可选属性
font-size 和 font-family一定要写

4 id选择器与类选择器之间的区别

类名相当于人的姓名（可以重复）
多对多
1.一个标签可以有多个类名
2.一个类名可以作用于多个标签

id名相当于人的身份证号（不可以重复）
1.只能给一个标签设置这个id名
2.一个标签只能有一个id名

一般来说 id名不是给css使用的，而是给javascript使用的

5 id与类名的命名规则

命名的取值范围只能是
0-9 a-z A-Z _ - 并且不能以数字开头

6 其它选择器

1 通配符选择器 *{ }

2 并集选择器

p{ color：red} ==========》》p,div{ color:red}
div{ color：red}

3 交集选择器
p.you{ color：red} ===========》》结果会是小明显示红色

<p class="you">小明</p>
<p>小白</p>
<div class="you">小红</div>

交集选择器书写时注意：选择器的名称组成中如果有标签名
那么标签名必须写在最前面
4 后代选择器
.father p{ color:red }===========》》结果会显示哈哈呵呵嘻嘻红色

<div class="father">
<p>哈哈</p>
<p>呵呵</p>
<div>
<p>嘻嘻</p>
</div>
</div>
<p>啦啦</p>

5 子代选择器
.father>p{color:red}=============》》将会显示哈哈呵呵红色

<div class="father">
<p>哈哈</p>
<p>呵呵</p>
<div>
<p>嘻嘻</p>
</div>
</div>
<p>啦啦</p>

注释：
html中的和css中的/**/ 都是不可以嵌套的嵌套会导致后面浏览器只识别
第一个>或者*/ 而发生错误

三种样式：
1.嵌套样式
<style>
div{color:red}
</style>

2.行内样式

<p style="color:red;font-size:20px"></p>

3.外联样式
新建一个css文件 1.css
<link rel="stylesheet" href="1.css" type="text/css">
注意：不需要加上style标签

阅读全文

1 0