Python_day9：HTML、CSS

HTML

一、HTML

　　1、概述：超文本标记语言（Hyper Text Mark-up Language），相当于一种能够让浏览器识别的语言。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8  
 9 </body>
10 </html>

pycharm_html

　　2、doctype标准：Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档，如果没有声明，则浏览器按照自己的方式来解析，不同的浏览器可能解析的结果不同，声明后，则所有的都是一个版本。

　　3、标签

　　3.1、head标签

1 刷新：< meta http-equiv="Refresh" Content="30">
2 跳转：<meta http-equiv="Refresh" content="5";url="http://www.baidu.com"/>
3 关键字：<meta name="keywords" content="html文件,css样式">
4 页面编码：< meta http-equiv="content-type" content="text/html;charset=utf-8">
5 描述、IE兼容

meta标签

1 <!-- 注释的内容 -->
2 <title>页面标题</title>

title标签

1 <!--css-->
2 < link rel="stylesheet" type="text/css" href="css/common.css" >
3   
4 <!--icon-->
5 < link rel="shortcut icon" href="image/favicon.ico">

link标签

1 < style >
2     .c1{
3           background-color: red;    
4        }
5 < /style>

style标签：搞图标的

1 <!--引进文件-->
2 < script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
3   
4 <!--写js代码-->
5 < script type="text/javascript" > ... </script >

script标签

　　3.2、body标签

　　标签分类：可嵌套；用于css，js操作

块级标签：div（白板）；H系列（加大加粗）；P标签（段落）；br标签（换行）
行内标签：span标签（白板）；a标签

　　符号：&nbsp（不断行空格）；&lt（<）；&rt（>）

　　各种符号　

 1 <!--跳转-->
 2 <a href="http://www.baidu.com" target="_blank">点我</a>  
 3 <!--href表示跳转的地址，target="_blank"表示新窗口打开，默认为当前页-->
 4 
 5 <!--锚-->
 6 <body>
 7     <a href="#1">第一章</a><br/>
 8     <a href="#2">第二章</a><br/>
 9     <a href="#3">第三章</a><br/>
10     <a href="#4">第四章</a><br/>
11   
12     <div id="1" style="height: 600px;">第一章的内容</div>
13     <div id="2" style="height: 600px;">第二章的内容</div>
14     <div id="3" style="height: 600px;">第三章的内容</div>
15     <div id="4" style="height: 600px;">第四章的内容</div>
16 </body>

a标签

 1 <input type="text" name="user"/> <!--文本-->    
 2 <input type="password" name="passwd"/> <!--密码-->
 3 <input type="submit" value="提交"/> <!--提交表单-->
 4 <input type="button" value="登录"/> <!--按钮-->
 5 
 6 <!--单选框，checked为默认值，name相同则互斥-->
 7 <p>请选择性别:</p>
 8 男:<input type="radio" name="sex" value="1" checked="checked"/>
 9 女:<input type="radio" name="sex" value="2"/>
10 
11 <!--多选框，name批量获取数据-->
12 <p>爱好</p>
13 篮球:<input type="checkbox" name="favor" value="1" checked="checked"/>
14 足球:<input type="checkbox" name="favor" value="2"/>
15 台球:<input type="checkbox" name="favor" value="3"/>
16 <!--checked="checked"表示默认选择-->
17 
18 <!--文件上传，依赖form表单属性<form enctype="multipart/form-data">-->
19 <input type="file" name="fname"/>
20 
21 <!--重置-->
22 <input type="reset" value="重置"/>

input标签

 1 <!--form相当于一个表单，配合input标签submit可以把表单的内容提交到指定位置，提交内容以字典的形式提交{‘user’：xx,'email':xx,'pwd':xx},key值为name属性值-->
 2 
 3 <form action="http://localhost:8888/index" method="post" >
 4 </form>
 5 
 6 <!--action表示提交动作，把数据提交到指定的路径，methon指定提交类型，默认为get-->
 7 
 8 <!--method默认为get类型，数据会包含在html的头部进行提交，表现形式是点击提交后会在外部url路径上查看提交到的数据表单内容；
 9 
10 method如果指定为post类型的话，数据会包含在html的body内进行提交，从外部看不出来里面的信息-->

form标签

1 <a herf="http://www.baidu.com">
2     <img src="http://www.521609.com/uploads/allimg/151124/1-151124100ZJD.jpg" title="小美女"
3          style="height: 200px;width:200px;" alt="美女"/>
4 </a>
5 
6 <!--src是图片路径-->

