Collection
Collection
html是浏览器唯一理解的语言，html文档结构就相当于人们沟通是要一定的逻辑和语言组织才能相互交流，html文档中是需要通过各种标签达到在页面上显示；css样式规则就是选择器+样式，css层叠样式表存在着显示的优先级区别；盒模型作为html里面最常用的的标签，要清楚各元素对他的可视范围、距离、内容的影响，从而更好的布局。下面，我们就通过html css一些基本的只是来打开本次课程的大门，徐徐了解里面丰富的内容吧！
一、html文档结构
<!-- 声明这是html文档 --> <!DOCTYPE html> <!-- 跟标签 一个文档只有一个 lang设置默认语言 zh-cn是汉语 --> <html lang="zh-cn"> <!-- head不在浏览器显示 只供浏览器读取 meta title style javascript信息 --> <head> <!-- 默认编码字符集 utf-8 --> <meta charset="UTF-8"> <!-- 页面的标题 在页面上标题栏显示 --> <title>HTML文档结构</title> </head> <body> <!-- 双标签内容来自当前文档 --> <h3>我是双标签h3</h3> <!-- 单标签内容引用自外部 --> <img src="static/images/01.jpg" alt="" width="100px;" height="100px;"> <!-- 有一个例外那就是script 引用外部js文件 但是用的双标签 中间内容为空 --> <script src="static/js/js01.js"></script> </body> </html>
点击 "运行实例" 按钮查看在线实例
上述内容总结：
1、html文档有规范完整的结构，共浏览器编译后呈现网页。
2、标签有单双标签之分。双标签成对出现，内容来自当前页面；单标签引用外部资源；有个例外，<script></script>也是引用外部js文件，但这是历史遗留问题。
二、常用标签
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>HTML常用标签</title> </head> <body style="height:3000px"> <!-- div 块级元素 独占一行 宽高可设 看不见摸不着 就是存在 --> <div style="width:100px; height:100px; background-color:aqua;"> </div> <!-- 标题段落 --> <div> <!-- 标题标签 h1-h6 --> <h1>我是h1</h1> <h2>我是h2</h2> <h3>我是h3</h3> <hr> <!-- p标签 段落标签 可以有多个 --> <p>一年奔波，尘缘遇了谁；</p> <p>一句珍重，天涯别了谁；</p> <p>一点灵犀，凭栏忆了谁；</p> <hr> </div> <!-- 文本修饰标签 --> <div> <!-- strong 文本加粗 --> <p>一年<strong style="background-color:rgb(255, 157, 0);">奔波</strong>，尘缘遇了谁；</p> <p>一句<em style="color:blueviolet;">珍重</em>，天涯别了谁；</p> <hr> </div> <!-- 列表标签 --> <div> <h3>购物清单</h3> <!-- ul 无序列表 前面自带小圆点 可嵌套 --> <ul> <li>1.Macbook 1台，10000元，学php</li> <li>2.钢笔 1根，100元，记笔记</li> <li>3.茶杯 1个，100元，喝水</li> </ul> <!-- ol 有序列表 前面自带数字更适合做购物清单 --> <ol> <li>Macbook 1台，10000元，学php</li> <li>钢笔 1根，100元，记笔记</li> <li>茶杯 1个，100元，喝水</li> </ol> <!-- dl 定义列表 适合名称解释 用来做友情链接 --> <dl> <dt>我是小明</dt> <dd>一个在乡下喜欢编程的大叔</dd> <dt>朱老师</dt> <dd>php中文网讲师，一个很棒的老师</dd> </dl> </div> <!-- 表格标签 --> <table border="1" cellpadding="10" cellspacing="0"> <!-- 标题 --> <caption><h3>购物车</h3></caption> <!-- 表头 thead --> <thead bgcolor="aqua"> <tr> <th>序号</th> <th>名称</th> <th>数量</th> <th>价格</th> <th>用途</th> </tr> </thead> <!-- 表身 tbody --> <tbody align="center"> <tr> <td>1</td> <td>Macbook</td> <td>1</td> <td>10000</td> <td>学php</td> </tr> <tr> <td>2</td> <td>钢笔</td> <td>1</td> <td>100</td> <td>记笔记</td> </tr> <tr> <td>3</td> <td>茶杯</td> <td>1</td> <td>100</td> <td>喝水</td> </tr> </tbody> <!-- 表尾 tfoot --> <tfoot> <tr> <td colspan="5">合计：</td> </tr> </tfoot> </table> <br> <hr> <!-- 表单 --> <!-- 表单用来将数据传递到后台 form表单里面的元素我们称为控件 每个控件除了有公共属性 也有自己的特殊属性 --> <form action="" method="GET"> <div> <!-- lable 中的for与控件中的id属性绑定 产生点击lable中的元素 input就被选中 --> <label for="username">用户名：</label> <!-- input文本框 name和value承兑出现 以键值对的形式传给数据库 placehoder 文本框中默认值--> <input type="text" id="username" name="username" value="" placeholder="请输入用户名"> </div> <div> <!-- label也可这种形式 --> <label>密 码：<input type="password" name="password" placeholder="请输入密码"></label> </div> <div> <!-- 单选框 控件的那么必须是一样 --> <label>男 <input type="radio" name="gender" value="man" checked> </label> <label>女 <input type="radio" name="gender" value="woman"> </label> </div> <div> <!-- 复选框下的控件 name后加【】意思是他们可以一类的一组值那么用数组 --> <label>喝酒 <input type="checkbox" name="hobby[]" value="drink"> </label> <label>抽烟 <input type="checkbox" name="hobby[]" value="smoke" checked> </label> <label>烫头 <input type="checkbox" name="hobby[]" value="head"> </label> </div> <div> <!-- 下拉框 --> <label for="edu">学历：</label> <!-- select和option的value值是动态绑定的 --> <select name="edu" id="edu" value=""> <option value="1">小学</option> <option value="2">中学</option> <option value="3" selected>大学</option> </select> </div> <div> <!-- 文本域 --> <label for="commn">请留言：</label> <textarea name="commn" id="commn" cols="30" rows="10" placeholder="最少15个字" value=""></textarea> </div> <!-- 提交 --> <input type="submit" value="提交"> <!-- 重置 --> <input type="reset" value="重置"> <!-- button默认是提交 我们改为button 用来ajax异步加载 --> <button type="button">注册</button> </form> <hr> <!-- 图片和多媒体 --> <img src="static/images/01.jpg" alt="秋季" width="100px; height:200px;"> <br> <!-- 多媒体 --> <video src="" controls="controls" width="500px;" height="500px;"></video> </body> </html>
点击 "运行实例" 按钮查看在线实例
以上内容总结：
1、标题段落标签。h1-h6，有自己的本身样式；p 段落标签，可以重复使用。
2、文本修饰标签。（strong em）之类的，他们针对文本，修饰局部。
3、列表标签。有ul ol dl三种。
4、表格标签。<table>下有<caption><thead> <tbody><tfoot>。每行用<tr>,单元格中有<th><td>;<th>是表头自带样式。
5、表单标签。form用来给服务器传输数据，里面的元素都是form的控件。控件中的公共属性，在各自中也有特殊的要求。
6、图片和多媒体标签。都是单标签，引用外部资源。
三、css选择器及优先级
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器基础及优先级</title>
</head>
<body>
<!-- 样式规则 -->
<div>
<!-- 样式规则=选择器+样式声明 -->
<img src="static/images/css.png" alt="样式表">
</div>
<!-- 内联样式 直接给标签加样式用style -->
<h3 style="background-color: blueviolet; color: #fff;">样式规则 = 选择器 + 样式声明</h3>
<h3 style="background-color: blueviolet; color: #fff;">样式规则 = 选择器 + 样式声明</h3>
<h3 style="background-color: blueviolet; color: #fff;">样式规则 = 选择器 + 样式声明</h3>
<hr>
<!-- 多组重复的就需要 内部样式 只能用于该页面 -->
<style type="text/css">
/* 标签选择器 */
h3 {
background-color: chocolate;
color:darkgray;
/* 层叠样式表就是一层层堆叠 层级在外面就越优先显示 */
color: #000;
}
</style>
<h3>样式规则 = 选择器 + 样式声明</h3>
<h3>样式规则 = 选择器 + 样式声明</h3>
<h3>样式规则 = 选择器 + 样式声明</h3>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css优先级</title>
<!-- css外部样式引用 可多个文件重用 -->
<link rel="stylesheet" href="static/css/html4.css">
<style>
/* 内部样式优先级高于外部样式 */
h3 {
background-color: black;
}
/* 在选择器层面上 Id>类>标签 */
.bg-red {
background-color: red;
}
#bg-blue {
background-color: blue;
}
</style>
</head>
<body>
<h3 class="bg-red">样式规则 = 选择器 + 样式声明</h3>
<h3 class="bg-red" id="bg-blue">样式规则 = 选择器 + 样式声明</h3>
<!-- 内联样式优先级高于id -->
<h3 class="bg-red" id="bg-blue" id="first" style="background-color: darkgreen;">样式规则 = 选择器 + 样式声明</h3>
</body>
</html>点击 "运行实例" 按钮查看在线实例
以上总结：
1、样式规则：选择器+样式
2、优先级：选择器层面上：ID》类》标签；总体上：js》内联》ID》类》标签》外联
四、盒模型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒模型初探</title> <!-- 引入盒模型 --> <link rel="stylesheet" href="static/css/html5.css"> </head> <body> <!-- 盒模型是块级元素 内容上包括宽 高 和 背景色 可视区域上在内容基础上还有内边距和边框线 位置上外边距决定了当前模型与其他元素的距离--> <!-- 盒模型 --> <div class="box1"> <div class="box2"> </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
.box1 {
width: 200px;
height: 200px;
background-color: lightblue;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;
/* 可以简写:按顺时针 */
padding: 20px 30px 40px 50px;
/* 如果左右相等30,而上下不相等20,40,可以这样简写 */
padding: 20px 30px 40px;
/* 如果上下也相等40 */
padding: 40px 30px;
/* 大家可注意到规律了,不论是二个,还是三个参数,第二个总表示左右内边距 */
/* 如果四个方向全部相等,例如20 */
padding: 20px;
/* 边框与内边距相比, 不是透明的是可见的,除了宽度,还可设置线条样式和颜色 */
/* 上边框 */
border-top-width: 10px;
border-top-style: solid;
border-top-color: red;
/* 右边框 */
border-right-width: 10px;
border-right-style: dashed;
border-right-color: green;
/* 下边框 */
border-bottom-width: 10px;
border-bottom-style: dotted;
border-bottom-color: blue;
/* 左边框 */
border-left-width: 10px;
border-left-style: double;
border-left-color: black;
/* 以上样式与可以简写 */
border-top: 10px solid red;
border-right: 10px dashed green;
border-bottom: 10px dotted blue;
border-left: 10px double black;
/* 如何每个方向的边框宽度,样式与颜色是一样的,还可以进一步简写 */
border: 10px solid red;
/* margin有很多特殊的规则,后面单独讨论 */
}
.box2 {
height: inherit;
background-color: wheat;
}点击 "运行实例" 按钮查看在线实例
以上总结：
1、一切皆盒子.
2、盒模型包括：内容>>内边距>>边框>>外边距，其中除了外边距，其他都是可视范围。
3、内外边距如果有四个值时顺序是上右下左；三个是上，左右，下；两个是上下，左右；
4、margin padding border 都可以简写。
