今天小编给大家分享一下HTML常用的标签有哪些及如何使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
浏览器也是一个客户端
#这是一个服务器，我们通过浏览器就可以访问的到服务器发送的"hello" import socket sk = socket.socket() sk.bind(('127.0.0.1',8080)) sk.listen(5) while True: conn,addr = sk.accept() data = conn.recv(1024) conn.send(b"HTTP/1.1 200 ok\r\n\r\n") #必须要加上这一句，不然浏览器不认识 conn.send(b"hello") conn.close()
浏览器不通过服务端也可以渲染文本
HTML全称HyperText Markup Language，超文本标记语言，是一种描述性的标记语言。
超文本：音频、视频、图片
标记：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。
负责描述文档语义的语言
1）所有标记元素都要正确的嵌套，不能交叉嵌套。eg：
<h2><a></a></h2>
2）所有标记都必须小写
3）所有标记都必须关闭
双标签：<h></h2>
单标签：<img src=“URL” />
4）所有属性值必须加引号。eg：<h2 id="head"></h2>
5）所有属性必须有值：<a href="02.html" target="_blank">首页</a>
用pycharm新建一个HTML文件，文件会自动生成如下代码的一个HTML模板
<!DOCTYPE html> <!--文档声明头，告诉浏览器它应该用什么版本的html去解析以下代码--> <html lang="en"> <!--文档的开始标记和结束标记，lang="en"表示用英语或者其他国家的语言，在它们之间是文档的头部（head）和主体（body）--> <head> <!--定义了HTML文档的开头部分，不会再浏览器的文档窗口显示--> <meta charset="UTF-8"> <!--HTML的编码格式--> <title>Title</title> <!--网页标题，在浏览器标题栏显示--> </head> <body> <!--文本主体，他们之间的文本是可见的网页主题内容--> </body> </html>
| 标签 | 意义 |
|---|---|
| <title></title> | 定义网页标题 |
| <style></style> | 定义内部样式表 |
| <script></script> | 定义JS代码或引入外部JS文件 |
| <link/> | 引入外部样式表文件 |
| <meta/> | 定义网页原信息 |
<meta http-equiv="refresh" content="2;URL = https://www.cnblogs.com/yanjiayi098-001/"> <!--2秒过后跳到 https://www.cnblogs.com/yanjiayi098-001 网页--> <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <!--对网页并没有什么影响，就是给网页关键字,便于搜索引擎机器人查找信息和分类信息用的--> <meta name="description" content="老男孩教育Python学院"> <!--这个也没有什么影响，就是给网页一个描述,便于搜索引擎机器人查找信息和分类信息用的--> <meta http-equiv="content-Type" charset=UTF8"> <!--指定文档的编码类型--> <meta http-equiv="x-ua-compatible" content="IE = edge"> <!--告诉IE以最高级模式渲染文档-->
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签，写在这个标签内的东西就是一个段落</p> <h2>1号标题</h2> <h3>2号标题</h3> <h4>3号标题</h4> <h5>4号标题</h5> <h6>5号标题</h6> <h7>6号标题</h7> <br> <!--这是一个换行标签--> <hr> <!--这是一个水平线标签-->
<!--空格--> > <!--大于号(>)--> < <!--小于号(<)--> & <!--&符号--> ¥ <!--人民币(￥)符号--> © <!--版权符号--> ® <!--注册符号-->
div标签: <div> <!--块级标签，无意义，通过CSS样式为其赋予不同的表现--> </div> span标签: <span> <!--内联标签，无意义，通过CSS样式为其赋予不同的表现--> </span> **块级标签与内联标签的区别** 块级标签：另起一行开始渲染元素 内联标签：不需要另起一行 如果单独在网页中插入这两个元素，不会对页面产生任何的影响，他们是专门为定义CSS样式而生的
注意：
? 块级标签可以嵌套内联标签或者某些块级标签
? 内联标签不能嵌套块级标签
? ==p标签不能嵌套块级标签，也不能嵌套p标签==
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息"> <img src="https://goss.veer.com/creative/vcg/veer/800water/veer-132444248.jpg" alt="故宫" title="美丽的故宫" >
a标签又叫做超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序
我们就先拿另一个网页举例
href属性指定目标网页地址。该地址可以有几种类型： 绝对URL - 指向另一个站点（比如 href="http://www.jd.com） 相对URL - 指当前站点中确切的路径（href="index.htm"） 锚URL - 指向页面中的锚（href="#top"）
<a href="https://www.cnblogs.com/yanjiayi098-001/" target="_blank">点我会跳转哦！</a> <!--target="_blank"表示重新打开一个网页进行跳转--> <a href="https://www.cnblogs.com/yanjiayi098-001/" target="_self">点我会跳转哦！</a> <!--target="_self"表示就在当前网页进行跳转--> <a href="https://www.cnblogs.com/yanjiayi098-001/">点我会跳转哦！</a> <!--默认target="_self"--> <a href="#b1">点我回到加粗</a> <!--b1是id属性，#b1表示回到id属性为b1的这个位置，这个位置就是<b id = "b1">加粗</b> --> <a href="body内常用标签.html">点我转到这个网页哦！</a> <!--他会跳到 body内常用标签.html 网页-->
<ul type="disc"> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul>
type属性：
type="disc"(实心圆点，默认值)
type="circle"(空心圆圈)
type="square"(实心方块)
type="none"(无样式)
<ol type="1" start="3"> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ol>
type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
start属性：
start="3"只能写数字，表示从第3个开始
<dl> <dt>标题1</dt> <dd>内容</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
<table> <thead> <tr> <th>序号</th> <th>姓名</th> <th>爱好</th> </tr> </thead> <tr> <td>1</td> <td>yjy</td> <td>跳舞</td> </tr> <tr> <td>2</td> <td>wwb</td> <td>唱歌</td> </tr> </table> <!-- 看到 <table> 就说明接下来是一个表格 <thead>是表格的表头 <tr>表示一行，而在这一行中又有<th> <th>表示表头的内容，表示整个一列的属性，eg：姓名 同理<tr>中的<td>就表示表格内容，按照<th>的要求写就行了，eg：姓名就写人名 -->
属性：
border: 表格边框 eg：border="6"
cellpadding: 内边距 eg：cellpadding="8"
cellspacing: 外边距 eg：cellspacing="2"
width: 像素 百分比 eg：width="100%"
以上这些属性要在<table>中设置
rowspan: 单元格竖跨多少行（上下合并单元格） eg：rowspan="3"
colspan: 单元格横跨多少列（左右合并单元格） eg：colspan="2"
以上这些属性要在<td>中设置
| 标题 | h2 | h3 | h4 | h5 | h6 | h7 |
|---|---|---|---|---|---|---|
| 列表 | ul | ol | li | dl | dt | dd |
| 排版标签 | p | div | hr | center | pre | |
| 表格 | table | |||||
| 表单 | form |
| 字体 | b | i | sup | sub | u |
|---|---|---|---|---|---|
| 排版 | span | br | |||
| 超链接 | a | ||||
| 图片 | img |
补充
文本级标签：p、span、a、b、i、u、em。
容器级标签：div、h系列、li、dt、dd
以上就是“HTML常用的标签有哪些及如何使用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