image标签

 1 <ul>
 2         <li>asdf</li>
 3         <li>asdf</li>
 4         <li>asdf</li>
 5         <li>asdf</li> 
 6     </ul>
 7  
 8     <ol>
 9         <li>asdf</li>
10         <li>asdf</li>
11         <li>asdf</li>
12         <li>asdf</li>
13     </ol>
14  
15     <dl>
16         <dt>ttt</dt>
17         <dd>ddd</dd>
18         <dd>ddd</dd>
19         <dd>ddd</dd>
20         <dt>ttt</dt>
21         <dd>ddd</dd>
22         <dd>ddd</dd>
23         <dd>ddd</dd>
24     </dl>

ul，ol，dl列表

 1 <table border = "1">
 2     <thead>
 3         <tr>
 4             <th>表头第一列</th>
 5             <th>表头第二列</th>
 6             <th>表头第三列</th>
 7             <th>表头第四列</th>
 8         </tr>
 9     </thead>
10     <tbody>
11         <tr>
12             <td>第二行第一列</td>
13             <td>第二行第二列</td>
14             <td>第二行第三列</td>
15             <td>第二行第四列</td>
16         </tr>
17         <tr>
18             <td>第三行第一列</td>
19             <td>第三行第二列</td>
20             <td>第三行第三列</td>
21             <td>第三行第四列</td>
22         </tr>
23     </tbody>
24 </table>    
25 
26 
27 <!--colspan合并行单元格，rowspan合并列单元格-->
28 <table border = "1">
29     <thead>
30         <tr>
31             <th>表头第一列</th>
32             <th>表头第二列</th>
33             <th>表头第三列</th>
34             <th>表头第四列</th>
35         </tr>
36     </thead>
37     <tbody>
38         <tr>
39             <td rowspan="2">第二和三行第一列</td>
40             <td colspan="2">第二行第二和三列</td> 
41             <td>第二行第四列</td>
42         </tr>
43         <tr>
44             <td>第三行第二列</td>
45             <td>第三行第三列</td>
46             <td>第三行第四列</td>
47         </tr>
48     </tbody>
49 </table>

table标签

1 <!--点击文字使其关联的标签获取光标-->
2 <label for="username">用户名</label>
3 <input id="username" type="text" name="user" />

lable标签

1 <form>
2       <fieldset>
3         <legend>登录</legend>
4         用户名: <input type="text" name="username"/><br/><br/>
5         密码: <input type="text" name="passwd"/>
6       </fieldset>
7 </form>

fieldset标签

1 <form enctype="multipart/form-data" method="post">
2         <textarea name="linearea">默认数据</textarea>
3         <input type="submit" value="提交" />
4         <input type="reset" value="重置" />
5 </form>

textarea 多行输入

 1 <form action="http://localhost:8888/index" method="post">
 2         <select name="city" size="2" multiple="multiple">
 3             <option value="1">北京</option>
 4             <option value="2">上海</option>
 5             <option value="3">南京</option>
 6             <option value="4" selected="selected">邯郸</option>
 7         </select>
 8         <br />
 9         <input type="submit" value="提交" />
10         <input type="reset" value="重置" />
11 </form>

select下拉框

二、CSS

/*CSS注释：注释的内容*/

　　1、概述：层叠样式表（Cascading Style Sheets），用于页面美化；style = 'key1:value1;key2:value2;'

行内式：在标签中使用 style='xx:xxx;'单独加在某个标签上，style增加其他属性需要以分号分隔；

<div style="height: 100px;width:100px">我是div</div>

嵌入式：在页面中嵌入 < style type="text/css"> </style >块

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .c1{
 6         background-color:red;
 7         height: 100px;
 8         width:100px;
 9         }
10     </style>
11 </head>

head_style

链接式：将.css文件引入到HTML文件中，创建一个.css文件，将css文件放入link标签中

1 <head>
2     <meta charset="UTF-8">
3     <title>Title</title>
4     <link href="mystyle.css" rel="stylesheet" type="text/css"/>
5 </head>

head_link

　　2、CSS选择器

1 #i1{
2 color:red;
3 background-color: antiquewhite;
4 }
5 <div id="i1">我是divi1标签</div>
6  
7 <!-- id=i1的标签会变成#i1的样式，#id名称{...}-->

id选择器

 1 .c1{
 2     color: red;
 3     background-color: white;
 4     }
 5 
 6 <div class="c1">我是div1标签</div>
 7 <div class="c1">我是div2标签</div>
 8 <p class="c1">我是p标签</p>
 9  
