前端知识学习(HTML)
2021-05-22 11:28
标签：box 分类 checked ack 实现 close bsp tar end Web服务的本质(socket实例) HTML文档树 Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档 1. 自闭和标签 2. 主动闭合标签 所有标签可以分为两类 - 块级标签：div，H系列，p级标签... (特性，占整行内容，可以设置高度和宽度) - 内联标签(行内标签)：span标签... (特性，有多少占多少，无法设置高度和宽度) 提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词 1. 页面编码（告诉浏览器使用什么编码） 2. 刷新和跳转 3. 关键字(搜索引擎的爬虫就是根据这里写的关键字去寻找对用的页面) 4. 描述 5. X-UA-Compatible 用来解决HTML代码与IE之间的兼容，更多 网页的标题 1. 引入CSS文件 2. 页面图标 icon 在页面中写css样式 1. 引入JS文件 2. 写JS代码 网页图片HTML代码大全 p表示段落，默认段落之间是有间隔的！ br 是换行 div是块级标签 span是行内标签 input标签和form标签的结合 action为提交的地址，method为提交的方式（GET：将提交的数据嵌套的URL上进行提交；POST：将提交的数据放在body中提交） input type="text" - 普通文本输入框 属性：name，values input type="password" - 密文输入框 属性：name，values input type=‘submit‘ - 提交表单按钮，属性values input type=‘radio‘ - 单选框，属性value，checked="checked"，name（name相同则互斥），checked="checked"设置默认值 input type=‘checkbox‘ - 复选框 属性value, checked="checked"，name属性（批量获取数据），checked="checked"设置默认值 input type=‘file‘ - 上传文件，依赖form表单的一个属性 enctype="multipart/form-data" form与select的结合 属性：selected="selected"用来设置默认值 在select标签中设置一个属性size指定显示的多少个值 在select标签中设置一个multiple="multiple"属性可以进行多选 进行分组，使用optgroup标签嵌套option标签 form与textarea的结合 textarea标签可以进行多行输入，而input的type="text"只能进行单行输入 - 跳转 - 锚 在跳转到的标签内使用id属性设置一个id，在a标签中使用href属性进行跳转 用来引入图片 属性：src - 图片的地址 title - 图片的标题 alt - 当图片的地址找不到无法显示的时候，显示alt的内容 无序列表 使用ul嵌套li标签 有序列表 使用ol嵌套li标签 分组列表 使用dl嵌套dt(分组的名)标签，dt标签嵌套dd标签 写法： 1） 简略写法 2）标准写法(需要写出表头thead和内容tbody的标签) 合并单元格 colspan横向合并单元格，rowspan纵向合并单元格 用于点击鼠标，使得关联的标签获取光标 效果就是，点击用户名也可以在input框中进行输入 可以实现一个这样的框框 嵌套 legend 标签可以实现 那这个标签又有什么用呢，我们可以实现一个：如图的样子(样式虽然有些丑，但我们可以用css做修饰) 前端知识学习(HTML) 标签：box 分类 checked ack 实现 close bsp tar end 原文地址：http://www.cnblogs.com/zhichaoma/p/7684451.html
import socket
def handle_request(client):
buf = client.recv(1024)
client.send(bytes("HTTP/1.1 200 OK\r\n\r\n",encoding = ‘utf-8‘))
client.send(bytes("welcome"))
def main():
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.bind((‘localhost‘, 8000))
sock.listen(5)
while True:
try:
connection, address = sock.accept()
handle_request(connection)
connection.close()
except:
pass
if __name__ == ‘__main__‘:
main()
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
head>
body>
body>
html>
Doctype
DOCTYPE html>
标签分类
title>Titletitle>
meta />
head部分
Meta(metadata information)
meta http-equiv=“content-type” content=“text/html;charset=utf-8”/>
meta http-equiv="Refresh" Content="30"/>
meta http-equiv="Refresh" Content="5"; Url="http://www.autohome.com.cn"/>
meta name="keywords" content="Html,css,社区,python"/>
meta name="description" content="描述信息"/>
meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
title
title>Titletitle>
link
link rel="stylesheet" type="text/css" href="css/common.css" >
link rel="shortcut icon" href="image/favicon.ico">
Style
style>
.pg-head {
height: 30px;
background-color: green;
position: fixed;
top: 0;
right: 0;
left: 0;
}
style>
Script
script type="text/javascript" src="js/gpt.js"> script >
script type="text/javascript" > ... script >
body
P和br标签
p>段落内容p>
br/>
H标签
h1>H1h1>
h2>H2h2>
h3>H3h3>
h4>H4h4>
h5>H5h5>
h6>H6h6>
div和span标签
div>hello worlddiv>
span>hello worldspan>
form表单
form action="http://localhost:8888/index" method="GET">
input type="text" name="user" />
input type="password" name="pwd" />
input type="submit" value="登录" />
form>
form action="http://www.spdir.top" method="POST">
user: input type="text" name="user" valuse="user" />
password: input type="password" name="pwd" values="password" />
form>
input type=‘button‘ - 普通按钮，没有实际意义(用于结合JS使用)，属性values
input type=‘reset‘ - 重置 ，属性valuesform action="http://www.spdir.top" method="POST">
input type="submit" value="提交"/>
input type="button" value="按钮"/>
input type="reset" value="重置"/>
form>
form action="http://www.spdir.top" method="POST">
男: input type="radio" name="gender" value="1"/>
女: input type="radio" name="gender" value="2" />
保密: input type="radio" name="gender" value="3" checked="checked" />
form>
form action="http://www.spdir.top" method="POST">
p>爱好p>
篮球: input type="checkbox" name="interest" value="1"/>
足球: input type="checkbox" name="interest" value="2"/>
羽毛球: input type="checkbox" name="interest" value="3"/>
游泳: input type="checkbox" name="interest" value="3"/>
读书: input type="checkbox" name="interest" value="4" checked="checked"/>
学习: input type="checkbox" name="interest" value="5"/>
form>
form action="http://www.spdir.top" enctype="multipart/form-data" method="POST">
input type="file" name="fname" />
form>
form action="http://www.spdir.top" method="POST">
city1:
select name="city1">
option value="1">北京option>
option value="2" selected="selected">上海option>
option value="3">广州option>
option value="4">深圳option>
option value="5">成都option>
select>
form>
form action="http://www.spdir.top" method="POST">
city2:
select name="city2" size="6">
option value="1">北京option>
option value="2" selected="selected">上海option>
option value="3">广州option>
option value="4">深圳option>
option value="5">成都option>
select>
form>
form action="http://www.spdir.top" method="POST">
city3:
select name="city3" multiple="multiple" size="5">
option value="1">北京option>
option value="2" selected="selected">上海option>
option value="3">广州option>
option value="4">深圳option>
option value="5">成都option>
select>
form>
form action="http://www.spdir.top" method="POST">
city4:
select name="city4">
optgroup label="河北省">
option value="1">石家庄option>
option value="2">邯郸option>
optgroup>
optgroup label="北京">
option value="3" selected="selected">朝阳option>
option value="4">海淀option>
optgroup>
select>
form>
form action="http://www.spdir.top" method="POST">
textarea name="word">textarea>
form>
a标签
a href="http://wwww.baidu.com">当前页面打开a>
a href="http://www.baidu.com" target="_blank">新的页面打开a>
a href="#i1">第一章a>
a href="#i2">第二章a>
a href="#i3">第三章a>
div id="i1" style="height: 600px;">第一章内容div>
div id="i2" style="height: 600px;">第二章内容div>
div id="i3" style="height: 600px;">第三章内容div>
img标签
img src="a.jpeg" title="头像" style="height: 300px; width: 200px;" alt="链接找不到显示"/>
列表标签
ul>
li>aaali>
li>aaali>
li>aaali>
ul>
ol>
li>aaali>
li>aaali>
li>aaali>
ol>
dl>
dt>group 1dt>
dd>body 1dd>
dt>group 2dt>
dd>body 2dd>
dl>
表格标签
table border="1">
tr>
th>主机名th>
th>端口th>
tr>
tr>
th>1.1.1.1th>
th>80th>
tr>
tr>
th>2.2.2.2th>
th>443th>
tr>
table>
table border="1px">
thead>
tr>
th>主机名th>
th>端口th>
tr>
thead>
tbody>
tr>
th>1.1.1.1th>
th>80th>
tr>
tr>
th>2.2.2.2th>
th>443th>
tr>
tbody>
table>
table border="1">
thead>
tr>
th>表头1th>
th>表头2th>
th>表头3th>
tr>
thead>
tbody>
tr>
th colspan="2" >1th>
th>1th>
tr>
tr>
th rowspan="2">2th>
th>2th>
th>2th>
tr>
tr>
th>3th>
th>3th>
tr>
tbody>
table>
label标签
label for="username1">用户名：label>
input id="username1" type="text"/>
fieldest标签
fieldset>fieldset>
fieldset>
legend>登录legend>
fieldset>
fieldset>
legend>登录legend>
label for="username2">用户名：label>
input id="username2" type="text"/>
br/>
label for="pwd">密码：label>
input id="pwd" type="password"/>
fieldset>
下一篇：js模板引擎实例一