一、web服务的本质

web服务本质上也是浏览器发送请求，基于http网络协议，发送到服务端，服务端接收请求并做出响应

HTTP协议：http协议
超文本传输协议
客户端服务端在数据交互的时候都必须遵循这套协议

以python模拟一个简单的服务端：

import socketserver = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)while True:conn, addr = server.accept()data = conn.recv(1024)# 必须指明协议，否则无法接收响应conn.send(b'HTTP/1.1 200 OK \r\n\r\n')conn.send(b'<h1>Hello World!</h1>')conn.close()

什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例：

http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分组成
第1部分：为协议：http://、ftp://等
第2部分：为站点地址——可以是域名或IP地址
第3部分：为页面在站点中的目录——stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。

二、HTML

html是一种超文本标记语言，不是编程语言，没有任何的逻辑。

最基本的html文件是：

<!DOCTYPE html>   声明为html5文档
<html lang="en">  文档开始标记
<head>  文档开头<meta charset="UTF-8"><title>Title</title>  网页标题
</head>
<body>  网页主体内容</body>
</html>   文档结束标记

1、注释

2、标签

HTML标签是由尖括号包围的关键字，如<html>, <div>等
HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
也有一部分标签是单独呈现的，比如：<br>、<hr>、<img src="1.jpg" />等。
标签里面可以有若干属性，也可以不带属性。

标签的语法：

<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名属性1=“属性值1” 属性2=“属性值2”…… />

几个很重要的属性：

id：定义标签的唯一ID，HTML文档树中唯一
class：为html元素定义一个或多个类名（classname）(CSS样式类名)
style：规定元素的行内样式（CSS样式）

3、head内常用标签

<!DOCTYPE html>
<html lang="en">
<head><!--head存储的是用户看不到的，主要给浏览器和搜索引擎看的--><!--指定字符集--><meta charset="UTF-8"><!--2秒后跳转到对应的网址，注意引号--><meta http-equiv="refresh" content="2;URL=https://blog.csdn.net/weixin_40406241"><title>这是我的第一个前端页面</title><!--在style里面给h1标题设置颜色--><!--<style>--><!--h1 {--><!--color: greenyellow;--><!--}--><!--</style>--><!--<script>--><!--// &lt;!&ndash; alert可以弹窗 &ndash;&gt;--><!--// alert('hello world!')--><!--</script>--><!--src引入外部的js代码--><script src="myjs.js"></script><!--href引入css代码--><link rel="stylesheet" href="mycss.css">
</head>
<!--用户能够看到的都放在body里面-->
<body>
<h1>冲天香阵透长安，满城尽带黄金甲</h1>
</body>
</html>

<title></title>：页面标题

meta标签有两个属性：http-equiv属性和name 属性

1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="京东商城，中国优秀电商">

4、body内标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>html好多东西啊</title><style>h1 {color: red}p {color: blue}</style>
</head>
<body>
这是正常文本！！！！！！
<h1>h1一级标题</h1>
<h2>h2二级标题</h2>
<h3>h3三级标题</h3>
<h4>h4四级标题</h4>
<h5>h5五级标题</h5>
<h6>h6六级标题</h6>
<h1>清平调 <i>李白</i></h1>
<br>
<p>云想衣裳花想容，春风拂槛露华浓。</p>
<p>若非群玉山头见，会向瑶台月下逢。</p>
<hr>
</body>
</html>

p：段落标签

h1-h6：标题标签

<s>199</s>现价：99 （显示时199会有删除符）
<br> 换行
<hr> 分割线
<u>下划线</u>
<i>斜体</i>
<b>加粗</b>

特殊字符：

1 &lt; a       --1<a
3 &gt; 1       --3>1
&yen;          --￥，人民币符号
&copy;         --©，版权
&reg;          --®，注册
&amp;          --&
<p>天呐&nbsp;&nbsp;&nbsp;风吹草低见牛羊</p>  --空格

div标签和span标签

<div>div1<div>div2<div>div3</div></div>
</div>
<div>div4</div>
<span>span</span>
<span>span</span>

div标签用来定义一个块级标签，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联(行内)标签，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

