2022.7.6 HTML入门，CSS基本规则和选择器

海涵丶

已于 2022-07-07 11:09:47 修改

阅读量139

点赞数

文章标签：前端

于 2022-07-06 17:05:01 首次发布

本文链接：https://blog.csdn.net/qq1830882455/article/details/125638682

版权

一、自结束标签

1.meta（网页相关信息，元数据），hr（分割线），br（换行），img（图片），input（输入框），link（连接外部CSS样式表，放在 head 里面）

2.meta标签的属性：

charset="utf-8"：中文网页需要用到的声明编码，否则出现乱码。

name="keywords" content="" ：提供网页关键字，关键字用“，”隔开，优化搜索。

name="Description" ：描述网页的信息。

二、a标签用法和一些杂项

1.超链接 <a href="网站地址" target="blank">跳转网页</a> target="blank" 可以使超链接在新标签页打开。

2.根据id跳转 <a href="#head1">跳转标题1</a> 点击这个超链接可以跳转到id为 head1 的标签处。

3.引用同级路径用 ./ ，引用上一级路径用 ../ 。

4.乱文生成 lorem。

三、table表格

1.tr表示行，td表示列。

2.cellspacing 规定单元格之间的空白，cellpadding规定单元边沿与其内容之间的空白。colspan用于合并列，rowspan用于合并行。

    <table border="1" cellspacing="20px" cellpadding="10px">
        <tr>
            <th>姓名</th>
            <th colspan="2">性别</th>
            <!-- <th>年龄</th> -->
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td rowspan="2">18</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <!-- <td>18</td> -->
        </tr>
    </table>

四、列表

有序列表：ol；无序列表：ul；自定义列表：dl（dt，dd）。

五、表单form

1.复选框的两种写法

    <form action="">
        <input type="text">
        <input id="isagree" type="checkbox">
        <label for="isagree">同意</label>
    </form>
    <form action="">
        <input type="text">
        <label>
            <input type="checkbox">同意
        </label>
    </form>

2.下拉框

    <select>
        <option value="1">男</option>
        <option value="2">女</option>
    </select>

option中的value对应标签内的文字，value值会传到后台。

六、块级元素和行内元素

块级元素有：<h1>,<p>,<ul>,<table>,<div>

行内元素有：<b>,<td>,<a>,<img>,<span>

七、img标签title属性

鼠标滑到图片上时显示的内容

八、CSS基本规则

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端练习</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            background-color: blue;
        }
    </style>
</head>

1.div{}就是选择器。

2.花括号内的代码即声明块，用于设置样式。

3.两个background-color就是层叠样式表，上面的会被下面的覆盖。

4.meta中的name="viewport" 能将网页的视口设置为完美视口，开发移动端页面一定要加上不然显示的元素比例会不合适。

5.推荐外部样式表，即用link标签引入CSS资源，可以提高浏览器响应速度，解决页面中样式重复问题，利于代码维护和阅读

九、选择器

1.元素（标签）选择器

h1,p,div{
    color: red;
    font-size: 10px;
}

2.类选择器

.p1.p2{
    color: blue;
    font-size: 30px;
}

注意：在这种情况下，标签的类必须为 class="p1 p2" 才能生效

类选择器也可以结合元素选择器

p.p1{
    ....
}

注意：此时必须是 p 标签并且 class="p1" 才生效

也可以一个标签选择多个类

.p1{
}
>p2{
}

<p class="p1 p2"></p>

3.通配符选择器*{}

所有元素都会生效但是优先级很低，最常用的就是设置margin和padding设置为0。

4.派生选择器

后代选择器例 h1 p{color: red} 标签h1下的p标签以及p标签之下所有标签都生效

子元素选择器例 div>span{color: red} 只有div标签下的第一个span标签才生效

 <!DOCTYPE html>
<html>
<head>
<title>选择器</title>
</head>
<body>
<div class="first">
	<div class="second">
		<p>子代</p>//first的子代
		<div>
			<p>孙代</p>//first的孙代
			<div>
				<p>曾孙</p>//firs的曾孙代
			</div>
		</div>
	</div>
	<div class="third">//first的第二个子代、second的兄弟
		<P>兄弟</P>
	</div>
</div>
</body>
</html>

加上后代选择器效果

.first p{//注意有个空格
		color: red;
}

在这里插入图片描述

使用子选择器效果

.second > p{
		color: red;
}

在这里插入图片描述

以上代码和图片转自 qq_43342172 的文章子代选择器和后代选择器的区别（侵删）

相邻（兄弟）选择器例 div+span{color: red} 在div和span同级的情况下，span会生效，如果是几个连续相同的同级，那么第二个之下的所有都生效

    li+li {
            color: red;
        }

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

5.特殊选择器

伪类选择器：

:first-child{} //第一项生效

:last-child{} //最后一项生效

:nth-child() {} //第n项生效

