day42:HTML标签和CSS选择器

HTML

HTML：超文本标记语言

文档结构

<!DOCTYPE html> <!-- 文档声明 -->

<html lang="en"> <!-- 语言 -->

<head> <!-- 网站配置信息 -->

    <meta charset="UTF-8"> <!-- 解码方式 -->

    <title>三味书屋</title> <!-- 网站标题 -->

</head>

<body> <!-- 网站显示内容 -->

    <h1>三味书屋欢迎你</h1>

</body>

</html>

head标签

1.meta文档字符编码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8"> <!-- 设置字符编码为utf-8 -->

    <title>我的网页</title>

</head>

<body>

    <h1>这是一个网页</h1>

</body>

</html>

2.meta页面刷新

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>这是一个标题</title>

    <meta http-equiv="Refresh" content="5" /> <!-- 网页刷新，5秒一次 -->

</head>

<body>

    <h1>这句话有七个字</h1>

</body>

</html>

3.meta关键字

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>这是一个标题</title>

    <!-- 设置关键字，用于搜索引擎收录和关键字收索 -->

    <meta name="keywords" content="数学，语文，英语" />

</head>

<body>

    <h1>这还是一个栗子</h1>

</body>

</html>

4.meta设置网站描述信息

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>三味书屋</title>

    <!-- 设置网站描述信息，用于在搜索引擎搜索时，显示网页基本描述信息-->

    <meta name="description" content="我们这什么书都有">

</head>

<body>

    <h1>这是一个三味书屋</h1>

</body>

</html>

5.meta触屏播放

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>这是一个标题</title>

    <!--支持触屏缩放-->

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

    <!--不支触屏持缩放-->

    <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->

</head>

<body>

    <h1 style="width: 1500px;background-color: green;">咕叽咕叽！</h1>

</body>

</html>

6.link图标

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>三味书屋</title>

    <link rel="icon" href="ceshi.PNG">

</head>

<body>

    <h1>三味书屋欢迎你</h1>

</body>

</html>

7.head内部标签总结

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>三味书屋</title>

    <meta name="keywords" content="数学，语文，英语，物理">

    <meta name="description" content="三味书屋里面什么书都有">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

    <link rel="icon" href="/image/chicken.icon">

</head>

<body>

    <h1 style="width: 1500px;background-color: green;">三味书屋欢迎你</h1>

</body>

</html>

body标签

1.h1-h6标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h1>AAA</h1>

    <h2>BBB</h2>

    <h3>CCC</h3>

    <h4>DDD</h4>

    <h5>EEE</h5>

    <h6>FFF</h6>

</body>

</html>

运行结果如下图所示

2.br标签:换行

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h1>AAA</h1>

    <h2>BB<br>CC</h2>

</body>

</html>

运行结果如下图所示

3.hr标签:一行横线

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h2>AAA<hr>BBB</h2>

</body>

</html>

运行结果如下图所示

4.a标签:超链接标签

1.不加href属性，就是普通文本显示

<a>python</a>

2.加上href属性，不给href属性赋值

<a href="">python</a>

3.加上href属性，并且给href属性赋值

<a href="http://www.pythonav.com" target="_self">python</a>

要注意:

　　　跳转对应网址的页面

　　　未访问之前是蓝色的字体颜色

　　访问之后是紫色的字体颜色

target属性:

　　_self:在当前标签页打开 href属性值的那个网址

　　_blank:在新的标签页打开 href属性值的那个网址

4.要a标签效果，但是不刷新或者跳转页面

<!-- 这两种写法都可以 -->

<a href="#">校花网</a>

<a href="javascript:void(0);">校花网</a>

5.设置瞄点

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            height: 600px;

            width: 600px;

            background-color: green;

        }

        .c2{

            height: 600px;

            width: 600px;

            background-color: red;

        }

    </style>

</head>

<body>

    <div id="top">顶部位置</div> <!-- 设置瞄点 -->

    <div class="c1"></div>

    <div class="c2"></div>

    <a href="#top">回到顶部</a> <!-- 回到设置瞄点的位置 -->