所谓块标签，是以另起一行开始渲染的元素，行内标签则不需另起一行。如果单独在网页中插入这两个标签，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。

块儿级标签 div h1~h6 p hr br

行内标签 span a img i s b u

注意：

关于标签嵌套：通常块级标签可以包含内联标签或某些块级标签，但内联标签不能包含块级标签，它只能包含其它内联标签。

p标签不能包含块级标签，p标签也不能包含p标签。

img标签：

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

a标签：

超链接标签

所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

<a href="http://www.baidu.com" target="_blank" >点我</a>

target属性用来控制是否在当前页面跳转
默认是_self当前页
也可以指定成_blank新建页面跳转

还有一个锚点功能，用来回到页面顶部：

<a href="" id="a1">top</a>
<div style="height: 1000px; background: blue"></div>
<div style="height: 1000px; background: green"></div>
<div style="height: 1000px; background: red"></div>
<a href="#a1">点我返回top</a>

列表标签：

1、无序列表

<ul type="square">  <!--type默认disc--><li>lsb</li><li>lxx</li><li>shj</li><li>cr</li><li>lo</li><li>lk</li>
</ul>

type属性：

disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

2、有序列表

<ol type="I"><li>111</li><li>222</li><li>333</li><li>444</li><li>555</li>
</ol>

type属性：

1 数字列表排序，默认值
A 大写字母排序
a 小写字母排序
Ⅰ大写罗马数字排序
ⅰ小写罗马数字排序

3、标题列表

<dl><dt>标题1</dt><dd>内容一</dd><dd>内容二</dd><dd>内容三</dd><dt>标题2</dt><dd>内容2</dd>
</dl>

表格标签：

<table border="1">  <!--border指定表格边框--><thead><tr><th>name</th><th>age</th><th>hobby</th></tr></thead><tbody><tr><td>shj</td><td>18</td><td>breaking</td></tr><tr><td>lzp</td><td>38</td><td rowspan="2">lg</td></tr></tbody>
</table>

属性:

border: 调整列表的边框
cellpadding: 调文本与单元格之间的距离
cellspacing: 调单元格与外边框之间的距离
width: 像素百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
tr 一个tr表示一行

form表单：

表单用于向服务器传输数据，从而实现用户与Web服务器的交互

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label标签。

表单属性：

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

form表单中只有input的type类型为submit才会触发提交信息的动作

如果不想通过input标签来触发提交动作那么可以直接写一个：<button>button按钮</button>

input的属性：

type属性值	表现形式	对应代码
text	单行输入文本	<input type=text" />
password	密码输入框	<input type="password" />
date	日期输入框	<input type="date" />
checkbox	复选框	<input type="checkbox" checked="checked" />
radio	单选框	<input type="radio" />
submit	提交按钮	<input type="submit" value="提交" />
reset	重置按钮	<input type="reset" value="重置" />
button	普通按钮	<input type="button" value="普通按钮" />
hidden	隐藏输入框	<input type="hidden" />
file	文本选择框	<input type="file" />

select的属性：

<select name="province" id=""><option value="beijing">北京</option><option value="shanghai">上海</option><option value="shenzhen">深圳</option>
</select>

textarea
获取用户大段文本值

搭建简易的html页面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h3>用户注册</h3>
<form action="" method="post" enctype="multipart/form-data"><!--一般label与input连用，for里的label指明给谁用，并且加了label可以点击前面的username定位输入框--><label for="i1">username:<input type="text" id="i1" name="username"></label><label for="i2">password: <input type="password" name="pwd" id="i2"></label><p>birthday: <input type="date" name="birthday"></p><p>gender:男 <input type="radio", name="gender" value="0">女 <input type="radio" name="gender" value="1">保密 <input type="radio" name="gender" value="2"></p><p>hobby:<input type="checkbox" checked name="hobby" value="basketball">篮球<input type="checkbox" checked name="hobby" value="football">足球<input type="checkbox" checked name="hobby" value="doublecolorball">双色球</p><p>province:<!--多选在select里加一个multiple--><select name="province" id=""><option value="beijing">北京</option><option value="shanghai">上海</option><option value="shenzhen">深圳</option></select></p><p>city:<select name="" id=""><optgroup label="北京"><option value="">朝阳</option><option value="">昌平</option><option value="">海淀</option></optgroup><optgroup label="上海"><option value="">浦东</option><option value="">徐汇</option><option value="">青浦</option></optgroup><optgroup label="深圳"><option value="">福田</option><option value="">罗湖</option><option value="">宝安</option></optgroup></select></p><p>info:<textarea name="info" id="" cols="30" rows="10"></textarea></p><p>file:<input type="file" name="file"></p><input type="submit" value="注册"><input type="button" value="普通按钮"><input type="reset" value="重置"><button>button按钮</button>
</form></body>
</html>

实现的效果：

总结:
   1、获取用户输入的标签都必须有一个name属性
      用户输入的值会被存放到标签的value属性中
      你可以理解为name属性对应是字典的key
      用户输入的被value属性获取的到值是字典的value
   2、 label标签
      通常是和input标签组合使用
      <form action="">
         <label for="i1">username:<input type="text" id="i1" name="username"></label>
         <label for="i2">password: <input type="password" name="pwd" id="i2"></label>
         <input type="submit">
      </form>

form表单中几个重要的属性

       action:用来控制数据到底提交给谁写url来指定提交给谁

       form表单默认是get请求可以通过method属性修改提交方法

       form表单中需要给每一个获取用户输入的标签加上name属性用来标识当前数据的类型
           你可以将name属性当做字典的key 用户输入的当做字典的value 并且你可以手动设置value值

       form表单发送文件需要修改enctype属性的值
           默认是urlencoded不支持传输文件
           需要将其修改为multipart/form-data

GET请求与POST请求
   get请求:朝服务端获取资源(可以携带参数供服务端校验)
               不推荐携带敏感型的参数
               get请求携带的参数是有大小限制的大概4KB
               可以携带一些不重要的参数
post请求:朝服务端提交数据
               敏感性的信息都应该采用post提交方式

web前端之HTML常用标签相关推荐

从零开始学前端 - 3. HTML 常用标签_2
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
前端之HTML常用标签
## 本资源由 itjc8.com 收集 --- typora-copy-images-to: media --- > 第01阶段.前端基础.HTML常用标签 ## 学习目标 - 理解: - ...
从零开始学前端 - 2. HTML常用标签_1
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
Web前端，CSS常用之相对定位和绝对定位的区别，静态定位、子绝父相、固定定位、元素的层级关系的了解
前言持续学习总结输出中,今天分享的是Web前端,CSS常用之相对定位和绝对定位的区别,静态定位.子绝父相.固定定位.元素的层级关系的了解 1.定位的基本介绍我们的网页常见布局方式有:标准流.浮动. ...
web前端html+css常用布局05列表布局
web前端html+css常用布局05列表布局注意:引入jquery的jquery-2.1.4.min.js包图片从自己目录中路径. 代码: <!DOCTYPE html> <h ...
Web前端应用十种常用技术你全都知道吗？
随着JS与XHTML的应用普及,越来越多的Web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些Web界面应用技术大大的丰富了网站的表现形式,本文将为您精心推荐十种最常见的Web界 ...
前端--HTML，常用标签学习
文章目录一.HTML 1. 概述 2.入门案例 3.使用HBuilder 二.常用标签 1.概述 2. 常用标签 3.表格标签 4.表单标签form 5,无法提交的问题 6.练习表单标签一.HTM ...
WEB标准认识HTMLHTML常用标签
typora-copy-images-to: media 第01阶段.web基础:html-day01笔记-01-前言&WEB标准&认识HTML&HTML常用标签一.前言 1 ...
html-day01笔记-01-前言WEB标准认识HTMLHTML常用标签
typora-copy-images-to: media 第01阶段.web基础:html-day01笔记-01-前言&WEB标准&认识HTML&HTML常用标签一.前言 1 ...
Web前端培训：常用的Web前端开发框架有哪些？
学习web前端技术的时候,我们会学到开发框架这一课,web前端的开发框架是有很多的,有一些是常用的,那么常用的Web前端开发框架有哪些呢?来看看下面的详细介绍. 常用的Web前端开发框架有哪些?程序员 ...

web前端之HTML常用标签