Web前端笔记

认识HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
</body>
</html>

 

html标签基础

mata 元标签

span 无实意标签

div 无实意标签

p 段落标签

ul 无序列表

ol 有序列表

<input type="radio" name="gender"> radio单选框

<input type="checkbox" name=""> checkbox 复选框

h1~h6 1-6级标题

CSS基础

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- css层叠样式表
    特点：
    1.继承性  
    2.层叠性 可被覆盖
    -->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <!-- 外部样式表、链入样式表 -->
    
</head>
<body>
    <div style="width: 100px; height: 100px; background: lightblue;"><!--行内样式表，极差，不允许使用--></div>
    <ul>
        <li>aaa</li>
        <li class="xiaoHong">bbb</li>
        <li id="xiaoMing" class="xiaoHong">ccc</li>
        <li class="xiaoHong">ddd</li>
        <li>eee</li>
    </ul>

</body>
</html>
li{
    color: red;

}


#xiaoMing{
    color: pink;
}

.xiaoHong{
    color: lightblue ;
}

1.css层叠样式表特点：

继承性

层叠性 可被覆盖

2.css优先级

后来者居上，越往后越说了算
行内样式优先级>头部样式>=外部样式
越精确越说了算id>class>标签
！important优先级最最高，但是不到最迫不得已的时候不要用

3.选择器

li:标签选择器

id选择器，id唯一且不重复

class: 类名选择器

4.权值、权重

行内样式 1000

id 100

class 10

tag 1

 

CSS常用属性

width:宽度

height:高度

background:背景(是一个复合属性)

background-color

text-align:center单行垂直居中

line-height:行高

行快属性

(1)块标签：div,ul,li,ol,h1~h6,p
可以设置宽高
不可以与别人共处一行（如果共处一行的话不能设置宽高）
不设置宽度的情况下，默认宽度是100%（100%取决于父级的大小）

(2)行内标签：span,strong,a
不可以设置宽高
可以与别人共处一行
其宽高由内容撑开

(3)行内块标签：img,input
可以设置宽高
可以与别人共处一行

 

 

 

posted @ 2021-11-07 13:28  梦话！  阅读(38)  评论(0)    收藏  举报