目录
接下来是python的进阶学习
HTML+CSS基础
HTML 的全称为：HyperText Mark-up Language, 指的是超文本标记语言。 标记：就是标签, <标签名称> </标签名称>, 比如: <html></html>、<h1></h1> 等，标签大多数都是成对出现的。
css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。
html是开发网页的语言，其代码结构如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>-
第一行
<!DOCTYPE html>是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。 -
<html>...</html>标签是开发人员在告诉浏览器，整个网页是从<html>这里开始的，到</html>结束,也就是html文档的开始和结束标签。 -
<head>...</head>标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。 -
<body>...</body>标签是编写网页上显示的内容。
列表标签
1. 列表标签的种类
-
无序列表标签(ul标签)
-
有序列表标签(ol标签)
<!-- ul标签定义无序列表 --> <ul> <!-- li标签定义列表项目 --> <li>列表标题一</li> <li>列表标题二</li> <li>列表标题三</li> </ul> <!-- ol标签定义有序列表 --> <ol> <!-- li标签定义列表项目 --> <li><a href="#">列表标题一</a></li> <li><a href="#">列表标题二</a></li> <li><a href="#">列表标题三</a></li> </ol>表格标签
-
标签：表示一个表格
<table> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>18</td> </tr> </table>表单标签
1. 表单的介绍
表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器 。
2. 表单相关标签的使用
-
<form>标签 表示表单标签，定义整体的表单区域 -
<label>标签 表示表单元素的文字标注标签，定义文字标注 -
<input>标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式-
type属性
-
type="text" 定义单行文本输入框
-
type="password" 定义密码输入框
-
type="radio" 定义单选框
-
type="checkbox" 定义复选框
-
type="file" 定义上传文件
-
type="submit" 定义提交按钮
-
type="reset" 定义重置按钮
-
type="button" 定义一个普通按钮
-
-
-
<textarea>标签 表示表单元素的多行文本输入框标签 定义多行文本输入框 -
<select>标签 表示表单元素的下拉列表标签 定义下拉列表
表单提交
1. 表单属性设置
<form>标签 表示表单标签，定义整体的表单区域
-
action属性 设置表单数据提交地址
-
method属性 设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写
2. 表单元素属性设置
-
name属性 设置表单元素的名称，该名称是提交数据时的参数名
-
value属性 设置表单元素的值，该值是提交数据时参数名所对应的值
3. 示例代码
<form action="https://www.baidu.com" method="GET">
<p>
<label>姓名：</label><input type="text" name="username" value="11" />
</p>
<p>
<label>密码：</label><input type="password" name="password" />
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>个人描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍贯：</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</p>
</form>css 的介绍
1. css 的定义
css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。
2. css 的作用
-
美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。
-
控制页面布局, 比如: 设置浮动、定位等样式。
3. css 的基本语法
选择器{
样式规则
}
样式规则：
属性名1：属性值1;
属性名2：属性值2;
属性名3：属性值3;
...
选择器:是用来选择标签的，选出来以后给标签加样式。
代码示例:
div{
width:100px;
height:100px;
background:gold;
}css 的引入方式
css的三种引入方式
-
行内式
-
内嵌式（内部样式）
-
外链式
1. 行内式
直接在标签的 style 属性中添加 css 样式
示例代码:
<div style="width:100px; height:100px; background:red ">hello</div>
优点：方便、直观。 缺点：缺乏可重用性。
2. 内嵌式（内部样式）
在
<head>标签内加入<style>标签，在<style>标签中编写css代码。
示例代码:
<head>
<style type="text/css">
h3{
color:red;
}
</style>
</head>优点：在同一个页面内部便于复用和维护。 缺点：在多个页面之间的可重用性不够高。
3. 外链式
将css代码写在一个单独的.css文件中，在
<head>标签中使用<link>标签直接引入该文件到页面中。
示例代码:
<link rel="stylesheet" type="text/css" href="css/main.css">优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。 缺点：css代码由于分离到单独的css文件，容易出现css代码过于集中，若维护不当则极容易造成混乱。
4. css引入方式选择
-
行内式几乎不用
-
内嵌式在学习css样式的阶段使用
-
外链式在公司开发的阶段使用，可以对 css 样式和 html 页面分别进行开发。
css 选择器
学习目标
-
能够说出 css 选择器的种类
1. css 选择器的定义
css 选择器是用来选择标签的，选出来以后给标签加样式。
2. css 选择器的种类
-
标签选择器
-
类选择器
-
层级选择器(后代选择器)
-
id选择器
-
组选择器
-
伪类选择器
3. 标签选择器
根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置。
示例代码
<style type="text/css">
p{
color: red;
}
</style>
<div>hello</div>
<p>hello</p>4. 类选择器
根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。
示例代码
<style type="text/css">
.blue{color:blue}
.big{font-size:20px}
.box{width:100px;height:100px;background:gold}
</style>
<div class="blue">这是一个div</div>
<h3 class="blue big box">这是一个标题</h3>
<p class="blue box">这是一个段落</p>5. 层级选择器(后代选择器)
根据层级关系选择后代标签，以选择器1 选择器2开头，主要应用在标签嵌套的结构中，减少命名。
示例代码
<style type="text/css">
div p{
color: red;
}
.con{width:300px;height:80px;background:green}
.con span{color:red}
.con .pink{color:pink}
.con .gold{color:gold}
</style>
<div>
<p>hello</p>
</div>
<div class="con">
<span>哈哈</span>
<a href="#" class="pink">百度</a>
<a href="#" class="gold">谷歌</a>
</div>
<span>你好</span>
<a href="#" class="pink">新浪</a>注意点: 这个层级关系不一定是父子关系，也有可能是祖孙关系，只要有后代关系都适用于这个层级选择器
6. id选择器
根据id选择标签，以#开头, 元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
示例代码
<style type="text/css">
#box{color:red}
</style>
<p id="box">这是一个段落标签</p> <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
<p>这是第二个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
<p>这是第三个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->注意点: 虽然给其它标签设置id=“box”也可以设置样式，但是不推荐这样做，因为id是唯一的，以后js通过id只能获取一个唯一的标签对象。
7. 组选择器
根据组合的选择器选择不同的标签，以 , 分割开, 如果有公共的样式设置，可以使用组选择器。
示例代码
<style type="text/css">
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
</style>
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>8. 伪类选择器
用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器
示例代码
<style type="text/css">
.box1{width:100px;height:100px;background:gold;}
.box1:hover{width:300px;}
</style>
<div class="box1">这是第一个div</div>css 属性
学习目标
-
能够知道常用的样式属性
我们知道 css 作用是美化 HTML 网页和控制页面布局的,接下来我们来学习一下经常使用一些样式属性。
1. 布局常用样式属性
-
width 设置元素(标签)的宽度，如：width:100px;
-
height 设置元素(标签)的高度，如：height:200px;
-
background 设置元素背景色或者背景图片，如：background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。
-
border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
-
以上也可以拆分成四个边的写法，分别设置四个边的：
-
border-top 设置顶边边框，如：border-top:10px solid red;
-
border-left 设置左边边框，如：border-left:10px solid blue;
-
border-right 设置右边边框，如：border-right:10px solid green;
-
border-bottom 设置底边边框，如：border-bottom:10px solid pink;
2. 文本常用样式属性
-
color 设置文字的颜色，如： color:red;
-
font-size 设置文字的大小，如：font-size:12px;
-
font-family 设置文字的字体，如：font-family:'微软雅黑';为了避免中文字不兼容，一般写成：font-family:'Microsoft Yahei';
-
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
-
line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
-
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
-
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中（left/center/right)
-
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
3. 布局常用样式属性示例代码
<style>
.box1{
width: 200px;
height: 200px;
background:yellow;
border: 1px solid black;
}
.box2{
/* 这里是注释内容 */
/* 设置宽度 */
width: 100px;
/* 设置高度 */
height: 100px;
/* 设置背景色 */
background: red;
/* 设置四边边框 */
/* border: 10px solid black; */
border-top: 10px solid black;
border-left: 10px solid black;
border-right: 10px solid black;
border-bottom: 10px solid black;
/* 设置内边距， 内容到边框的距离，如果设置四边是上右下左 */
/* padding: 10px; */
padding-left: 10px;
padding-top: 10px;
/* 设置外边距，设置元素边框到外界元素边框的距离 */
margin: 10px;
/* margin-top: 10px;
margin-left: 10px; */
float: left;
}
.box3{
width: 48px;
height: 48px;
background:pink;
border: 1px solid black;
float: left;
}
</style>
<div class="box1">
<div class="box2">
padding 设置元素包含的内容和元素边框的距离
</div>
<div class="box3">
</div>
</div>4. 文本常用样式属性示例
<style>
p{
/* 设置字体大小 浏览器默认是 16px */
font-size:20px;
/* 设置字体 */
font-family: "Microsoft YaHei";
/* 设置字体加粗 */
font-weight: bold;
/* 设置字体颜色 */
color: red;
/* 增加掉下划线 */
text-decoration: underline;
/* 设置行高 */
line-height: 100px;
/* 设置背景色 */
background: green;
/* 设置文字居中 */
/* text-align: center; */
text-indent: 40px;
}
a{
/* 去掉下划线 */
text-decoration: none;
}
</style>
<a href="#">连接标签</a>
<p>
你好，世界!
</p>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
