Python 高级：06 HTML

最新推荐文章于 2023-06-14 19:29:49 发布

马尔盖云

最新推荐文章于 2023-06-14 19:29:49 发布

阅读量165

点赞数

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

本文链接：https://blog.csdn.net/maergaiyun/article/details/111851663

版权

Python 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

一、HTML 介绍

1. 网页效果图
在这里插入图片描述
2. html 的定义

HTML 的全称为：HyperText Mark-up Language，指的是超文本标记语言。标记就是标签，<标签名称></标签名称>，例如：<html></html>、<h1></h1>等，标签大多是成对出现的。
超文本有两层含义：
（1）网页中的图片、视频、音频等内容（超越文本限制）；
（2）在网页中跳转到另一个网页，与世界各地主机的网页链接（超链接文本）。

3. html 的作用

html 是用来开发网页的，它是开发网页的语言。

二、HTML 的基本结构

1. 结构代码

<!--文档声明，用来指定页面所使用的 html 版本，这里声明是一个 html5 的文档-->
<!DOCTYPE html>
<!--告诉浏览器，整个网页从<html>开始，到</html>结束-->
<html>
	<!--定义文档的头部，负责对网页设置标题、编码格式以及引入 css 和 js 文件的-->
	<head>
		<meta charset="UTF-8">
		<title>网页标题</title>
	</head>
	<!--编写网页上显示的内容-->
	<body>
		网页显示内容
	</body>
</html>

2. HTML 基本结构
在这里插入图片描述
3. 第一个 HTML 网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    第一个html
</body>
</html>

三、常用的 HTML 标签

<!-- html基本骨架生成：！+tab/enter -->
<!DOCTYPE html>
<!-- lang="en"（一般不需要指定）表示网页是英文网页，如果是英文网页，谷歌浏览器可能会转成中文进行翻译 -->
<html lang="en">
<head>
    <!-- 网页的编码格式 -->
    <meta charset="UTF-8">
    <!-- 在移动端浏览网页，网页不缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 在ie浏览器浏览网页时，使用ie最高版本 -->
    <meta http-equiv="X-UA-Compatible" content="ie-edge">
    <title>Document</title>
</head>
<body>
    <!-- 成对标签 -->
    <h1>一级标题</h1>
    <h6>六级标题</h6>
    <div>div标签</div>
    <p>段落标签</p>
    <!-- 单标签 -->
    <br>
    <img src="imgs/logo.png" alt="图片加载不成功会显示">
    <hr>
    <!-- 给标签设置其他属性 -->
    <a href="http://www.baidu.com">百度</a>
    <!-- 标签不允许交替嵌套，但html要求不严格 -->
    <!-- 标签可以使用大写，但推荐使用小写 -->
    <P>段落2</P>
</body>
</html>

四、资源路径

绝对路径和相对路径部分略！

五、列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
    </ul>

    <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
    </ol>
</body>
</html>

六、表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- border-collapse: collapse; 合并边框 -->
    <table style="border-collapse: collapse;">
        <tr>
            <th style="border: 1px black solid;">姓名</th>
            <th style="border: 1px black solid;">年龄</th>
        </tr>
        <tr>
            <td style="border: 1px black solid;">lb</td>
            <td style="border: 1px black solid;">45</td>
        </tr>
    </table>
</body>
</html>

七、表单标签和表单元素标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <!-- label标签标识用户信息 -->
        <p>
            <label>用户名：</label>
            <input type="text">
        </p>
        <p>
            <label>密码：</label>
            <input type="password">
        </p>
        <p>
            <label>性别：</label>
            <input type="radio">男
            <input type="radio">女
        </p>
        <p>
            <label>爱好：</label>
            <input type="checkbox">吃喝
            <input type="checkbox">学习
        </p>
        <p>
            <label>图片：</label>
            <input type="file">
        </p>
        <p>
            <label>个人描述：</label>
            <textarea></textarea>
        </p>
        <p>
            <label>籍贯</label>
            <select>
                <option>北</option>
                <option>上</option>
                <option>深</option>
            </select>
        </p>
        <p>
            <!-- 提交按钮 -->
            <input type="submit" value="提交">
            <!-- 重置按钮 -->
            <input type="reset" value="重置">
            <!-- 普通按钮 -->
            <input type="button" value="普通">
        </p>
    </form>
</body>
</html>

八、表单提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 默认是GET方式，请求方式不区分大小写 -->
    <!-- 
        get 以地址栏传参
        post 以请求体传参
     -->
    <form action="https://www.baidu.com" method="GET">
        <!-- label标签标识用户信息 -->
        <p>
            <label>用户名：</label>
            <input type="text" name="username">
        </p>
        <p>
            <label>密码：</label>
            <input type="password" name="passwd">
        </p>
        <p>
            <label>性别：</label>
            <input type="radio" name="gender" value="男">男
            <input type="radio" name="gender" value="女">女
        </p>
        <p>
            <label>爱好：</label>
            <input type="checkbox" name="hobby" value="吃喝">吃喝
            <input type="checkbox" name="hobby" value="学习">学习
        </p>
        <p>
            <label>图片：</label>
            <input type="file" name="file">
        </p>
        <p>
            <label>个人描述：</label>
            <textarea name="descript"></textarea>
        </p>
        <p>
            <label>籍贯</label>
            <select name="position">
                <option value="北">北</option>
                <option value="上">上</option>
                <option value="深">深</option>
            </select>
        </p>
        <p>
            <!-- 提交按钮 -->
            <input type="submit" value="提交">
            <!-- 重置按钮 -->
            <input type="reset" value="重置">
            <!-- 普通按钮 -->
            <input type="button" value="普通">
        </p>
    </form>
</body>
</html>

马尔盖云

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Python 高级：06 HTML

一、HTTL 介绍1. 网页效果图2. html 的定义HTML 的全称为：HyperText Mark-up Language，指的是超文本标记语言。标记就是标签，<标签名称></标签名称>，例如：<html></html>、<h1></h1>等，标签大多是成对出现的。超文本有两层含义：（1）网页中的图片、视频、音频等内容（超越文本限制）；（2）在网页中跳转到另一个网页，与世界各地主机的网页链接（超链接文本）。3. h
复制链接

扫一扫

专栏目录