Python: WEB开发-HTML

TAGS: Python

如果IDE是VSCode，可以安装Live Server插件，方便调试。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>这是分段</p>
    <h1>这是标题</h1>
    <div><a href="http://www.baidu.com">这是链接</a></div>
    <div id="logo" class="logo">
        <img src="http://www.baidu.com/wp-content/uploads/2018/12/2018122312035677.png">
    </div>
</body>
</html>

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

1997年W3C发布HTML 4.0。
2014年发布HTML5

HTML文档结构

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

常用标签

Link

常用来链接外部样式表文件。

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/link

<link href="style.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/static/font.css"/>

style

业内样式表定义，放在<head>标签中

<style type="text/css">
  .font-red {
    color: red
  }
</style>

<body>标签中

<p class="font-red">这是分段</p>

链接

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

href属性，指定链接或锚点

href="#test" ，锚点
href="https://www.baidu.com"
href='test'，使用当前URL的资源路径，拼接上test
href='/test'，使用当前URL的站点根路径，拼接test

target属性，指定是否在本窗口中打开。

_blank就是指新窗口打开链接
_self 当前页面打开连接

onclick是点击事件，等号后面往往写一个js函数或脚本执行。

默认情况下，超链接点击后会发起一个 HTTP GET请求。

<a href="mailto:[email protected]">向 nowhere 发邮件</a>

标题

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

<br> 换行
<hr> 分割线
  空格

图片

<img src="http://www.baidu.com/wp-content/uploads/2018/12/2018122312035677.png" alt='123'>

图片标签，src指定图片路径注意，图片会发起一个HTTP GET请求。alt图片不能显示时，看到这个属性的文本。

如果想让图片也有超链接，在其外部加个<a>标签。

图层

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

id属性，非常重要，标签的唯一标识。

class属性，非常重要，样式表定位并附加样式。目前在前端编程、爬虫中非常有用。

<div> 标签，目前该标签加上CSS，被广泛用于网页布局中。

列表

无序列表

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

有序列表

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

表格

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>

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td {
            padding: 5px
        }
    </style>
    <script>
        function testClick() {
            var ele = document.getElementById('username');
            console.log(ele);
            console.log(ele.value);
        }
    </script>
</head>

<body>
    表单组件元素的name属性是给服务器端用的，id可以认为客户端(js)。
    有name属性的表单组件会把其数据提交到服务器端。
    请求报文分为两部分：Header、Body。
    POST方法是将表单数据放在HTTP请求报文的BODY部分，形式如下：
    <div>username=u1&pwd=123456&gender=M&interest=music&interest=movie&descript=11</div>
    GET方法不推荐，因为表单数据放在HTTP请求报文的URL后，?k1=v1&k2=v2&k3=v3
    <div>http://127.0.0.1:5500/index.html?username=u1&pwd=123456&gender=M&interest=music&interest=movie&descript=11
    </div>
    <div>
        <form action="" method="post">
            <table border="1">
                <tr>
                    <td colspan="2" class='title'>用户注册</td>
                </tr>
                <tr>
                    <td>用户名</td>
                    <td><input id="username" name="username" type="text"
                        placeholder="请输入用户名" value="u1" maxlength="10"
                        onchange="testClick()">
                        <!-- <button onclick="testClick()">点击测试</button> -->
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input id="pwd" name="pwd" type="password"
                        value="123456" maxlength="5"></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <input type="radio" name="gender" id="gender"
                        checked value="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>修改描述</td>
                    <td><textarea name="descript" id="" cols="30"
                        rows="10"></textarea></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="提交">
                        <input type="reset" value="重置">
                </tr>
            </table>
        </form>
    </div>
</body>
</html>

特别注意：表单控件如果要提交数据，必须使用name属性，否则不能提交到服务端

form标签的重要属性

action，表单数据submit提交到哪里
method，提交的方法，常用POST
enctype，对提交的数据编码
- application/x-www-form-urlencoded，在发送前编码所有字符（默认）
  - 空格转换为 “+” 加号，特殊符号转换为 ASCII HEX 值
- multipart/form-data，不对字符编码。在使用包含文件上传控件的表单时，必须使用该值
- text/plain，空格转换为 “+” 加号，但不对特殊字符编码

form标签方法有 get post

get 我要这个资源你给我，get 只有 head
post 提交数据,返回数据 ,常用于表单