</body>

</html>

5.img标签:图片标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <img src="ceshi.PNG" alt="图片" title="这是一个图片" width="100" height="100">

</body>

</html>

src属性:图片路径必须写

alt属性:图片加载失败或者正在加载时提示的内容

title属性:鼠标悬浮时显示的内容,不是img标签独有的

width:设置宽度

height:设置高度

6.div标签和span标签

div标签和span标签没有任何的修饰效果

标签分类:

　　块级标签(行外标签):独占一行,h1-h6\p\br\hr\div\ul\li →块级标签能够包含内联标签,和某些块级标签

　　内联标签(行内标签):不独占一行,img\a\span →只能包含内联标签,不能包含块级标签

关于标签的嵌套:

　　块级标签能够设置高度宽度，能够嵌套某些块级标签和内敛标签，p不能嵌套块级标签，也不能嵌套p标签

　　内敛标签不能设置高度宽度，它的高度宽度由内容来决定，只能嵌套内敛标签

7.p标签:上下有边距

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <p>李博伦</p>

</body>

</html>

8.ul标签和ol标签:列表标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

李博伦的爱好

    <ul type="none">

        <li>抽烟</li>

        <li>喝酒</li>

        <li>烫头</li>

    </ul>

c9h的爱好

    <ol type="A" start="2">

        <li>学习</li>

        <li>跑步</li>

        <li>吃饭</li>

    </ol>

</body>

</html>

type属性：控制列表内容前面的效果的

start属性：是控制有序列表标签的起始值的

运行结果如下图所示

9.dl标签(了解)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <dl>

        <dt>吉林省</dt>

        <dd>长春</dd>

        <dd>四平</dd>

        <dt>辽宁省</dt>

        <dd>沈阳</dd>

        <dd>大连</dd>

    </dl>

</body>

</html>

运行结果如下图所示

10.table标签:表格标签(重点)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <table border="1" cellpadding="10" cellspacing="8">

        <thead>

            <tr>

                <th>名称</th>

                <th>年龄</th>

                <th>爱好</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>李博伦</td>

                <td>18</td>

                <td>coc</td>

            </tr>

            <tr>

                <td>c9h</td>

                <td>23</td>

                <td>王者</td>

            </tr>

            <tr>

                <td>ph</td>

                <td>22</td>

                <td>看书</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

也可以合并列和合并行

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <table border="1" cellpadding="10" cellspacing="1">

        <thead>

            <tr>

                <th>名称</th>

                <th>年龄</th>

                <th>爱好</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>李博伦</td>

                <td>18</td>

                <td>coc</td>

            </tr>

            <tr>

                <td rowspan="2">c9h</td> <!-- 合并行 -->

                <td colspan="2">国服第一帅</td> <!-- 合并列 -->

            </tr>

            <tr>

                <td>22</td>

                <td>看书</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

运行结果如下图所示

11.from标签:表单标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="http://127.0.0.1:8001">

</form>

</body>

</html>

action属性: 指定提交路径,提交到哪里去

form表单作用:form表单标签会将嵌套在form标签里面的输入框的数据全部提交到指定路径

12.input标签:输入框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="text" name="username"> <!-- 普通文本输入框 -->

    <input type="password" name="password"> <!-- 密文输入框 -->

    <input type="submit" value="点击确认"> <!-- 提交按钮（触发form表单提交数据的动作） -->

    <input type="reset"> <!-- 重置按钮 清空输入的内容 -->

    <input type="button" value="走你"> <!-- 普通按钮（不会触发form表单提交数据的动作） -->

    <input type="date"> <!-- 时间日期输入框 -->

    <input type="file"> <!-- 文件选择框 -->

    <input type="number"> <!-- 纯数字输入框 -->

    <!-- 单选框 -->

    性别

    <input type="radio" name="sex" value="1">男

    <input type="radio" name="sex" value="2">女

    <!-- 多选框 -->

    喜欢的明星

    <input type="checkbox" name="hobby" value="1">张三

    <input type="checkbox" name="hobby" value="2">李四

    <input type="checkbox" name="hobby" value="3">王五

