python学习笔记-前端-HTML（一）

weer-wmq

已于 2023-09-17 16:07:11 修改

阅读量1.2k

点赞数

分类专栏： Python前端文章标签： python

于 2022-04-21 13:12:31 首次发布

本文链接：https://blog.csdn.net/ITlearner007/article/details/124315785

版权

Python前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前戏

一、简介

HTML（超文本标记语言）是一种面向描述的用于开发web网页的一种语言。
HTML开发没有任何的逻辑，就是记的东西有点多。

二、注释

正所谓注释是代码之母，我们学习每一种语言都应该先学习其注释。
Python中对HTML的注释格式是，如下：

<!--单行注释-->
<!--多行注释
    多行注释
-->

ps:快捷键为ctrl + /

HTML

一、特性

html语言是基于HTTP协议下的语言，而HTTP协议具有如下四大特性：

基于请求响应
只有当你请求访问时，html才会做出反应
就好比癞蛤蟆，你戳一下，它动一下
基于TCP/IP作用于应用层之上的协议
就是要满足一定的网络通信规范，关于TCP/IP可参见TCP/IP协议
无状态
不保存用户的信息，就算你访问了一千次，http也待你如陌生人一样

ps:由于http是无状态的，所以有时为了记录用户状态，可以使用cookie、session、token等技术
短链接
就是你来一次我响应一次，之后我们之间就没有任何关系了

ps: websocket可以建立长链接，默认建立连接后不断开

二、html结构

首先新建一个html_study.html文件，观察初始格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

html结构可以分为三部分：

响应首行：用于标识HTTP协议版本、状态码、语言等内容
```
<!DOCTYPE html>
<html lang="en">
...
</html>
```
响应头：可以看成是一大堆键值对，用于书写给浏览器看的内容
```
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
```
响应体：用于写展示给用户看的内容
```
<body>
...
</body>
```

head内常用标签

title标签

title标签用于书写网页标题（在网页最上端显示的标签名）

    <title>my first html</title>

style标签

style标签用于在内部书写css代码

    <style>
        h1{color:red;}
    </style>

link标签

link标签用于引入外部css文件

    <link rel="stylesheet" href="outside.css">

script标签

script标签用于内部书写js代码或引入外部js文件

    <!--内部书写js代码-->
    <script>alert('access successfully')</script>
    <!--引入外部js文件：outside文件-->
    <script src="outside.js"></script>

meta标签

meta标签用于提供一些页面的元信息，包括一些描述和关键词
(了解)meta标签常用有两个属性：http-equiv和name

http-equiv:相当于html的文件头，用于向浏览器传一些信息或一些跳转操作，其属性值为content

    <!--显示文档编码类型-->
    <meta http-equiv="content-type" charset="UTF-8">
    <!--两秒后跳转到百度-->
    <meta http-equiv="refresh" content="2;URL=https://www.baidu.com">

name：用于向浏览器机器人提供一些描述网页的信息和分类词，其属性值表述在content中

    <meta name="keywords" content="python,itleaner007,study">
    <meta name="description" content="itlearner007的博客python study">

body内常用标签

基本标签

h1~h6表示一级到六级标题
b是文本加粗标签，i是文本斜体标签，p是段落标签
u是下划线标签，s是删除线标签
br是换行标签，hr是水平分割线标签

	<h1>this is the h1</h1>
    <h2>this is the h2</h2>
    <h3>this is the h3</h3>
    <h4>this is the h4</h4>
    <h5>this is the h5</h5>
    <h6>this is the h6</h6>
    <b>加粗</b>
    <p>this is a paragraph</p>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除线</s>
    <br>换行（转到下一行）
    <hr>加了一个分割线

列表标签

列表分为无序列表和有序列表以及带标题的列表

无序列表
ul标签里搭配li标签嵌套，type指定形状，如circle（默认）、square等

<ul type="square">
        <li>first</li>
        <li>second</li>
        <li>third</li>
        <li>forth</li>
 </ul>

结果如下：

有序列表
ol标签里搭配li标签嵌套，type指定数字类型（I，1，a，A等），start指定起始编号

<ol type="1" start="2">
        <li>第一步</li>
        <li>第二步</li>
        <li>第三步</li>
</ol>

3. 标题列表（了解）

    <dl>
        <dt>title 1</dt>
        <dd>content 1</dd>
        <dt>title 2</dt>
        <dd>content 2</dd>
    </dl>

表格标签

table标签用于绘制表格，分为thead和tbody。thead用于提示各列的属性，tbody用于显示表格内的内容。
table中可以加border属性，用于显示外边框（很丑，但后期可以美化），整数表示外边框厚度

<table border="1">
        <thead>
            <tr>
                <th>username</th> <!--th表示加粗文本-->
                <td>password</td> <!--td表示普通文本-->
                <td>hobby</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Bob</td>
                <td>123</td>
                <td>cook</td>
            </tr>
        </tbody>
    </table>

其它标签

见下篇文章

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <!--网页标题-->
    <title>my first html</title>
    <!--内部写css代码-->
    <style>
        h1{color:red;}
    </style>
    <!--引入外部css文件：outside文件-->
    <link rel="stylesheet" href="outside.css">
    <!--内部书写js代码-->
    <script>alert('access successfully')</script>
    <!--引入外部js文件：outside文件-->
    <script src="outside.js"></script>
    <!--显示文档编码类型-->
    <meta http-equiv="content-type" charset="UTF-8">
    <!--两秒后跳转到百度-->
<!--    <meta http-equiv="refresh" content="2;URL=https://www.baidu.com">  -->
    <meta name="keywords" content="python,itleaner007,study">
    <meta name="description" content="itlearner007的博客python study">
</head>
<body>
<!--基本标签-->
    <!--h1~h6级标题-->
    <h1>this is the h1</h1>
    <h2>this is the h2</h2>
    <h3>this is the h3</h3>
    <h4>this is the h4</h4>
    <h5>this is the h5</h5>
    <h6>this is the h6</h6>
    <p>this is a paragraph</p>
    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除线</s>
    <br>换行（转到下一行）
    <hr>加了一个分割线
<!--列表标签-->
    <!--无序标签-->
    <ul type="square">
        <li>first</li>
        <li>second</li>
        <li>third</li>
        <li>forth</li>
    </ul>
    <!--有序标签-->
    <ol type="1" start="2">
        <li>第一步</li>
        <li>第二步</li>
        <li>第三步</li>
    </ol>
    <!--标题列表-->
    <dl>
        <dt>title 1</dt>
        <dd>content 1</dd>
        <dt>title 2</dt>
        <dd>content 2</dd>
    </dl>
    <!--表格标签-->
    <table border="1">
        <thead>
            <tr>
                <th>username</th> <!--th表示加粗文本-->
                <td>password</td> <!--td表示普通文本-->
                <td>hobby</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Bob</td>
                <td>123</td>
                <td>cook</td>
            </tr>
            <tr>
                <td>John</td>
                <!-- colspan表示水平方向占2格，rowspan表示竖直方向占格 -->
                <td colspan="2">drink</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

weer-wmq

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
python学习笔记-前端-HTML（一）

目录前戏一、简介二、注释HTML一、特性二、html结构head内常用标签title标签style标签link标签script标签meta标签body内常用标签基本标签列表标签表格标签其它标签完整代码
复制链接

扫一扫