html标签与css样式
<!DOCTYPE html> ---> 对应规则关系（标准）
1、一套规则，浏览器认识的规则
2、 开发者： 学习html规则 开发后台程序
- 写html文件（充当模板作用）
- 数据库获取数据，然后替换到html文件的指定位置(web框架)
3、本地测试
- 找到文件路径，直接浏览器打开
- pycharm打开测试
4、编写html文件 - doctype对应关系
- html标签，标签内部可以写属性
===> 只能有一个html、head、body标签
- 注释：<!-- 注释内容 >
5、 标签分类
- 自闭合标签： <meta charset="UTF-8">
- 主动闭合标签： <title>老男孩</title>
head标签
- meta标签：
属性：编码，跳转，刷新，关键字，描述，IE兼容
<meta http-equiv="refresh" content="3"> 页面默认3s刷新一次
<meta http-equiv="refresh" content="3;Url=http://baidu.com"> 页面默认3s跳转到baidu.com
<meta name="keywords" content="灰太狼,喜洋洋"> # 关键字搜索
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;IE=IE7;"> IE浏览器从最新的开始，看能否兼容
- title标签：
页面头标签，显示出来能看到的内容
- link标签：
搞图标,引用css文件
<link rel="stylesheet" href="css/comms.css"/>
1 <head> 2 <meta charset="UTF-8"> 3 <meta http-equiv="refresh" content="3"> 4 <meta http-equiv="refresh" content="3;Url=http://baidu.com"> 5 <meta name="keywords" content="灰太狼,喜洋洋"> 6 <meta name="descripts" content="你好，这个喜洋洋与灰太狼。。。"> 7 <title>页面标题</title> 8 </head>
body标签
- 图标( < >) (空格、< 、>)
<a href="http://www.baidu.com">百 <a>度</a>
- p 标签:
段落标签,内容不换行
- br 标签:
换行
- input 标签
- name属性,提供后台拿数据
<input type="text" name="user"/> # type="text" 单行数据输入
<input type="password" name="password"/>
- value属性为默认值
<input type="text" name="user" value="alex"/>
input type='radio' - 单选框，value, name属性（name相同则互斥），checked="checked" 默认值
input type='checkbox' - 复选框 value,name属性（name相同批量获取数据），checked="checked" 默认值
input type='file' - 依赖from表单中的一个属性(enctype="multipart/form-data",默认把文件一点一点上传)
input type='reset' - 重置
<textarea name="meno">默认值</textarea> # 多行文本输入
- select标签 - name属性，内部option中的value属性,selected默认值
- size 可以展示多个
- mulitiple 多选
- optgroup 分组标签,内部包含option
- a 标签
- 跳转
<a href="http://baidu.com" target="_blank">百度</a>
- target="_blank" 新的窗口打开，默认是当前页面打开
- 锚（相当于书签的作用）
<a href="#i4">第四章</a>
<div id="i4" style="height: 600px;">第四章内容</div>
- href="#某个标签的ID" 标签ID不允许重复
- img标签（图片）
- src 图片地址
- title 鼠标移到图片时出现的内容
- style 可以设置图片高度宽度
- alt 图片出现烂图时出现的文字
- 图片跳转可以将img标签写在a标签内部
<a href="http://cnblogs.com/sshcy" target="_blank">
<img src="timg.jpg" title="萌萌哒" style="height: 200px;width: 200px;" alt="小狗">
</a>
- 列表
- ul
li
- ol
li
- dl
dt
dd
- table 表格
- broder属性添加表格
- tr标签: 一行
- td标签：一列
<table border="1">
<tr>
<td>主机</td>
<td>端口</td>
<td>操作</td>
</tr>
<tr>
<td>1.1.1.1</td>
<td>80</td>
<td>
<a href="s1.html">查看详情</a>
</td>
</tr>
</table>
- thead 标签：表头
- tr 标签： 一行
- th 标签： 表头中的一列
- tbody 标签：表身体
- tr 标签： 一行
- td 标签：表身体中的一列
- lable标签：
跟id有关，用于点击文字，使得关联的标签获取光标
<label for="username">用户名:</label>
<input id="username" type="text" name="user" />
- fieldset标签
- legend标签：在框上写文字
<fieldset>
<legend>登录</legend>
<label for="username">用户名:</label>
<input id="username" type="text" name="user" />
</fieldset>
1 <body> 2 <form action="http://baidu.com" method="post"> 3 <input type="text" name="user"/> 4 <input type="password" name="pwd"/> 5 <!--<input type="button" value="登录1">--> 6 <input type="submit" value="登录2"/> <!-- from表格中提交用submit类型 --> 7 </form> 8 9 <form enctype="multipart/form-data"> 10 <div> 11 <select name="city" size="5" multiple="multiple"> 12 <option value="1">北京</option> 13 <option value="2">南京</option> 14 <option value="3" selected="selected">广州</option> 15 <option value="4">上海</option> 16 </select> 17 18 <select name="city2"> 19 <optgroup label="湖南"> 20 <option>长沙</option> 21 <option>株洲</option> 22 </optgroup> 23 <optgroup label="广东"> 24 <option>广州</option> 25 <option>深圳</option> 26 </optgroup> 27 </select> 28 29 <input type="text" name="user"/> 30 31 </div> 32 33 <div> 34 <p>请选择性别:</p> 35 男：<input type="radio" name="sex" value="1" checked="checked"/> 36 女：<input type="radio" name="sex" value="2"/> 37 Alex：<input type="radio" name="sex" value="3"> 38 <p>爱好</p> 39 篮球：<input type="checkbox" name="favor" value="1" checked="checked"/> 40 足球：<input type="checkbox" name="favor" value="2" checked="checked"/> 41 排球：<input type="checkbox" name="favor" value="3"/> 42 <p>技能</p> 43 撩妹：<input type="checkbox" name="skill" value="1" checked="checked"/> 44 写代码：<input type="checkbox" name="skill" value="2"/> 45 <p>上传文件</p> 46 <input type="file" name="fname"/> 47 </div> 48 49 <textarea name="meno">默认值</textarea> 50 51 52 <input type="submit" value="提交"/> 53 <input type="reset" value="重置"/> 54 </form> 55 56 </body>
1 <body> 2 <a href="#i1">第一章</a> 3 <a href="#i2">第二章</a> 4 <a href="#i3">第三章</a> 5 <a href="#i4">第四章</a> 6 7 <div id="i1" style="height: 600px;">第一章内容</div> 8 <div id="i2" style="height: 600px;">第二章内容</div> 9 <div id="i3" style="height: 600px;">第三章内容</div> 10 <div id="i4" style="height: 600px;">第四章内容</div> 11 <a href="http://cnblogs.com/sshcy" target="_blank"> 12 <img src="logo.jpg" title="萌萌哒" style="height: 200px;width: 200px;" alt="小狗"> 13 </a> 14 15 <ul> 16 <li>alex</li> 17 <li>lucy</li> 18 </ul> 19 20 <ol> 21 <li>alex</li> 22 <li>lucy</li> 23 </ol> 24 25 <dl> 26 <dt>名字</dt> 27 <dd>alex</dd> 28 <dd>lucy</dd> 29 </dl> 30 31 <table border="1"> 32 <tr> 33 <td>主机</td> 34 <td>端口</td> 35 <td>操作</td> 36 </tr> 37 <tr> 38 <td>1.1.1.1</td> 39 <td>80</td> 40 <td> 41 <a href="s1.html">查看详情</a> 42 </td> 43 </tr> 44 45 </table> 46 47 </body>
1 <body> 2 <table border="1"> 3 <thead> 4 <tr> 5 <th>表头1</th> 6 <th>表头2</th> 7 <th>表头2</th> 8 <th>表头2</th> 9 </tr> 10 </thead> 11 <tbody> 12 <tr> 13 <td>1</td> 14 <td colspan="2">1</td> <!-- 两列合成一列 --> 15 <td>1</td> 16 </tr> 17 <tr> 18 <td rowspan="2">1</td> <!-- 两行合成一行 --> 19 <td>1</td> 20 <td>1</td> 21 <td>1</td> 22 </tr> 23 <tr> 24 <td>1</td> 25 <td>1</td> 26 <td>1</td> 27 </tr> 28 <tr> 29 <td>1</td> 30 <td>1</td> 31 <td>1</td> 32 <td>1</td> 33 </tr> 34 </tbody> 35 </table> 36 37 <fieldset> 38 <legend>登录</legend> 39 <label for="username">用户名:</label> 40 <input id="username" type="text" name="user" /> 41 </fieldset> 42 43 </body>
html小结
所有标签分为:
块级标签:
div标签(白板), h系列标签(加大加粗), p标签(段落与段落之间有间距)
行内标签:
span标签(白板), input标签，textarea标签 select标签 a标签
标签之间可以嵌套
标签存在的意义:
css操作, js操作, 定位更方便
<input type="text" name="user"/>
<input type="password" name="pwd"/>
有name属性后以字典的形式把数据传过去：{"user":"用户","pwd":"密码"}
没有name属性后台拿不到具体的值
------------------
<form action="http://baidu.com" method="post">
<input type="text" name="user"/>
<input type="password" name="pwd"/>
<input type="button" value="登录1">
<input type="submit" value="登录2"/>
</form>
---------------------
服务端：self.get_argument("user") # 取user的值
提交请求：请求头相关数据、内容
get方法：数据在请求头中直接发过去
post方法：数据在内容中发过去
css样式介绍
在每一个标签上都可以设置style属性:
background-color: #2a8bcb;
height: 48px;
编写css样式
1. 标签的style属性
2. 写在head里面，style标签中编写样式
- id 选择器
#i1{
background-color: #2459a2;
height: 48px;
}
<div id="i1">fff</div> # id 不能重复
- class 选择器（推荐使用）
.c1{
background-color: #3c763d;
height: 20px;
}
<div class="c1">dddd</div> # class 可以重复
- 标签选择器
div{
background-color: #3c763d;
color: white;
}
把所有div标签都设置上
- 层级选择器（空格）
.c1 span div a {
background-color: #3c763d;
height: 20px;
}
class=.c1下面的span标签下面的div标签下的a标签
- 组合选择器（逗号）
#i1,#i2,#3{
background-color: #2459a2;
height: 48px;
}
id=i1或者id=i2或者id=i3都可以应用这个样式
- 属性选择器
对选择到的标签再通过属性进行一次筛选
input[n="alex"]{width: 100px; height: 200px;} # input标签下的n="alex"属性
.c1[n="alex"]{width: 100px; height: 200px;} # class=c1下的n="alex"属性
PS:
- 优先级
标签上style优先,其它的按编写顺序，就近原则
- css样式
可写入单独的文件中通过link标签进行引用
<link rel="stylesheet" href="comms.css"/>
- 边框
- 宽度、样式、颜色(border: 4px dotted red; # 边框线条粗细为4px，dotted为虚线，颜色为red)
- border-left 左边框（默认是后边都有）
- 样式
- height: 高度
- width: 宽度，可以用像素，百分比
- text-align:cener 水平方向居中
- line-height: 垂直方向根据标签高度居中
- color: 字体颜色
- font-size: 字体大小
- font-weight: 字体加粗
<div style="height: 48px;width: 80%; text-align: center;line-height: 48px; font-weight: bold; font-size: 20px; border: 5px dotted red";>caoy</div>
- float 属性
让标签飘起来，块级标签也能堆叠
<div style="background-color: #3c763d;width: 20%; float: left">1</div>
<div style="background-color: #7b3f25;width: 80%; float: left;">2</div>
float起来后,边框管不住，后面要加：
<div style="clear: both"></div>
############################
<div style="width: 300px;border: 1px solid red">
<div style="width: 96px; height: 30px; border: 1px solid green; float: left;"></div>
<div style="clear: both"></div>
</div>
- display属性
display: none; 让标签不显示
display: inline; 块级标签转变成行内标签效果
display: block; 行内标签转变成块级标签效果
display: inline-block;
- 具有inline属性，默认自己有多少占多少
- 具有block属性，可以设置高度、宽度、padding margin
行内标签：无法设置高度、宽度、padding margin
块级标签：设置高度、宽度、padding margin
- padding margin (0,auto)
padding: 内边距
margin: 外边距
margin: 0 auto; # 上面边距为0，左右边距自动
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 #i1,#i2,#3{ 6 background-color: #2459a2; 7 height: 48px; 8 } 9 .c1{ 10 background-color: #3c763d; 11 height: 20px; 12 } 13 14 span div{ 15 background-color: #3c763d; 16 color: white; 17 } 18 19 input[n="alex"]{width: 100px; height: 200px;} 20 .c1[n="alex"]{width: 100px; height: 200px;} 21 22 </style> 23 </head> 24 <body> 25 <div style="background-color: #2a8bcb;height: 48px;">1</div> 26 <div id="i1">fff</div> 27 <span class="c1">1243432 28 <div>sssbbbb</div> 29 </span> 30 <div class="c1">dddd</div> 31 <div class="c1">hehehe</div> 32 33 <input class="c1" type="text" n="alex"/> 34 <input class="c1" type="password"/> 35 </body>
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 .c1{ 6 background-color: red; 7 color: white; 8 } 9 .c2{ 10 font-size: 58px; 11 color: black; 12 } 13 </style> 14 15 <link rel="stylesheet" href="css/comms.css"/> <!-- 引用css文件 --> 16 17 </head> 18 <body> 19 <div class="c1 c2" style="color: pink;">adafdsf</div> 20 21 <div style="height: 48px; width: 200px; border: 5px dotted red">caoy</div> 22 23 <div style="height: 48px; 24 width: 80%; 25 text-align: center; 26 line-height: 48px; 27 font-weight: bold; 28 font-size: 20px; 29 border: 5px dotted red";>caoy</div> 30 31 <div style="background-color: #3c763d;width: 20%; float: left">1</div> 32 <div style="background-color: #7b3f25;width: 80%; float: left;">2</div> 33 34 <div style="width: 300px;border: 1px solid red"> 35 <div style="width: 96px; height: 30px; border: 1px solid green; float: left;"></div> 36 <div style="width: 96px; height: 30px; border: 1px solid green; float: left;"></div> 37 <div style="width: 96px; height: 30px; border: 1px solid green; float: left;"></div> 38 <div style="width: 96px; height: 30px; border: 1px solid green; float: left;"></div> 39 <div style="width: 96px; height: 30px; border: 1px solid green; float: left;"></div> 40 <div style="width: 96px; height: 30px; border: 1px solid green; float: left;"></div> 41 <div style="width: 96px; height: 30px; border: 1px solid green; float: left;"></div> 42 <div style="clear: both"></div> 43 </div> 44 45 <div style="background-color: red; display: inline;">addadf</div> 46 <span style="background-color: red; display: block;">sddsa</span> 47 48 </body>
问题小结
html去除li前面小黑点及ul、li部分属性介绍
li 默认显示时前面总是会有一个小黑点，可以用以下方法来清除。
1、在CSS中写入代码
ul li{
list-style-type:none;
}
2、在相关的页面找到head部分写入下面的代码
<style type="text/css">list-style:none;</style>
3、在li,ul内加入list-style。
<ul style="list-style-type:none>
<li>
<a>我的博客</a>
</li>
</ul>
list-style-type的其它属性：
none不使用项目符号
disc实心圆，默认值
circle空心圆
square实心方块
decimal阿拉伯数字
lower-roman小写罗马数字
upper-roman大写罗马数字
lower-alpha小写英文字母
upper-alpha大写英文字母
A).运用CSS格式化列表符
ul li{
list-style-type:none;
}
B).如果你想将列表符换成图像
ul li{
list-style-type:none;
list-style-image: url(images/icon.gif);
}
C).为了左对齐，可以用如下代码
ul{
list-style-type:none;
margin:0px;
}
D).如果想给列表加背景色，可以用如下代码：
ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}
p标签强制换行与不换行
一、英文换行
/*只对英文起作用，以字母作为换行依据*/
Div p{ word-break:break-all; width:150px;}
/*--只对英文起作用，以单词作为换行依据*/
Div p{ word-wrap:break-word; width:150px;}
注意有的时候英文单词是一个整体不能拆开！！！
二、中文换行以及强制不换行
/*只对中文起作用，强制换行*/
Div p{white-space:pre-wrap;width:150px;}
/*强制不换行，都起作用*/
Div p{white-space:nowrap;width:10px;}
三、强制不换行以及超出宽度部分文字隐藏
/*不换行，超出部分隐藏且以省略号形式出现*/
.p5{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100px;}
一定要注意p或者p标签里面要有一个宽度才可以换行，要不然没有作用！！！
其他内容
html去掉a超链接下划线样式：
a{
text-decoration:none
}
span中加删除线效果：
<span style="text-decoration:line-through;">删除线效果</span>
<i> 标签呈现斜体的文本。
<i>￥</i>
display:list-item
为元素内容生成一个块型盒，随后再生成一个列表型的行内盒。display:list-item是 li 的默认样式
