html标签
html
cs 模式:----c: client(客户端)s----服务端(server)
html是bs 模式:-----b:browser (浏览器) s--服务端(server)
如下:
服务端:
import socket
def main():
s = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
s.bind(('192.168.1.4',8080))
s.listen(5)
while True:
conn,addr = s.accept()
buf = conn.recv(1024)
conn.sendall(bytes('HTTP/1.1 201 OK\r\n\r\n','utf8'))
conn.sendall(bytes('<h1>hello,world !</h1>','utf8'))
conn.close()
if __name__ =="__main__":
main()
运行服务端,然后打开浏览器,输入:http://192.168.1.4:8080/ 结果会显示:hello,world !
html 介绍
html 注释:<!--注释内容-->
<!--<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">-->
html: htyoer text markup language 即:超文本标记语言
超文本:页面内可包含图片,连接甚至音乐,程序等非文字元素
标签语言:标记(标签)构成的语言即:由<>组成的。
网页 = HTML文档,由浏览器解析,用来展示(浏览器相当于解释器)
网页分为静态网页和动态网页
静态网页:静态的资源,如xxx.html:只能看不能操作
动态网页:html代码是由某种开发语言根据用户请求动态生成的
html文档树形构图:
body 元素是需要我们自己设计的,也是我们重点学习内容。
标签的特点:
1)是由一对<>包裹的单词构成 ,所有标签中的单词不能以数字开头。例如:<html>
2)标签不区分大小写,例如:<htmkl> 和<HTML>是一样的。推荐使用小写
3)标签分为2部分:开始标签例如:<a>和 结束标签例如:</a>,两个标签之间的部分我们叫做标签体
4)有些标签的功能比较简单,使用一个标签即可,这种标签叫做自闭和标签例如:<br/>,<hr/>,<input/>,<img/>
5)标签可以嵌套但是不能交叉嵌套,例如:<body> <h1> </h1> </body> 这是正确嵌套方式
标签属性:
1)通常是以键值对形式出现的,name = 'alex'
2)属性只能出现在开始标签或者自闭和标签中
-在开始标签中加属性如下:
<h1 name = 'alex'> hello,world</h1>
-在自闭和标签中加属性如下:
<meta charset = 'utf_8' 属性>
3)属性名字全部小写,属性值必须使用双引号或者单引号包裹 例如:name ='alex'
4)如果属性值和属性名完全一样,直接写属性名即可 例如:readonly
标签
<!DOCTYPE html> //开头写这句,代表渲染是按照标准模式(w3c标准)进行渲染的,如果不写默认是按照怪异模式渲染的
查看是标准还是怪异模式代码:
<script>
alert(Window.top.document.compatMode) //alert代表抬出框 BackCompat 代表怪异模式 CSSlCompat 代表标准模式
</script>
注意:对多个标签同时进行相同设置时,多个标签之间用逗号隔开 例如: a,p,h1 {设置内容}
-head 标签
head标签相当于人的大脑,内部可以放一些页面的描述信息,该部分内容不会在页面展示
head标签中有 title 标签,meta标签,link标签以及script标签等 。
-- title 标签:指定网页的标题,所有网站页面标签部分的文字都是基于title实现。如下:
<title>我的</title>
结果是:网页标题是: 我的
-- meta 标签
1)文字编辑 例如:<meta charset="UTF-8">
2) 设置页面定时刷新 例如:
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com" > 代表2秒后,自动刷新到百度网站
3)meta标签可以设置关键字,用于搜索引擎收录和关键字搜索。如下:
<meta name = 'keywords' content="北京,上海" >
4)meta标签可以设置网站描述信息,用于在搜索引擎搜索时,显示网站基本描述信息。如下:
<meta name = "description"content="老男孩培训机构是一家IT培训机构" >
5)mata标签设置兼容IE7版本浏览器,代码如下:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
6)meta 触屏缩放
width=device-width
,表示宽度按照设备屏幕的宽度。initial-scale=1.0
,初始显示缩放比例。minimum-scale=0.5
,最小缩放比例。maximum-scale=1.0
,最大缩放比例。user-scalable=yes
,是否支持可缩放比例(触屏缩放)
例如:
<!--支持触屏缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<!--不支触屏持缩放-->
<!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
--link 标签
a>. rel="icon"属性(图标)
该属性用于定义标签的图像(就是标签的标签前面的logo),后面的href是制定图标应该去那个URl查找,例如:
<link rel="icon" href="http://www.jd.com/favicon.ico">
b>.rel="stylesheet"(渲染属性)
该属性是引用CSS文件对HTML的标签进行渲染,后面的href指定的css文件的路径(yinzhengjie.css文件应该和你的HTML放在一起才可以这样写哟)
<link rel="stylesheet" href="yinzhengjie.css">
--script 标签
该标签用于引用JavaScript文件 例如:
<script src="yinzhengjie.js"></script>
body标签
在使用浏览器查看html页面时候,看得到内容都是body标签中呈现出来。body中所有标签可以划分为两类:
- 块级,标签自己独占整行。例如:<p><h1><table><ol><form><div>
- 行内/内联,标签内容有多少就占多少空间。例如:<a><input><img><sup><textarea><span>
块(block)元素的特点:
-总是在新行上开始
-宽度缺省是它的容器的100%,除非设定一个宽度
- 可以容纳内联元素和其他块元素
内联/行内(inline)元素特点:
-和其他的元素都在一行上
-宽度就是它的文字或者图片的宽度,不可改变
-内联元素只能容纳文本或者其他内联元素
h 系列标签
h标签用于展示标题数据(加大加粗的样式),h系列标签共有6种,从h1~h6依次变小。h1-h6都是块级标签,自己独占一行
例如:
<h1>hello,world</h1>
<h2>hello,world</h2>
<h3>hello,world</h3>
<h4>hello,world</h4>
<h5>hello,world</h5>
<h6>hello,world</h6>
效果如下:
<p>标签
p标签用于表示段落,段落和段落之间有些间距,一般用于多内容多段落展示,例如:文章、作文、博客等。p标签也是块级标签,自己独占一行
<h1>历史</h1>
<p>宫中府中,俱为一体,陟罚臧否,不宜异同。若有作奸犯科及为忠善者,宜付有司论其刑赏,以昭陛下平明之理,不宜偏私,使内外异法也。</p>
<p>侍中、侍郎郭攸之、费祎、董允等,此皆良实,志虑忠纯,是以先帝简拔以遗陛下。愚以为宫中之事,事无大小,悉以咨之,然后施行,必能裨补阙漏,有所广益。</p>
效果如下:
</br>标签
br标签用于表示换行.例如:
你好吗?</br>
我很好。</br>
谢谢! </br>
效果图如下:
加粗标签
<b>标签和<strong> 标签都是代表加粗的
<b>你好吗?</b>
<strong>我很好。</strong>
效果图如下:
<strike> 标签
表示:为文字加一条中线
<strike>你好吗</strike>
效果图如下:
<em>标签
表示:文字变成斜体
例如:
<em>你好吗</em>
视图如下:
<i> 标签 :显示斜体文本效果。
<i> 标签和基于内容的样式标签 <em> 类似。它告诉浏览器将包含其中的文本以斜体字(italic)或者倾斜(oblique)字体显示。如果这种斜体字对该浏览器不可用的话,可以使用高亮、反白或加下划线等样式。
<sup> 和<sub>标签:
分别代表上角标和下角标
2<sup>3</sup>
2<sub>3</sub>
效果图如下:
<hr>标签:
代表水平线条
例如:<hr>
效果图如下:
<div>标签和<span>标签都是可以自己设置。
<div>标签
div,仅块级标签样式,例如:
<div style="老男孩课程</div>
属性 :
id 属性:代表每一个div 标签的身份证,例如:
<div id = "abc">顶部</div>
若要使用此样式,代码是“#abc”例如:
<a href = "#abc">返回顶部</a>
<!--点击返回顶部就会自动跳转到有顶部这几个文字的位置-->
#号命名的样式选择器样式,需要用id来调用如下:
style 属性: 对div标签内使用style作用是直接对div标签设置CSS样式.例如:
<div style="color:#F00; font-size:18px">字体大小18px,字体颜色为红色</div>
align 属性:直接对标签内加align属性,作用是让对象内的内容居左、居中、居右效果。例如:
<div align="left">居左</div>
<div align="center">居中</div>
<div align="right">居右</div>
vertical-align:元素的垂直对齐方式
title 属性
对div或其它标签设置title属性,作用是当鼠标经过悬停与div或改对象时候显示提示内容
<span>标签
span,仅行内标签样式。例如:
<span style="background: gold">python</span>
效果图如下:
-图形标签:<img>
属性:
1)src :要显示图片的路径
2)alt :图片没有加载成功时显示
3)title :鼠标悬浮时的提示信息
4) width : 图片的宽
5) height :图片的高
注意:宽高2个属性只用一个会自动等比缩放
例如:
<img src="123.png" alt="截图" title="html图片" >
找不到图片,会显示alt中内容
-超链接标签(锚标签):<a>
a标签主要有两个作用:1)做超链接,点击之后可以跳转到指定地址;
2)做锚点,点击后跳转到页面指定位置。
属性:
1)href :要链接的资源路径 格式如下:href = "http://www.baidu.com"
2) target : _blank :在新的窗口打开超链接。 框架名称:在指定框架中打开连接内容
3)name : 定义一个页面的书签
用于跳转:href
做超链接:
<img src = "123.png" alt = "截图" title = “html图片”>
若是给图片123.png做链接,代码如下:
<a href="http://www.baidu.com" target="_blank"><img src="123.png"></a>
结果:点击图片 ,会重新打开一个页面转到百度的网页
若是给自己写的文字做链接,代码如下:
<a href="http://www.baidu.com" target="_blank">点击</a>
结果:点击文字 点击,会重新打开一个页面转到百度的网页
做锚点:跳转到页面指定的位置。例如:
<div id="顶部"><h1>顶部</h1></div>
<img src="123.png">
<h2>你好吗</h2>
<a href="#顶部">返回顶部</a>
点击返回顶部就会返回到顶部所在位置
- <ul>列表系列标签
在html中 ul (unorder list)、ol (order list) 、dl用于展示列表数据。
<ul> :无序列表
<li> :代表列表中的每一项
例如:
<ul>
<li>11</li>
<li>222</li>
<li>3</li>
</ul>
效果图如下:
<ol> :有序列表
<li> : 代表列表中的每一项
例如:
<ol>
<li>11</li>
<li>222</li>
<li>3</li>
</ol>
效果图如下:
<dl> :定义列表
<dt> :代表列表的标题
<dd> 列表项
例如:
<dl>
<dt>年龄排序</dt>
<dd>12</dd>
<dd>38</dd>
<dd>36</dd>
</dl>
效果图如下:
* input 系列【用户交互】标签(重点)
type属性:
text :文本框。
password :密码框。
radio :单选框(必须设置name属性相同,否则无法实现)。
checkbox :复选框。
file :文件上传。
button : 提交注册
submit :提交注册 代码是:<input type ="submit" value ="按钮名字">
button 与submit 的区别是:
button 只是一个按钮,不会触发事件。
submit 会将之前写的内容打包给server全部提交
reset :重置当前标签中的选项 代码是:<input type ="reset" value ="按钮名字">例如:
<p><input type="reset" value="重置"></p>
readonly属性: 只读(text和password)
placeholder 属性:
name 属性:表单提交项的key,是和服务器通信时使用的名称
value属性:表单提交项的value.对于不同输入类型,value的属性用法也不同
checked属性: radio 和 checkbox 默认被选中
代码是 checked = "checked"所以相当于只写checked
disabled属性 :对所用的input都好使 加上此属性代表不能操作此项 代码是:disabled
例如:
<h3>文本框</h3>
<input type="text">
<h3>密码框</h3>
<input type="password">
<h3>单选框</h3>
男<input type="radio" name="gender">
女<input type="radio" name="gender">
<h3>复选框</h3>
足球<input type="checkbox">
蓝球<input type="checkbox">
排球<input type="checkbox">
<h3>上传文件</h3>
<input type="file">
效果图如下:
例如:
<h1>注册页面</h1>
<p>姓名:<input type="text" name="username"></p>
<p>密码:<input type="password" name="password" ></p>
<p>爱好:音乐<input type="checkbox" name="hobby" value="music">电影<input type="checkbox" name="hobby" value="movie"></p>
<p>性别:男<input type="radio" name="gender" value="man">女<input type="radio" name="gender" value="woman"></p>
<p><input type="submit" value="提交注册"></p>
<p><input type="button" value="提交注册"></p>
</body>
</html>
效果图如下:
* select 下拉框标签【用户交互】(重点)
属性:
name属性: 表单提交的key
size 属性: 代表设置显示的最大个数例如:
size ="3"
multiple属性: multiple:代表可以多选
<option> 下拉选中的每一项 属性:
value:表单提交的值。 selected:selected 下来选项默认被选中
<optgroup>为每一项加上分组
省<select name="province" multiple size="3" >
<optgroup label="河北省">
<option value="baoding" selected>保定</option>
<option value="handan">邯郸</option>
<option value="cangzhou">沧州</option>
</optgroup>
效果图如下:
<textarea> 多行文本框【用户交互】
name 属性:表单提交项的key
cols 属性: 文本框默认有多少列
rows 属性:文本框默认有多少行
简介<textarea name="desc" rows="10" cols="2"></textarea>
效果图如下:
* <table>表格标签(重点)
<thead> 代表表格头部 (不用写)<tbody>代表表格内容(不用写)
<thead><tbody>可以不写不用区分。不写和写了的效果一样
<tr>代表表行 一个tr代表一行
<td>代表行内容
rowspan :单元格横跨多少行也就是合并行 代码:rowspan ="合并的行数"
colspan 合并列 代码:colspan="合并的列数"
<th>代表行内容加粗
table 属性如下:
border 属性:设置边框 一般为 border ="1px"
cellpadding属性 :内边框
cellspacing属性 :外边框
width:像素 百分比(最好通过css来设置长宽)
创建表格代码例子如下:
<table border="1px"cellpadding="10" cellspacing="5">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
<tr>
<td>alex</td>
<td>22</td>
<td>music</td>
</tr>
<tr>
<td>tom</td>
<td>12</td>
<td>games</td>
</tr>
<tr>
<td>ann</td>
<td>2</td>
<td>cry</td>
</tr>
</table>
效果图:
如果需要将alex 和tom 合并,结果显示alex.
需要先删掉写有tom的那行代码,然后在写有alex的那行中将,<td>改为<td rowspan ="2">然后运行就OK
*表单标签<form> (重点)
在网站开发的过程中,用户可以使用上述【用户交互】相关的标签让用户输入内容,但如果想要再浏览器上把输入的内容提交到后台,则需要 表单
和 提交按钮
。
表单用于向服务器传输数据。
表单能够包含input元素比如:文本字段,复选框,单选框,提交按钮等
表单还可以包含textarea,select,fieldset 和label 元素
form内部【用户交互】相关标签必须设置name,不然提交数据后后端无法获取。
// 提交表单之后,实际上会将表单中的数据构造成一种特殊的结构,发送给后台,类似于:
{
user:用户输入的姓名,
pwd:用户输入的密码
......
}
radio
、checkbox
、select
除了要设置name属性以外,还必须设置value属性,因为这三中标签在form表单提交时,不会把看到的内容提交到后台,而是把选择选项对应的value值提交到后台
表单属性:
action 属性:代表表单要提交的地址。
<form action="192.168.1.4 8080/index" method="post">
<!-- action="" 表示表单要提交的地址。-->
<p>姓名:<input type="text" name="username"></p>
<p>密码:<input type="password" name="password" ></p>
<p>爱好:音乐<input type="checkbox" name="hobby" value="music">电影<input type="checkbox" name="hobby" value="movie"></p>
<p>性别:男<input type="radio" name="gender" value="man">女<input type="radio" name="gender" value="woman"></p>
<p><input type="submit" value="提交注册"></p>
</form>
method 属性:代表表单的提交方式
提交方式:-get(默认) -post (这是常见的两种请求方式)
get : 1)提交键值对 放在地址栏中url后面
2)安全性较差
3)对提交内容的长度有限制
-post : 1) 提交的键值对 不放在地址栏
2)安全性相对较高
3)对提交的内容理论上没有长度限制
enctype="multipart/form-data"如果form内部有文件上传,必须加上此设置。
<form action="192.168.1.4 8080/index" method="post" enctype="multipart/form-data">
<p><input type="file",name="put_file"></p>
</form>
<label>标签 如下:
点击姓名,文本框可以输入内容
<label for="www">姓名</label>
<input id="www" type="text">
特殊字符:
alert() 代表弹出框,括号内写:弹出的内容
  每个nbsp代表一个空格 例如:
你好 是啊</br>
< 代表小于号
too<much</br>
> 代表大于号
too>much</br>
©代表:©
©</br>
®代表:®
®</br>
" 代表 ''
"
以上代码的效果图如下: