【总结】HTML与CSS（2202.05.11）

HTML:提供（文字、图片、音频、视频、按钮、输入框）等内容的显示。

CSS:将HTML显示的内容进行布局和样式渲染。

JavaScript：提供页面内容的变化。

1. HTML基础知识

HTML： 超文本标记语言（Hyper Text Markup language）

后缀名：.html、.htm、.shtml、.shtm。
.shtml、.shtm：内置的ssi命令，可以和服务器通信，更新页面内容。

DOS操作系统： 兼容的文件只能是后缀名长度 <=3 的。
所以html和htm是一类文件、shtml和shtm是一类文件。

HTML是通过标签将文字、图片等内容显示到页面中的

显示方式：

1.双标签（一般标签）：
<标签名属性名1=属性值1 属性名2=属性值2 ……></标签名>

2.单标签（自闭合标签）
<标签名属性名1=属性值1 属性名2=属性值2 ……>或者
<标签名属性名1=属性值1 属性名2=属性值2 …… />

头部文件说明：

<!--声明这个是html5-->
<!doctype html>
<!--html标签包含head和body的-->
<html lang="en">
<!--head包含html页面的一些配置属性-->
<head><!--  页面的编码方式  --><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!--  html页面标题  --><title>Document</title>
</head>
<!--页面的内容显示标签-->
<body></body>
</html>

2.HTML标签了解

1）文字标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>这是一个页面标题</title></head><body><!-- 标题标签：自带加粗，自带换行：h1~h6 --><h1>我是一级标签</h1><h2>我是二级标签</h2><h3>我是三级标签</h3><h4>我是四级标签</h4><h5>我是五级标签</h5><h6>我是六级标签</h6><!-- 段落标签：p:自带换行 --><p>大熊猫（学名：Ailuropoda melanoleuca）：属于食肉目、熊科、大熊猫亚科、大熊猫属唯一的哺乳动物。仅有二个亚种。雄性个体稍大于雌性。体型肥硕似熊、丰腴富态，头圆尾短，头躯长1.2-1.8米，尾长10-12厘米。体重80-120千克，最重可达180千克，体色为黑白两色，脸颊圆，有很大的黑眼圈，标志性的内八字的行走方式，也有解剖刀般锋利的爪子。大熊猫皮肤厚，最厚处可达10毫米。黑白相间的外表，有利于隐蔽在密林的树上和积雪的地面而不易被天敌发现。</p><p>生活在海拔2600-3500米的茂密竹林里，那里常年空气稀薄，云雾缭绕，气温低于20℃。有充足的竹子，地形和水源的分布利于该物种建巢藏身和哺育幼仔。大熊猫善于爬树，也爱嬉戏。爬树的行为一般是临近求婚期，或逃避危险，或彼此相遇时弱者借以回避强者的一种方式。大熊猫每天除去一半进食的时间，剩下的一半时间多数便是在睡梦中度过。在野外，大熊猫在每两次进食的中间睡2-4个小时。大熊猫99%的食物都是竹子，可供大熊猫食用的竹类植物共有12属、60多种。野外大熊猫的寿命为18-20岁，圈养状态下可以超过30岁。</p><!-- 行内标签：span标签：多个span标签可以显示在一行 --><span>请登录</span> |<span>我的京东</span> |<span>京东快递</span><!-- 文字倾斜：i\em文字加粗：b\strong--><b><i>文字既加粗又倾斜</i></b></body>
</html>

2）图片音频视频以及超链接标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 超链接标签：a --><!-- target = "_blank":在新的标签页打开超链接的指定链接 --><a href="http://www.baidu.com" target = "_blank">百度</a><!-- 换行标签：br --><br><!-- iframe:内联框架 --><!-- px：像素 --><iframe src="https://www.bilibili.com/" frameborder="0" width="100%" height="500px"></iframe><!-- 水平线：hr --><hr><!-- 图片标签：img --><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度logo"><img src="./img/1.jpg" alt="青春无敌漫画美少女" width="200px" height="150px"><!-- 音频：audio --><audio controls src="./img/qinghuaci.mp3">MP3</audio><!-- s视频：video --><video controls src="./img/大熊猫.mp4"></video></body>
</html>

3）列表

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 无序列表ul、有序列表ol --><!-- 列表中的内容被li --><!-- 无序列表:ul --><p>小说</p><ul><li><a href="https://book.qidian.com/info/1023912499/">霸道总裁</a></li><li>斗破苍穹</li><li>斗罗大陆</li></ul><!-- 有序列表:ol --><p>游戏：王者荣耀</p><ol><li>张三</li><li>李四</li><li>王五</li></ol></body>
</html>

