赞
踩
标签必须是封闭的,标签由自封闭的和半封闭的
半封闭:成对出现的,如<div></div>,第一个标签是开始,第二个是结束,结束的标签带有斜杠
自封闭:单独出现的标签,如<br>,<hr>等
标签属性:控制标签的显示,高度、宽度、颜色等,标签可以没有属性(就是不写)
有些标签的属性自带一些特殊效果,有些没有
标签语法:
<标签名 属性1=“属性值1” 属性2=“属性值2”…>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…>
在pycharm编辑器中,找到一行内容ctrl+/就能注释,注释的内容不会在网页上显示出来
<!--我是注释-->
注释在网页查看的时候并不会显示,一般用来给开发人员看的,标注
<!DOCTYPE> 必须写在是 HTML 文档的第一行,位于 标签之前, 声明浏览器关于页面使用哪个 HTML 版本进行编辑
<!DOCTYPE html>
html声明用的是html5标准
序号 | 标签 | 说明 |
---|---|---|
01 | <title></title> | 定义网页标题 |
02 | <style></style> | 定义内部样式 |
03 | <script></script> | 定义JS代码或引入外部JS文件 |
04 | <link> | 引入外部样式表文件 |
05 | <meta> | 定义网页原信息 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是title标题</title>
</head>
<body>
<h1>你好,我是h1标题</h1>
<!--我是注释-->
</body>
</html>
meat标签可提供有关页面的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词;位于文档的头部,不包含任何内容;提供的信息是用户不可见的
mean标签的组成,有http-equiv属性和name 属性
mean标签可以写多个
① http-equiv属性,相当于http的文件头作用,向浏览器传递信息,以帮助正确地显示网页内容
content中的内容其实就是各个参数的变量值
url,统一资源定位器,就是我们说的网址
⑴、跳转对应的地址
http-equiv=“refresh” content=“3;URL=https:www.baidu.com”
3秒刷新一次页面,写上url之后,3秒后在原页面跳转到url对应的地址,跳转过去就与原页面无关了
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="refresh" content="3;URL=https:www.baidu.com">
#把URL和后面的地址去掉就是没2秒刷新一次页面,加上就是在原页面跳转到URL指向的地址,与之前页面无关了
<title>我是title标题</title>
</head>
<body>
<h1>你好,我是h1标题</h1>
</body>
</html>
⑵、 指定网页的编码类型
存在中文网页内容需要指定编码,不同浏览器默认编码不同(如360浏览器默认gbk编码),可能会出现乱码
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" charset="UTF-8">
<title>我是title标题</title>
</head>
<body>
<h1>你好,我是h1标题</h1>
</body>
</html>
⑶、指定IE以最高级模式渲染文档
主要是IE的渲染与其他浏览器有较大的不同,所以在制作前端页面要注意浏览器的兼容性问题
实际上看上去没啥效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge" charset="UTF-8">
<title>我是title标题</title>
</head>
<body>
<h1>你好,我是h1标题</h1>
</body>
</html>
② name 属性
name主要用于描述网页,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的,对文档的描述,可以在百度的页面上通过F12查看,当然百度做了很多修饰
自己写的没有收集在百度中,所以看不到效果,下面截了个淘宝的图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="淘宝网" content="淘宝网,中国最大电子交易网站">
<title>我是title标题</title>
</head>
<body>
<h1>你好,我是h1标题</h1>
</body>
</html>
内敛标签(行内标签):不换行
块级标签(行外标签):独占一行
html标签全称:超文本标记语言,就是标记用的,在内容上加上标签,显示对应的效果,标签有是自封闭和半封闭
div标签单独占一行,里面的东西没有任何效果,所以是使用最多的,通过标签进行页面设置,美观等
span标签没有任何效果,也不独占一行
嵌套标签,块级标签
<div>
<div>div1</div>
<div>div2</div>
</div>
内敛标签只能嵌套内敛标签,块级标签可以嵌套内敛标签和部分块级标签
p标签不能嵌套块级标签,p标签不能嵌套p标签
所有标签在浏览器中都被称为元素
<body>
我是文字
<b>我是文字</b>
</body>
<body>
我是文字
<i>我是文字</i>
</body>
<body>
<u>我是文字</u>
</body>
<body>
<s>我是文字</s>
</body>
独占一行,
p标签比较特殊,不能包含块级标签,p标签也不能包含p标签。可以试一下p标签套p标签,f12你会发现三个p标签,标签都是单独的,嵌套无效
<body>
我是文字
<p>我是段落</p>
我是文字
</body>
⑴嵌套问题
块级标签,从标题1到标题6,之后的不存在,就是普通文本了
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<h7>标题7</h7>
</body>
</html>
块级标签
水平线,单独占一行
<body>
床前明月光,<hr>疑是地上霜
床前明月光,疑是地上霜
<hr>
</body>
直接百度搜HTML特殊符号对照表
http://www.fhdq.net/ts/177.html
符号 | 说明 | 符号 | 说明 |
---|---|---|---|
| 空格 | ||
后续在补充
div独占一行,span不独占一行
div是块级标签
没有什么效果,是这两个标签最大的效果,主要通过CSS样式为其赋予不同的表现效果
<body>
<div>床前明月光,疑是地上霜</div>床前明月光
<span>床前明月光,疑是地上霜</span>床前明月光
</body>
img内敛标签
.当前目录
…父目录(上一级目录)
属性 | 说明 |
---|---|
src | 图片路径,路径分为绝对路径和相对路径 |
alt | 图片未加载成功提示的信息 |
title | 鼠标悬浮时提示信息 |
width | 宽度,默认单位像素px,高和宽只设置其中一个,会自动等比缩放 |
height | 高度 |
⑴相对路径的图片
<body>
<img src="图片.jpg" alt="这是图片" title="我是图片" width="100" height="200">
</body>
⑵网络图片地址
网络地址获取,搜索图片,f12查看地址,双击网络地址,将地址复制过去
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F14%2F20181014154202_pgazq.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657618193&t=796da1b241934b14be48fc7285386a2e" alt="这是图片" title="我是图片" height="200" width="200">
</body>
⑶本地绝对路径
通过socket打开失败,直接打开成功
原因:web服务器上的网络资源的地址定位是相对于网站根目录
本地跨分区加载图片通过file协议加载,否则可能无效,取决于浏览器
<img src="file:///c:/图片.jpg" alt="这是图片" title="我是图片" height="200" width="200">
⑷加载不出图片时的显示
<body>
<img src="" alt="这是图片" title="我是图片" height="200" width="200">
</body>
从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,一个图片,一个电子邮件地址,一个文件,一个应用程序等等
内敛标签,默认在源页面进行跳转
绝对URL :指向另一个站点
相对URL:指当前站点中确切的路径
锚URL:指向页面中的锚(href=“#top”),跳转尾部,首部等
属性 | 说明 |
---|---|
target=“_blank” | 在新窗口打开链接 |
target="_self | 默认属性,在当前页面跳转 |
⑴跳转对应地址
<body>
<a href="www.baidu.com">跳转到百度</a>
</body>
⑵跳转本页面的位置
<body>
<a href="#div01">跳转到尾部</a>
<div>我是头部</div>
<img src="图片.jpg" alt="" height="1000">
<div id="div01">我是尾部</div>
</body>
HTML5不再支持
⑴ 直接指明type属性,这种已经弃用了,可能还支持,尽量不要使用
<ul type="circle">
<li>01</li>
<li>02</li>
</ul>
⑵通过style或css设置
<ul style="list-style-type: disc">
<li>01</li>
<li>02</li>
</ul>
type属性 | 说明 | type属性 | 说明 |
---|---|---|---|
disc | 默认,实心圆 | circle | 空心圆 |
none | 无标记 | square | 实心方块 |
decimal | 数字 | decimal-leading-zero | 0开头的数字标记。(01, 02, 03, 等) |
lower-roman | 小写罗马数字 | upper-roman | 大写罗马数字 |
lower-alpha | 小写英文字母 | upper-alpha | 大写英文字母 |
lower-greek | 小写希腊字母 | lower-latin | 小写拉丁字母(a, b, c, d, e, 等。) |
upper-latin | 大写拉丁字母(A, B, C, D, E, 等。) | hebrew | 传统的希伯来编号方式 |
armenian | 传统的亚美尼亚编号方式 | georgian | 传统的乔治亚编号方式(an, ban, gan, 等。) |
cjk-ideographic | 简单的表意数字 | hiragana | 标记是:a, i, u, e, o, ka, ki, 等。(日文平假名字符) |
katakana | 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名字符) | hiragana-iroha | 标记是:i, ro, ha, ni, ho, he, to, 等。(日文平假名序号) |
katakana-iroha | 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名序号) |
ol标签是有序列表,通过li定义列表的选项
<ol type="1" start="2">
<li>床前明月光</li>
<li>疑是地上霜</li>
</ol>
type属性 | 说明 |
---|---|
1 | 1 数字列表,默认值, start是从数字第几个开始 |
A | 大写字母 |
a | 小写字母 |
Ⅰ | 大写罗马 |
i | 小写罗马 |
dl标题列表,dt定义一级,dt定义二级
多重可以进行嵌套,在dd中写dl
<dl>
<dt>床前明月光</dt>
<dd>疑是地上霜</dd>
<dt>举头望明月</dt>
<dd>低头思故乡</dd>
</dl>
网页中的Excel表格
属性 | 说明 | 属性 | 说明 |
---|---|---|---|
cellpadding | 内边距 (内边框和内容的距离) | border | 表格边框 |
cellspacing | 外边距.(内外边框的距离) | width | 像素 百分比.(最好通过css来设置长宽) |
rowspan | 单元格竖跨多少行 | colspan | 单元格横跨多少列(即合并单元格) |
⑴基本表格
<table border="1">
<thead>
<tr><!--标题-->
<th>班级</th>
<th>姓名</th>
<th>学号</th>
</tr>
</thead>
<tbody>
<tr>
<td>1班</td>
<td>张三</td>
<td>001</td>
</tr>
⑵边距控制
<table border="5" cellpadding="10" cellspacing="20">
<thead>
<tr><!--标题-->
<th>班级</th>
<th>姓名</th>
<th>学号</th>
</tr>
</thead>
<tbody>
<tr>
<td>1班</td>
<td>张三</td>
<td>001</td>
</tr>
<table border="5" cellpadding="10" cellspacing="20"> <thead> <tr><!--标题--> <th>班级</th> <th>姓名</th> <th>学号</th> <th>邮箱</th> </tr> </thead> <tbody> <tr> <td rowspan="2">1班</td> <td>张三</td> <td>001</td> <td>12345@qq.com</td> <tr> <td>1班</td> <td colspan="2">李四</td> <td>002</td> <td>123456@qq.com</td> </tr> </tbody> </table>
input配合form使用
不同的属性会有不同的变化
属性 | 说名 | 属性 | 说明 |
---|---|---|---|
text | 单行输入文本 | password | 密码输入框(不显示明文) |
date | 日期输入框,年月日 | checkbox | 复选框 |
radio | 单选框 | submit | 提交按钮,#发送浏览器上输入标签中的内容,配合form表单使用,页面会刷新 |
reset | 重置按钮,页面不会刷新,将所有输入的内容清空 | datetime-local | 年月日时分 |
button | 普通按钮,安着玩的,没别的效果 | hidden | 隐藏输入框 |
file | 文本选择框 | month | 年月 |
number | 数字,通过属性设置可以对数字进行限定 | range | 一定范围内数字值的输入,range 类型显示为滑动条 |
search | 搜索域 | tel | 电话号码 |
time | 时间 | url | URL地址 |
week | 周和年 | color | 颜色选择 |
属性说明:
用户名<input type="text">
用户名 <input type="text">
密码 <input type="password">
默认值
<input type="text" name="x" value="admin"> 用户名
<input type="password" name="x" value="123456"> 密码
用户名 <input type="text">
密码 <input type="password">
时间 <input type="date">
单选就得指定name,相同name名字的的是一组,只能选择一个
name是表单提交时的“键”
value 属性可设置或返回单选按钮的 value 属性的值
value如果没有设置,则默认value的值是“on”
<input type="radio" name="x"> 男
<input type="radio" name="x"> 女
默认值checked
checked是默认选择项,属性名与属性值相同时可以简写为checked,多个以最下面的为准,在多选中就是多个
<input type="radio" name="性别" value="1" checked="checked">男
<input type="radio" name="性别" value="2">女
<!--简写-->
<input type="radio" name="性别" value="1" checked>男
<input type="radio" name="性别" value="2">女
指定name相同的是一组,才能进行多选,要不相互之间没关系
checked是默认选择项,属性名与属性值相同时可以简写,多个以最下面的为准,在多选中就是多个
<input type="checkbox" name="x"> 1号
<input type="checkbox" name="x"> 2号
<input type="checkbox" name="x"> 3号
<input type="checkbox" name="x"> 4号
默认选项
<!--简写-->
<input type="checkbox" name="x" checked> 1号
<input type="checkbox" name="x" > 2号
<input type="checkbox" name="x" checked> 3号
<input type="checkbox" name="x"> 4号
在当前form表单所有内容全部提交,不分上下,按钮名字可以叫别的,通过value指定名字
普通按钮
<input type="text" name="x"> 用户名
<input type="password" name="x"> 密码
<input type="submit">
自定义按钮名字
<input type="text" name="x"> 用户名
<input type="password" name="x"> 密码
<input type="submit" value="我要提交">
HTML表单是HTML元素中较为复杂的部分,表单往往和脚本、动态页面、数据处理等功能相结合,因此它是制作动态网站很重要的内容,表单一般用来收集用户的输入信息
表单工作原理:访问者在浏览有表单的网页时,可填写必需的信息,然后按某个按钮提交。这些信息通过Internet传送到服务器上(数据库)。 服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误。当数据完整无误后,服务器反馈一个输入完成的信息
表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等
表单还可以包含textarea、select、fieldset和 label标签
form表单提交数据的时候,必须有个submit按钮
accept-charset | 规定在被提交表单中使用的字符集(默认:页面字符集)。 |
action | 规定向何处提交表单的地址(URL)(提交页面)。(提交数据的地址,写url路径) |
autocomplete | 规定浏览器应该自动完成表单(默认:开启)。 |
enctype | 规定被提交数据的编码(默认:url-encoded)。 |
method | 规定在提交表单时所用的 HTTP 方法(默认:GET),get或post |
name | 规定识别表单的名称(对于 DOM 使用:document.forms.name)(分组,携带数据的key) |
novalidate | 规定浏览器不验证表单 |
target | 规定 action 属性中地址的目标(默认:_self) |
打开python的socket进行测试
import socket
server=socket.socket()
server.bind(('127.0.0.1',80))
server.listen()
while 1:
conn,addr=server.accept()
frpm_browser_msf=conn.recv(1024).decode('utf-8')
print(frpm_browser_msf)
conn.send(b'HTTP/1.1 200ok\r\n\r\n')
with open('html.html',mode='rb') as f:
html=f.read()
conn.send(html)
conn.close()
⑴ 用户名密码提交
socket上接收到的数据
⑵选择框提交
没有name,提交不知道给谁,指定name,但是选择框变成on了,选择框需要指定value,没有value没数据,输入框的valus是默认值,但以用户输入的为主提交,单选多选都写
(让用户选择的,必须指定一个value值,要不然后端接收不到内容,用户自己填写的标签,不需要指定value值)
没有指定valve,后面看不到
<form action="http://127.0.0.1:80">
<input type="text" name="username"> 用户名
<input type="password" name="passwd"> 密码
<input type="submit" value="登录"><br>
<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女
</form>
指定valve
<form action="http://127.0.0.1:80">
<input type="text" name="username"> 用户名
<input type="password" name="passwd"> 密码
<input type="submit" value="登录"><br>
<input type="radio" name="sex" value="1"> 男
<!--使用数字代指。节省数据库空间-->
<input type="radio" name="sex" value="2"> 女
</form>
⑶post请求
表单默认是get请求,并且如果内容很多的话,你的地址栏不能够输入那么长的内容
post会把所有你提交的信息封装到一个消息体里面,在浏览器上就看不到了,相对安全
get | post |
---|---|
get请求一般用来请求获取数据 | post请求一般作为发送数据到后台,传递数据,创建数据 |
get请求也可以传参到后台,但是传递的参数则显示在地址栏,安全性低,且参数的长度也有限制(2048字符) | post请求则是将传递的参数放在request body中,不会在地址栏显示,安全性比get请求高,参数没有长度限制 |
3、get请求刷新浏览器或者回退没有影响 | post请求则会重新请求一遍 |
get请求可以被缓存,也会保留在浏览器的历史记录中 | post请求不会被缓存,也不好保留在浏览器的历史记录中 |
get请求通常是通过url地址请求 | post常见的则是form表单请求 |
post请求不显示,数据在消息体传回后端
<form action="http://127.0.0.1:80" method="post">
<input type="text" name="username"> 用户名
<input type="password" name="passwd"> 密码
<input type="submit" value="登录"><br>
<input type="radio" name="sex" value="1"> 男
<input type="radio" name="sex" value="2"> 女
</form>
⑷提交图片
图片丢失问题
<!--提交地址代码-->
<form action="http://127.0.0.1:80">
<input type="text" name="username">
<input type="submit">
</form>
<!--接收地址代码-->
<img src="图片.jpg" alt="美女" width="300" height="300">
<form action="http://1127.0.0.1:80">
<input type="text" name="username" id="username"> 用户名
<input type="password" name="passwd" id="passwd"> 密码
<input type="submit" name="2" id="提交">
</form>
通过运行socket,图片请求到此地址,图片丢失
原因:浏览器socket加载通过地址:http://127.0.0.1:80/图片.jpg去寻找的,服务端收到数据没有回复,而网页中的是相对路径没有地址,相对路径加载到浏览器中显示是加上IP地址+相对图片,所以失败
打开网页用pycharm提供的socket去打开
value在这里一样跟上面input,不一样在你没有写值,会把文本提交过去,input是on,但是一般不会这样设置
属性 | 说明 |
---|---|
multiple | 布尔属性,设置后为多选下拉框,否则默认单选 |
disabled | 禁用 |
selected | 默认选中该项 |
value | 定义提交时的选项值 |
<form action="http://127.0.0.1:80" method="post">
<select name="城市" id="城市">
<option value="1">北京</option>
<option value="2" selected>上海</option>
<!--selected默认 -->
<option value="3">广州</option>
</select>
</form>
下拉多选
按住Ctrl进行多选
<form action="http://127.0.0.1:80" method="post">
<select name="城市" id="城市" multiple>
<option value="1">北京</option>
<option value="2" selected>上海</option>
<!--selected默认 -->
<option value="3">广州</option>
</select>
</form>
label 标签为 input元素定义标注(标记)。如果不用这个label给input标签一个标记,input会变黄,不影响使用,只是提示你,别忘了给用户一些提示,也就是这个label标签。
标识标签功能
<form action="http://127.0.0.1:80" method="post">
<label for="username">用户名</label>
#for和input的id属性一样,就关联在一起了
<input id="username" type="text" name="userneme" value="张三" readonly>
<!--id指向for的username,id标识input标签-->
</form>
第二种写法,两种写法效果一样
<form action="http://127.0.0.1:80" method="post">
<label>
用户名<input type="text" name="username" value="张三" readonly>
</label>
</form>
属性 | 说明 |
---|---|
name | 名称,提交使用 |
rows | 行数 #相当于文本框高度设置 |
cols | 列数 #相当于文本框长度设置 |
disabled | 禁用 |
maxlength | 显示字符数,例如:maxlength=‘10’ 最多输入十个字符 |
<textarea name="评论区" id="1" cols="30" rows="10" ></textarea>
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。