1200字范文 > web前端之HTML常用标签

web前端之HTML常用标签

时间：2022-05-29 18:33:31

相关推荐

web前端之HTML常用标签

一、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举例：

/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><meta charset="UTF-8"><meta http-equiv="refresh" content="2;URL=/weixin_40406241"><title>这是我的第一个前端页面</title><script src="myjs.js"></script><link rel="stylesheet" href="mycss.css"></head><body><h1>冲天香阵透长安，满城尽带黄金甲</h1></body></html>

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

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

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

<meta http-equiv="content-Type" charset=UTF8"> <meta http-equiv="refresh" content="2;URL="><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> 分割线

特殊字符：

1 < a --1<a3 > 1 --3>1¥--￥，人民币符号© --©，版权®--®，注册&--&<p>天呐   风吹草低见牛羊</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="" 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"> <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"> <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标签。

表单属性：

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

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

input的属性：

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 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 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标签组合使用

<label for="i1">username:<input type="text" id="i1" name="username"></label>

<label for="i2">password: <input type="password" name="pwd" id="i2"></label>

</form>

form表单中几个重要的属性