10 <!-- 以上三个标签都会变成.c1的样式 ，.class名称{...}-->

class选择器

1 div{
2     color: red;
3     background-color: white;
4     }
5 
6 <!--所有div均用如上样式-->

标签选择器

 1 #i1,.c2,span{
 2     color: red;
 3     background-color: white;
 4     }
 5 
 6 <div id="i1">我是div标签</div>
 7 <p class="c2">我是p标签</p>
 8 <span>我是span</span>
 9  
10 <!-- 以上标签都会变成设置的样式，组合选择器用","分开-->

组合选择器

 1 .c1 .c2 div{
 2     color: red;
 3     background-color: white;
 4     }
 5 
 6 <div class="c1">
 7    <div class="c2">
 8         <div>
 9          我是c2的div标签
10         </div>
11     </div>
12    <div class="c3">
13         <div>
14          我是c3的div标签
15         </div>
16     </div>
17 </div>
18 
19 <!-- 以上标签，只有"我是c2的div标签"会变成设置的样式，c1-c2-div，用空格" "分开-->

层级选择器（空格）

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         input[name="Jack"]{width: 20px;height: 20px;}
 6     </style>
 7 </head>
 8 <body>
 9     <input type="text" name="Jack">
10     <input type="text">
11     <input type="password">
12 </body>
13 
14 <!--对选择到的标签再通过属性进行一次筛选，如上只有第一个input会加样式-->

属性选择器

　　3、属性

　　3.1、颜色：color: red;

　　3.2、字体：font-size: 16px；font-weight: lighter/bold/border/ 字体的粗细；

　　3.3、背景：

background-color: 背景底色；
background-image: 背景图片；
background-repeat：平铺方式，no-repeat 不平铺，repeat 平铺满；
background-size: 图片大小设置，auto；
background-position：center 上下左右居中；left center左侧上下居中；top，bottom，right类似；
z-index: 9；多层时层级顺序，大的出现在上面

　　3.4、文本：

text-align：center；水平方向居中
line-height：xxpx；行高，垂直方向根据标签高度（居中用）
width：xxpx；宽 %50
height：xxpx；高 %50
text-indent：xxpx 首行缩进，基于父元素
letter-spacing：xxpx；字母与字母之间距离
word-spacing：xxpx ；单词之间距离
direction：rt1
text-transform：capitalize；将单词首字母大写
min-height:设置默认最小高度
height：auto！important 以此样式为准
vertical-align：xxpx;垂直居中
opacity：0.6 透明度(0-1)

　　3.5、样式边框：border：solid 1px red

border-style：solid；边框样式
border-color：red；边框颜色
border-width：1px；边框宽度
border-radius：20%；边框变成圆角

　　3.6、样式浮动（float）

 1 <body style="margin: 0 auto">
 2     <div style="height: 38px;background-color: #dddddd;line-height: 38px;">
 3         <div style = float:left;">收藏</div>
 4         <div style = float:right;">
 5             <a>登录</a>
 6             <a>注册</a>
 7         </div>
 8     </div>
 9     <div style = "width: 300px;border: 1px solid red;">
10         <div style = "width: 96px;height:30px;border:1px solid green;float:left;"></div>
11         <div style = "width: 96px;height:30px;border:1px solid green;float:left;"></div>
12         <div style = "width: 96px;height:30px;border:1px solid green;float:left;"></div>
13         <div style = "width: 96px;height:30px;border:1px solid green;float:left;"></div>
14         <div style = "width: 96px;height:30px;border:1px solid green;float:left;"></div>
15         <div style = "clear:both;"></div>
16     </div>
17 </body>

float浮动

　　3.7、display

display:inline 转换为行内标签；display：block转换为块级标签；另还有display：none不显示
行内标签：无法设置高度，宽度，padding，margin
块级标签：设置高度，宽度，padding，margin
display:inline-block 既有inline的属性（默认自己有多少占多少）又有block的属性（可以设置高度、宽度、padding、margin）

1 <body>
2     <div style="display: inline">块级</div>
3     <span style="display: block">行内</span>
4 </body>

行内，块级相互转换

　　3.8、样式边距

1 <body>
2     <div style="border: 2px solid red;height: 70px;">
3         <div style="background-color: green;height: 50px;
4         margin-top: 25px;"></div>
5     </div>
6 </body>

外边距margin

1 <body>
2     <div style="border: 2px solid red;height: 70px;">
3         <div style="background-color: green;height: 50px;
4         padding-top: 25px;"></div>
5     </div>
6 </body>

内边距padding

Python_day9：HTML、CSS

猜你喜欢