:nth-child(2n+1) {} //奇数项生效

:nth-child(2n) {} //偶数项生效

:not(:nth-child(n)) //除了第n项都生效

a:link {} //未访问的链接生效

a:visited {} //已访问的链接生效

a:hover {} //鼠标悬浮的链接生效

a:active {} //以选中的链接生效

伪元素选择器：

::first-letter {} //第一个生效

::first-line {} //第一行只能作用于块级

::selection {} //选中

::before {} //在开始位置（用来添加文字）

::after {} //在结束位置（同上）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="./test.css"> -->
    <title>Document</title>
    <style>
        .text::before {
            content: '你好';
        }
        
        .text::after {
            content: '我不好';
        }
    </style>
</head>

<body>
    <p class="text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, quidem? Porro voluptatum, dignissimos ratione ea cum nam voluptate hic optio corporis et in fugit modi amet ullam. Dolorum dolor ipsam beatae. Quisquam facere laudantium magni eaque magnam,
        placeat delectus, vitae repudiandae quidem consequuntur vel ex adipisci modi distinctio odio iste? Aliquid, minus quidem ipsum mollitia cumque impedit nostrum nulla! Nostrum iste molestias cumque quod, veritatis dolor expedita, consequuntur nobis
        reiciendis vero dolorum inventore cum esse. Omnis, nobis eum? Necessitatibus quo aliquam minima fugit voluptatum libero itaque expedita sit? Iste, tempora suscipit? Deserunt voluptatem voluptates tempora ad nihil perferendis labore ullam quo ducimus
        accusantium, obcaecati veritatis, cum est, libero illo suscipit quisquam nisi repellendus mollitia corporis unde eum esse! Tempora corporis nesciunt provident vitae placeat inventore magni nulla repellendus dolorem sit corrupti, officiis laboriosam
        pariatur voluptatibus obcaecati excepturi deleniti quae illo dignissimos magnam? Quos commodi dolores earum eveniet id! Delectus harum illo similique aliquid dignissimos nobis deleniti nostrum et quas ea unde sed quaerat voluptas, qui a! Et in
        vero, recusandae aliquid error consequatur. Quis error nam in a quos eligendi accusamus adipisci illum maxime! Ea unde commodi consequatur officia reiciendis voluptate vel, excepturi pariatur molestiae rem dolore quidem. Ipsum, ducimus? Delectus,
        debitis quas! Dolorem velit praesentium eos odio cum consectetur iste, accusantium architecto facilis dolores, eum cumque quidem laborum minus quo similique sint dolor cupiditate? Doloremque, quos fugiat ex nihil eaque quod sapiente atque iste
        sequi dolore veritatis alias beatae rem autem perspiciatis, voluptatibus earum impedit, ipsa soluta architecto quibusdam sed cumque? Consectetur temporibus vel, omnis amet beatae quas ea eum minus cum dignissimos ullam libero sapiente rerum tenetur
        quisquam eos modi impedit nam alias nihil nesciunt commodi reiciendis aperiam magnam. Eaque nam eum pariatur officiis dolore itaque ipsam magni laborum quia ullam delectus reiciendis error, ad qui quod eos et recusandae? Ut adipisci illo omnis
        hic enim. Et sed laudantium expedita voluptatibus beatae culpa, nesciunt illo vitae, incidunt, inventore possimus sequi veritatis consectetur. Possimus repellendus perspiciatis debitis ducimus, recusandae animi vitae doloribus, libero eligendi
        natus esse suscipit ea, quae impedit ipsum consequuntur consequatur dolore saepe culpa architecto placeat? Est, exercitationem hic accusamus illum repellendus sint facere deleniti repellat, ratione dolorem quisquam magnam impedit, in labore officia
        nemo fugit non tempora reiciendis. Quasi ducimus fugit sunt natus non. Suscipit quis necessitatibus dolores numquam blanditiis sed obcaecati sunt voluptatibus minima, repellat distinctio inventore esse debitis voluptate? Similique possimus repellat
        autem molestias commodi itaque asperiores ipsum earum ut fuga eos aut vitae natus eum sint eligendi expedita iste ad voluptatibus porro, nam eaque labore ex sapiente? Odit laudantium voluptatum alias modi distinctio animi officia minima impedit
        molestias quibusdam! Aliquam nihil voluptas dolore, sequi voluptatem dolorem alias optio repellat cumque iure aliquid unde delectus totam quisquam minima nobis culpa animi dignissimos id facilis reiciendis neque quam laboriosam. Et, voluptate
        rem cupiditate quidem facere sunt non deserunt possimus tenetur rerum dicta ipsum illo, illum dolore aperiam consectetur ullam reiciendis minima earum temporibus expedita ducimus? Quas quod commodi hic rerum deserunt reiciendis aliquam, voluptatem
        porro.
    </p>
</body>

</html>