标签:意思 classname add 页面 爬虫 外部 快捷键 sub 常见
HTML作为客户端,首先需要一个服务器socket
import socket
sk = socket.socket()
sk.bind((‘127.0.0.1‘, 8080))
sk.listen(5)
while 1:
con, addr = sk.accept()
data = con.recv(9000)
print(data)
con.send(b‘HTTP/1.1 200 OK\r\n\r\n‘)
# con.send(b‘o98k‘)
# con.send(b‘<h1>hello world<h1>‘)
with open(‘2 第一个html文件.html‘, ‘rb‘)as f:
con.send(f.read())
con.close()
HTML简易模板介绍
<!DOCTYPE html> <!--#声明一个html文件-->
<html lang="zh-CN"> <!--lang语言,这个页面的主要语言是中文-->
<head>
<meta charset="UTF-8"><!--中文的网站需要设置meta charset="UTF-8"-->
<title>CSS样式优先级</title>
<style>
h1 {color: red;
}
</style>
<script>alert(123)</script>
<meta name="keywords" content="树下野狐">
<meta name="description" content="覆雨翻云">
<!-- meta name = description是网页描述 meta name = keywords是关键字 content里面搜索引擎的关键字,用于爬虫机器人-->
</head>
<!--#head标签不是给用户看的,是给浏览器看的-->
<body>
<h1>小伙子要加油</h1>
<a href="https://www.cnblogs.com/Selbst/">‘断浪狂刀忆年少‘</a>
</body>
</html>
HTML常用的标签
head标签:
1. <title></title> 定义网页标题
2.<style></style> 定义内部样式表
3.<script></script> 定义js代码或引入外部js文件
4.<link/> 引入外部样式表文件
5.<meta> 定义网页原信息-->
标签的语法:1. <标签名 属性1=‘属性值‘,属性2="‘属性值">内容部分</标签名>
2.<标签名 属性1=‘属性值‘,属性2="‘属性值".../>
标签几个重要属性:
1.id 定义标签的唯一ID,HTML文档树中唯一
2.class:为html元素定义一个或多个类名(classname)(CSS样式类名)
3.style:规定元素的行内样式(CSS样式)
<!--快捷键:比如写一个h1按下tab键标签就出来了-->
<!--注释:-->
<!-- 1.在html里面<!––>代表注释-->
<!-- 2.我们可以以某个部分start end 来写,使用分区来写-->
<!-- head start -->
<!-- head end-->
<!--首页 广告区 开始-->
<!--首页 广告区 结束-->
body标签:
展示给用户看的标签:
Body标签中的常用标签
1. 常用标签的分类
1. 独占一行的 块儿级标签
1. h1~h6
2. p 段落标签可以写大量文字
3. div
4. hr (在页面上加一条横线)
5. li
6. tr
2. 在一行显示的 行内标签/内联标签
1. a
2. span
3. img
4. b 加粗 /i 斜体/u 下划线/s删除
5.br 换行
用户输入的标签:
1. form标签
一个容器,包住所有获取用户输入的标签
- action属性
- method属性
- enctype属性
2. input标签
type
text
password
email
date
checkbox
radio
button --> 普通按钮 --> 通常用JS给它绑定事件
submit --> 提交按钮 --> 默认将form表单的数据提交
reset --> 重置按钮 --> 将当前form中的输入框都清空
3. select标签
4. textarea标签
5. form表单提交数据的注意事项
{“k1”: "v1"}
1. form标签必须把获取用户输入的标签包起来
2. form不是from, form标签必须有action属性和method
3. form中的获取用户输入的标签必须要有name属性
特殊标签:
<b id="666">加粗标签</b>
<i>斜体标签</i>
<u>下划线标签</u>
<s>删除标签</s>
<!--<!–如何在页面上写 a>b b<a 这种--,这里我们其实就要用到转义,在html里面叫特殊符号>-->
<p>b<a</p> < 小于号
<p>a>b</p> > 大于号
<p>&nbsb;</p> &nbsb;空格
<p>©</p> ©版权的特殊符号
<p>®</p> ®注册的特殊符号
<p>¥</p> ¥钱的特殊符号
<hr>
<div>我是div标签</div>
<span>我是span标签</span>
例子:
<a href="https://www.luffycity.com/home" target="_blank">路飞学成</a> target代表目标,_blank新页面打开
<a href="#666">屠龙宝刀,点击就送</a> #代表当前页面锚点,根据id=666唯一值实现一个和跳转,
页面内从一个位置跳到另一个位置。
标签的嵌套
标签可以嵌套标签
注意事项:
1. 尽量不要用内联标签包块儿级标签
2. p标签不能嵌套p标签
3. p标签不能嵌套div标签
有序列表,无序列表标签
<body>
<ul type="none"> #无序列表,type=none把前面的标识去掉
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ol type="A" start="2"> #有序列表,type把前面的标识
<li>666</li>
<li>777</li>
<li>888</li>
</ol>
<dl> 标题标签
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
表格标签:
<table border="1"> 表格, border加上边框
<thead>
<tr>表头tr
<th>姓名</th>
<th>性别</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>常见</td>
<td>男</td>
<td>睡觉</td>
</tr>
<tr>
<td>许硕</td>
<td>男</td>
<td>电视剧</td>
</tr>
<tr>
<td>秃头</td>
<td>男</td>
<td>LOL</td>
</tr>
</tbody>
</table>
获取用户输入标签例子:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:8080" method="post" enctype="multipart/form-data">
<label for="i1">用户名:</label> <!-- label标签与输入框input建立关联,在点击文字时会跳转到输入框 -->
<input type="test" id="i1" placeholder="请输入用户名" value="灵感仰"><!--placeholder 提示性文本 value默认值 -->
<label >密码<!-- label标签也可以这样写-->
<input type="password">
</label>
<input type="date">
<input type="email">
<input type="checkbox">
<hr>
<input type="text">
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<hr>
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="basketball" checked="checked">篮球,checked默认选中属性,当key和value属性一样可以简写
<input type="checkbox" name="hobby" value="doublecolorball">双色球
<input type="button" value="我是一个按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
<hr>
<select name="city" >
<option value="010">北京</option>
<option value="020" selected>深圳</option>selected默认选中的意思
<option value="030">太原</option>
</select>
<select name="city" id="" multiple="multiple"> multiple方法用于多选
<option value="010">北京</option>
<option value="020">深圳</option>
<option value="030">太原</option>
</select>
<hr>
<textarea name="info" id="" cols="30" rows="10"></textarea>#textarea大段文本标签
<input type="file"><!--上传文件标签,需要注意在form表单需要加enctype="multipart/form-data" -->
2. input标签
type
text
password
date
checkbox 多选
radio 单选
button --> 普通按钮 --> 通常用JS给它绑定事件
submit --> 提交按钮 --> 默认将form表单的数据提交
reset --> 重置按钮 --> 将当前form中的输入框都清空
</form>
<form action="http://127.0.0.1:8080" method="post">
3. 获取用户输入的标签
1. form标签
一个容器,包住所有获取用户输入的标签
- action属性
- method属性
- enctype属性
<input type="text" name="alex">
<input type="submit">
</form>
</body>
</html>
标签:意思 classname add 页面 爬虫 外部 快捷键 sub 常见
原文地址:https://www.cnblogs.com/Selbst/p/12913809.html