</body>

</html>

注意：选择框写的时候，尽量将name属性和value属性都写上

运行结果如下图所示

13.select标签:下拉框标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!-- 单选 -->

    性别

    <select name="sex">

        <option value="1">男</option>

        <option value="2">女</option>

    </select>

    <!-- 多选 -->

    喜欢的明星

    <select name="star" multiple="multiple">

        <option value="1">张三</option>

        <option value="2">李四</option>

        <option value="3">王五</option>

        <option value="4">赵六</option>

    </select>

</body>

</html>

运行结果如下图所示

注意:这两种写法完全相同

 <select name="star" multiple="multiple">

 <select name="star" multiple>

14.textarea标签:多行文本输入框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<textarea name="" id="" cols="30" rows="10"></textarea>

</body>

</html>

运行结果如下图所示

CSS

CSS:称为层叠样式表

CSS样式引入方式

第一种:head标签引入

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /* 选择器{css属性名称:属性值;css属性名称:属性值} */

        div{

            width: 200px;

            height: 200px;

            background-color: red;

        }

    </style>

</head>

<body>

<div>李亚大傻吊</div>

</body>

</html>

第二种:外部引入CSS文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="ceshi.css"> <!-- href对应的是文件路径 -->

</head>

<body>

<div>李亚大傻吊</div>

</body>

</html>

创建一个ceshi.css文件

第三种:内联样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!-- 内联样式 -->

<div style="background-color: red;height: 100px;width: 200px;">李亚大傻吊</div>

</body>

</html>

CSS选择器

1.元素选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /* 元素选择器 */

        div{

            width: 100px;

        }

    </style>

</head>

<body>

<div>李亚大傻吊</div>

</body>

</html>

2.id选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!-- id选择器 -->

    <style>

        #d1{

            width: 100px;

            height: 100px;

            background-color: green;

        }

    </style>

</head>

<body>

<!-- id属性值不能重复 -->

<div id="d1">李亚大傻吊</div>

</body>

</html>

3.类选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!-- 类选择器 -->

    <style>

        .c1{

            width: 100px;

            height: 100px;

            background-color: green;

        }

    </style>

</head>

<body>

<!-- 类值可以重复 -->

<div id="d1" class="c1">李亚大傻吊</div>

<div id="d2" class="c2">李亚是猪</div>

<div id="d3" class="c1">李亚蠢蛋子</div>

</body>

</html>

4.属性选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /* 属性查找 */

        [xx]{

            width: 100px;

            height: 100px;

            background-color: green;

        }

        /* 属性带属性值查找 */

        [xx='ss']{

            background-color: blue;

            width: 100px;

            height: 100px;

        }

    </style>

</head>

<body>

<div id="d1" class="c1" xx="ss">李亚是小猪</div>

<div id="d2" class="c2" xx="kk">李亚是小狗</div>

</body>

</html>

5.后代选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /* 后代选择器 */

        .c1 .c2{

            color: darkgrey;

        }

        /* 儿子选择器 */

        .c1 > span{

            color: antiquewhite;

        }

    </style>

</head>

<body>

<div id="d1">

    <span class="c2">这是span1</span>

</div>

<div id="d2" class="c1">

    <span class="c2">这是span2</span>

    <div>

        <span>这是span4</span>

    </div>

</div>

<div id="d3" class="c1">

    <span class="c2">这是span3</span>

</div>

</body>

</html>

6.组合选择器(逗号连接)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /* 组合选择器 */

        #d1 span,#d3 span{

            color: bisque;

        }

    </style>

</head>

<body>

    <div id="d1">

        <span class="c2">这是span1</span>

    </div>

    <div id="d2" class="c1">

        <span class="c2">这是span2</span>

        <div>

            <span>这是span4</span>

        </div>

    </div>

    <div id="d3" class="c1">

        <span class="c2">这是span3</span>

    </div>

</body>

</html>