Python（三十四）HTML简介和HTML标签
2021-12-04 本文已影响0人
Lonelyroots
1. HTML介绍
1.1. 超文本标记语言
超文本标记语言（HyperTextMarkedLanguage），是一种标识性的语言。它包括一系列标记标签，通过这些标记标签可以将网络上的文档格式统一，使分散的internet资源连接为一个逻辑整体。
1.2. 标签
HTML标签也可以称为元素，不同的标签有不同的功能解释，用来表示不同的功能。每个标签都是由一对尖括号包裹的单词组成。一般的标签是成对出现的，一般称第一个标签是开始标签，第二个是结束标签。开始和结束标签也称为开放标签和闭合标签。
1.3. W3C
HTML由W3C制定的，W3C（World Wide Web Consortium）是一个非盈利组织,在中国的北京航空航天大学设有分部。
2. 常见标签
2.1. 常见分类
根元素、文档元数据、分区根元素
内容分区、文本分区
内联文本语义、图片和多媒体
内嵌内容、脚本
编辑标识、表格内容
表单、交互元素
Web组件
2.2. 标签及使用
2.2.1. 标签
1.由一对尖括号包裹单词构成，如：
<body>
2.标签不区分大小写，推荐小写。
2.2.2. 嵌套
标签可以嵌套，但不能交叉嵌套
正确用法如：<body><table></table></body>
错误用法如：<body><table></body></table>
2.2.3. 使用规则
1.开始标签-标签体-结束标签，如：
<a>百度</a>
2.自闭合标签直接使用，如：换行：<br>；水平线：<hr>；输入框：<input>；图片：<img>。
2.2.4. 标签属性
- 通常为键值对形式出现，如：
color="red"；- 属性只能出现在开始标签和自闭合标签内；
- 属性名字全部小写，属性值必须用单引号或双引号包裹；
- 如果属性名和属性值完全一样，直接写属性名即可。
<!DOCTYPE html>
<html lang="en"> <!--en即English，ch即中文-->
<head>
<meta charset="UTF-8">
<title>标签特点</title>
</head>
<body>
你好，我是陈宏，今年20
<!--
标签特点：
1、都是由尖括号包裹的
2、大部分标签都是成双成对出现
3、第一个标签是开始标签（开放标签），第二个标签就是结束标签（闭合标签）
4、单独出现的就是自闭合标签
-->
</body>
</html>
运行结果
2.3. 标签介绍
块级（块状）标签和内联（行内）标签
2.3.1. 块级标签
<p>/<h1>/<table>/<ol>/<ul>/<form>/<div>
2.3.2. 内联（行内）标签
<a>/<input/>/<img/>/<sub>/<sup>/<textarea>/<span>
2.3.3. 块级元素的特点
- 总在新行上开始；
- 高度、行高以及外边距和内边距都可以控制；
- 宽度缺省，则是它容器的100%；
- 它可以容纳内联元素和其它块元素。
2.3.4. 内联元素的特点
- 和其它元素在一行上；
- 高，行高以及外边距和内边距不可改变；
- 宽度就是其文字或图片宽度，不可改变；
- 内联元素只能容纳文本或其它内联元素。
2.3.5. 内联元素注意
- 设置宽度width无效；
- 设置高度height无效；
- 设置margin只有左右margin有效，上下无效；
- 设置padding只有左右padding有效，上下则无效，注意元素范围是增大了，但是对元素周围的内容毫无影响。
<!DOCTYPE html>
<html lang="en"> <!--en即English，ch即中文-->
<head>
<meta charset="UTF-8">
<title>块状标签和行内标签的特点</title>
<!--p是块状标签，span是行内标签-->
</head>
<body>
<p style="height: 100px">我是段落标签一</p>
<p>我是段落标签二</p>
<!--
块状标签特点：
1、会自动换行，每一个块状标签都独占一行；
2、宽度跟浏览器有关；
3、从上往下排序。
4、可以设置宽高
-->
<span style="height: 500px">我是文本标签一</span>
<span>我是文本标签二</span>
<!--
行内标签特点：
1、不会自动换行；
2、宽度只与自己的内容有关
3、从左往右排序
4、宽高设置无效
-->
</body>
</html>
运行结果
2.4. 块级标签介绍：
- 标题标签：h1到h6 h1只能存在一个；
- 段落标签：<p></p>用于文章段落；
- 列表标签：分为有序列表、无序列表以及自定义列表；
- div标签：分割一块区域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的块状标签</title>
</head>
<body>
<!--标题标签：h1到h6 h1只能存在一个-->
<h1>我是一级标签</h1>
<h2>我是二级标签</h2>
<h3>我是三级标签</h3>
<h4>我是四级标签</h4>
<h5>我是五级标签</h5>
<h6>我是六级标签</h6>
<!--段落标签:<p></p>-->
<p>我是段落标签，和h4差不多大小</p>
<!--ol是有序列表-->
<!--快捷生成列表ol>li*3,tab键-->
<ol type="a" start="3">
<li>bd</li>
<li>ch</li>
<li>mr</li>
</ol>
<!--ul是无序列表-->
<!--快捷生成列表ul>li*3,tab键-->
<ul type="square"> <!--默认圆形，改成正方形-->
<li>bd</li>
<li>ch</li>
<li>mr</li>
</ul>
<!--自定义列表，以水果fruits和蔬菜vegetables进行分类-->
<dl>
<dt>fruits</dt>
<dd>apple</dd>
<dd>honey peach</dd>
<dd>pineapple</dd>
<dt>vegetables</dt>
<dd>carrot</dd>
<dd>cabbage</dd>
<dd>broccoli</dd>
</dl>
<!--分割一块区域: div标签-->
<div>
<!--换行标签<br>-->
<span>我是分割线1</span>
<br> <!--br是换行标签-->
<span>我是分割线2</span>
</div>
</body>
</html>
运行结果
2.5. 行内标签介绍
- 图片标签：用于在网页中插入图片；
- 斜体/粗体标签：用于网页中突出字体；
- 超链接标签：用于链接其它资源，可以用来跳转或者锚点；
- 文字标签：span标签是纯文本，配合CSS则可以展示不同效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的行内标签</title>
</head>
<body>
<a href="#bottom" name="top">点击我去最下面</a>
<!--文本标签：span-->
<span>我是文本标签</span>
<span>我是文本标签</span>
<span>我是文本标签</span>
<!--换行标签：br-->
<br>
<!--斜体标签：i-->
<i>我会让你的文字倾斜</i>
<br>
<!--加粗标签：b-->
<b>我会让你的文字加粗</b>
<b><i>我会让你的文字既倾斜又加粗</i></b>
<br>
<!--
图片标签：img:
src:推荐用第2种
1、网页地址
2、从此html文件出发，相对路径
3、绝对路径，从磁盘出发，找到文件
alt:
当src属性无值时，显示alt属性的值
-->
<!--<img src="" alt="抱歉，图片溜走了">-->
<!--网页地址，绝对路径-->
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640918883&t=eabea030f11705f8306df246cfc25bad" alt="">
<!--从此html文件出发，相对路径-->
<!--<img src="imgs/1.jpg" alt="抱歉，图片溜走了">-->
<!--从磁盘出发，绝对路径-->
<!--<img src="F:\需更新：----学习记录-----\U1 2021.9.26\未更新-Python码趣16期\03、web前端核心技术\01、HTML介绍\imgs\1.jpg" alt="抱歉，图片溜走了">-->
<!--
超链接标签：a，可做锚点
href：
放地址
target:
可以设置跳转到新的网页
-->
<a href="https://www.baidu.com/">点击我去百度</a>
<a href="./imgs/1.jpg" target="_blank">点击我去看上面的那张图</a>
<a href="#top" name="bottom">点击我去最上面</a>
</body>
</html>
2.6. HTML转义
<!DOCTYPE html>
<html lang="en"> <!--en即English，ch即中文-->
<head>
<meta charset="UTF-8">
<title>HTML转义</title>
</head>
<body>
<span><h1>我想展示h1标签和 空格</h1></span>
</body>
</html>
运行结果
3. 表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--table表格-->
<table border="1" cellspacing="0">
<caption>花名册</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr>
<td>吴某</td>
<td align="center">男</td>
<td>33</td>
<td>中国</td>
</tr>
<tr>
<td>陈某</td>
<td rowspan="2" align="center">男</td> <!--行合并-->
<td>32</td>
<td>巴基斯坦</td>
</tr>
<tr>
<td>余某</td>
<!-- <td>男</td>-->
<td colspan="2">28 俄罗斯</td>
<!-- <td>俄罗斯</td>-->
</tr>
</table>
</body>
</html>
运行结果
4. 表单
介绍：表单是搜集用户数据信息的各种表单元素的集合区域。
作用：用于收取用户数据并向后台发送，前后交互的方式之一。
应用：表单常应用于登录注册，搜索，文件上传等。
<!DOCTYPE html>
<html lang="en"> <!--en即English，ch即中文-->
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--
form表单：
属性：
action：提交时候的地址，默认使用当前页面
method：提交时候的方法，有get和post两种方法，默认使用get，登录注册用post，get不安全，会显示
entype：设置编码格式
-->
<form action="" method="post">
<!--
input属性：
type：选框类型；
name：表单与后台交互时最重要的一个属性，要求input标签都带上表单提交项的键，与id不同，name属性是和服务器通信时使用的名字，而id属性是浏览
器端使用的名字，该属性主要方便客户编程而在css和js中使用；
value：表单提交项的值，input的值，单选多选下拉框必须设置value属性，这样后台才能获得你选中的到底是哪个或哪几个选项；
placeholder：提高用户体验度；
readonly：只读；
disabled：禁用。
-->
<!--
input常用type属性值：
text：文本框
password：密码框
radio：单选框
hidden：隐藏域
checkbox：复选框
file：文件选择
submit：提交
reset：重置
-->
姓名：<input type="text" placeholder="请输入姓名" name="user">
<br>
密码：<input type="password" placeholder="请输入密码" name="password"> <!--密码框type的值为password-->
<br>
手机号：<input type="text" placeholder="请输入电话号码" name="telephone">
<br>
<!--
select下拉框：
size：表示下拉框，显示多少个，默认为一个；
option：下拉选项，下拉框的基本标签，有多少个option就有多少个下拉选项；
selected：表示选中某个下拉选项；
name：下拉框的名字，表示下拉框向后台提交数据的时候，所传的名字。
-->
地区：
<select name="area" id="">
<option value="">中国</option>
<option value="">俄罗斯</option>
<option value="">巴基斯坦</option>
</select>
<br>
性别：<!--radio单选框，用户选择的需写value值-->
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<input type="radio" name="sex" value="-1">保密
<br>
爱好：<!--checkbox复选框-->
<input type="checkbox" name="hobby" value="run">跑步
<input type="checkbox" name="hobby" value="eat">吃饭
<input type="checkbox" name="hobby" value="game">玩游戏
<br>
<input type="submit" value="注册">
<input type="reset" value="重置">
</form>
</body>
</html>
文章到这里就结束了！希望大家能多多支持Python（系列）！六个月带大家学会Python，私聊我，可以问关于本文章的问题！以后每天都会发布新的文章，喜欢的点点关注！一个陪伴你学习Python的新青年！不管多忙都会更新下去，一起加油！
Editor：Lonelyroots
