Python-HTML

1、HTML

1.1、简介

HTML（超文本标记语言——HyperText Markup Language），它使用标签来定义文本的显示方式。简单来说，HTML就是一种文本文件，里面的内容超出一般文本文件表示，它是用来控制显示格式和对内容进行排版的。
1997年W3C发布HTML 4.0。
2014年发布HTML5 。

1.2、示例

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>magedu html</title>
    <link href="style.css" ref="stylesheet">
    <script src="jquery.min.js"></script>
    <style type="text/css">
.font-red {
color: red;
}
    </style>
</head>
<body>
<p>这是分段</p>
<h1 class="font-red">这是标题</h1>
<div><a href="http://www.test.com">这是链接</a></div>
<div id="logo" class="logo">
<img src="http://www.test.com/test.png">
    </div>
</body>
</html>
复制代码

2、标签Tag

2.1、简介

复制代码
<p>这是分段</p>
<h1>这是大标题</h1>

如上， <p> 中的p就是标签，且是开始标签， </p> 是结束标签。开始、结束标签和内容组成完整的元素。
<p> 标签，它的作用范围是下一个和它层次对应的结束标签 </p> 。

<a href="www.test.com" target="_blank">这是链接</a>
href和target是标签的属性。
<p /> 空元素可以在开始标签中关闭，也可以 <p></p> 。由于p标签是容器标签，在 <p></p> 中间可以插入其它标签。
在HTML中使用单独标签，例如 <br><hr> <img> 等。它们中就不能插入其它标签
标签名可以使用大小写，但是推荐使用小写。
标签会被解析成一个有层次的DOM树，不要出现标签交错的现象，这是错误的，但是浏览器有容错能
力，但是可能显示的格式就不对了。
复制代码

3、HTML文档结构

文档声明： <!DOCTYPE html> 声明文档类型，这是Html5的声明方式。早期的文档声明很长，规
定了HTML遵从的规范，能自动检查错误等
根标签：html标签是根标签
头部：head标签就是头部，一般不是用来显示
    内部可以写meta信息、title网页标题、script脚本、样式表等标签
    <meta charset="utf-8"> 定义网页编码格式为utf-8。浏览器会按照这个编码显示字符
正文：body标签才是浏览器显示的正文部分

4、常用标签

4.1、Link

常用来链接外部样式表文件。
<link href="style.css" ref="stylesheet">

4.2、style

业内样式表定义，放在 <head> 标签中
<style type="text/css">
    .font-red {
        color: red;
   }
</style>

4.3、链接

复制代码
<a href="http://www.test.com" target="_blank" onclick="alert('anchor')">这是链接</a>

href属性，指定链接或锚点
href="#test"，这是定义页内的锚点
href="http://www.magedu.com"，指定域名的超链接
href='test'，使用当前URL的资源路径，拼接上test
href='/test'，使用当前URL的站点根路径，拼接test
target属性，指定是否在本窗口中打开
_blank 就是指新窗口打开链接
_self 当前页面打开链接。
onclick是点击事件，等号后面往往写一个js函数或脚本执行。很多HTML标签都支持很多事件属性，常见有onclick、ondblclick、onkeydown、onkeyup、onkeypress、onmousedown、onmousemove、onmouseover、onsubmit、onchange等等。后面写的函数称作事件响应函数或事件回调函数。
默认情况下，超链接点击后会发起一个HTTP GET请求。
<a href="mailto:wayne@test.com">Send email to wayne</a>
复制代码

4.4、标题

<h1>~<h6> ，标题标签，默认h1字体最大，h6字体最小。

4.5、图片

<img src="http://www.test.com/35677.png" alt="test">
图片标签，src指定图片路径。注意，图片会发起一个HTTP GET请求。alt图片不能显示时，看到这属性的文本。
如果想让图片也有超链接，在其外部加上A标签。

4.6、图层

<div id="logo" class="logo"></div>

id属性，非常重要，标签的唯一标识。
class属性，非常重要，样式表定位并附加样式。目前在前端编程、爬虫中非常有用。
<div> 标签，目前该标签加上CSS，被广泛用于网页布局中。

4.7、列表

4.7.1、无序列表

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

4.7.2、有序列表

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

4.8、表格

HTML 表格的基本结构：
<table>…</table>：定义表格
<tr>…</tr>：定义表格的行
<th>…</th>：定义表格的标题列（文字加粗）
<td>…</td>：定义表格的列
不过th现在用的少了，表格表头是否字体加粗，都用css控制。所以表中有tr表示行，td表示格子。
复制代码
<table border="1">
    <tr>
        <th>1,1</th>
        <th>1,2</th>
    </tr>
    <tr>
        <td>2,1</td>
        <td>2,2</td>
    </tr>
    <tr>
        <td colspan="2">占2列</td>
    </tr>
</table>
复制代码

4.9、表单

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test html</title>
    <script src="jquery.min.js"></script>
    <style>
    td { padding: 5px}
    </style>
</head>
<body>
    <form action="" method="POST" enctype="application/x-www-formurlencoded">
        <table border="1" style="border-collapse: collapse">
            <tr>
                <td colspan="2">用户注册</td>
            </tr>
            <tr>
                <td>用户名</td>
                <td><input type="text" placeholder="用户名"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="password" id="password"></td>
            </tr>
 <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="gender" id="gender" checkedvalue="M">男
                    <input type="radio" name="gender" id="gender" value="F">女
                </td>
            </tr>
            <tr>
                <td>爱好</td>
                <td>
                    <input type="checkbox" name="interest" id="interest" value="music">音乐
                    <input type="checkbox" name="interest" id="interest" checked value="movie">电影
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="提交">
                    <input type="reset" value="重置">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
复制代码
复制代码
特别注意：表单控件如果要提交数据，必须使用name属性，否则不能提交到服务端。
form标签的重要属性
action，表单数据submit提交到哪里
method，提交的方法，常用POST。
enctype，对提交的数据编码
application/x-www-form-urlencoded，在发送前编码所有字符（默认）
空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值
multipart/form-data，不对字符编码。在使用包含文件上传控件的表单时，必须使用该值
text/plain，空格转换为 "+" 加号，但不对特殊字符编码

实验：
   通过修改method属性，查看不同方法提交数据的区别。
复制代码

 

posted @   小粉优化大师  阅读(17)  评论(0)  编辑  收藏  举报
相关博文：
· Python-CSS
· web-http协议【理论知识】
· Python网站页面开发HTML总结
· HTML基础
· HTML基础
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（1）
历史上的今天：
2020-08-17 Python Virtualenv的使用
点击右上角即可分享
微信分享提示