4）input标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- input标签：可以实现输入框、可以实现按钮。修改type属性值可以实现不同的功能。placeholder:提示文字--><!-- form:表单标签 --><form method="POST"><!-- type="tel":表示这个输入框要输入的是手机号 --><span>手机号：</span><input type="tel" placeholder="请输入手机号：" value="123456"><br><span>密 码：</span><input type="password" placeholder="请输入密码："><br><!-- value：在input的标签中设置默认值 --><input type="submit" value="登录"><input type="reset" value="重置"></form><!-- 上传文件：type="file" --><input type="file"><!-- 选择颜色：color --><input type="color"><!-- 选择日期和时间 --><br><input type="date"><input type="time"><br><!-- input标签的单选和多选中，input标签是提供选择按钮，label标签是提供选择的内容id属性和for属性相关连，提供input和label一一对应--><!-- 单选 --><!-- 调用id属性使用# --><!-- 单选框中name和id属性值要一致 --><input type="radio" name="性别" id="gender1"><label for="gender1">男</label><input type="radio" name="性别" id="gender2"><label for="gender2">女</label><br><!-- 多选 --><input type="checkbox" name="兴趣" id="intrest1"><label for="intrest1">篮球</label><input type="checkbox" name="兴趣" id="intrest2"><label for="intrest2">足球</label><input type="checkbox" name="兴趣" id="intrest3"><label for="intrest3">皮球</label></body>
</html>

3. CSS选择器

1）CSS选择器基础了解

CSS:层叠样式表。

CSS层叠样式表修改页面中的元素可以精确到像素点。

CSS的使用： 1.行内式。2.内嵌式。3.外链式。

CSS常用的属性：
color : 修改文字的颜色
text-align : 修改文字的对齐方式（左对齐、右对齐、居中对齐）
text-size : 字体尺寸
border : 边框。
margin :外边距
padding : 内边距
font-family : 修改字体样式（宋体、楷体、隶书等）。
banckground : 背景
width：:宽度
height：高度

2）普通单选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- css内嵌式 --><style>/* 这是css的注释方式 *//* 所有标签都自带边距 *//* 通配符选择器："*" */*{margin: 0;padding: 0;}/* CSS选择器 *//* 标签选择器 *//* 页面中存在几个X标签，如果使用标签选择器，所有的X标签都会变成一种样式 */div {width: 250px;height: 250px;background-color:red;}/* 类选择器：class，类选择器使用‘.’调用 *//* 在body标签中查找类名式one的标签 */.one{border:5px solid blue;}/* id选择器使用 ‘#’ 调用 *//* id选择器在body标签中查找id名式one的标签 */#one{border-bottom: 10px solid black;}</style></head><body><!-- div标签：盒子模型。 --><div class="one"></div><hr><div id="one"></div></body>
</html>

3）组合选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 父子选择器：父子选择器使用 > 号连接，左边是父标签，右边是子标签 *//* 找类名是one的标签下的所有子标签h1 */.one > h1{color: red;}.two > ul > li{color: blue;font-family: "黑体";text-align: center;}/* 后代选择器：使用空格连接，左边是祖先，右边是后代 */.one h2{color: red;font-family: "仿宋";text-align: right;}/* 兄弟选择器 ~ 连接 (根据先后顺序排大小，不根据级别)*//* 将类名是one的标签下的子代h1标签的所有比h1标签小的h2标签兄弟改成粉色 */.one > h1 ~ h2{color: pink;}/* 相邻兄弟选择器 + 连接 (根据先后顺序排大小，不根据级别) *//* 将类名是one的标签下的子代h1标签相邻的比h1标签小的h2标签兄弟改成粉色 */.one > h1 + h2{color: yellow;}/* 属性选择器 */input[type=submit]{background-color: blue;color: white;border: none;width: 50px;height: 30px;}/* nth-child选择器: python3.7以上版本才有这个选择器 *//* nth-child选择器不看标签名，执照某个标签是所有同级（同层次）标签下的第几个 */body > div:nth-child(4){border: 5px solid blue;}</style></head><body><h1>我是H1标签</h1><div class="one"><h1>我是一级标签</h1><h2>我是二级标签</h2><h2>我是二级标签</h2></div><div class="two"><p>游戏</p><ul><li>王者荣耀</li><li>英雄联盟</li><li>Pubg</li><li>CS:GO</li></ul></div><div id="one"><input type="submit" value="登录"><br><input type="rest" value="重置"></div></body>
</html>