python笔记(web前端 HTML)

最新推荐文章于 2025-06-04 10:28:15 发布

原创最新推荐文章于 2025-06-04 10:28:15 发布 · 897 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#python

前端专栏收录该内容

12 篇文章

订阅专栏

本文深入讲解HTML的基础概念，包括标签分类、文档结构及语义化，重点介绍表单元素与属性，如input系列、textarea、select及其应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、几个基本概念：
HTML ------> 内容（标签）
CSS ------> 外观（选择器，属性）
javaScript --------> 给HTML网页增加动态功能

Web开发的本质：
1、浏览器给服务端发了一个消息
2、服务端拿到消息
3、服务端返回消息
4、浏览器展示页面

在这里插入图片描述
----------客户端和服务端消息的格式是约定好的
----------http协议：浏览器和服务器之间约定好的消息格式===>“put|xxxx.avi|1024”
----------WEB本质：服务器，浏览器，HTML文件

二、HTML （学标签）
<标签名>—>标记语言（HTML,XML）
标签分类：双标签，单标签
例：

 <h1></h1>     双标签
   <img>   单标签
   <a></a>   双标签

1、HTML文件结构
在这里插入图片描述
1).规范：

<!DOCTYPE html>                            #声明标签
<html lang="zh-CN">                        #语言设置
    <head>
        <meta charset="UTF-8">             #编码格式,定义网页原信息
        <title>我的第一个HTNL网页</title>>   #定义网页标题
    </head>
    <body>                                 #主体

    </body>>

</html>

2).注释：

<!--xxxxxx-->

3).标签分类：
—块级标签：h1~h6、div、p、hr
----------默认占浏览器宽度
----------内设置长和宽
—内联标签（行内标签）：a、img、u、s、i、b、span
----------根据内容决定长度
----------不能设置长度

3).语义化的HTML
4).标签的嵌套规则
-----(1）.行内标签不能嵌套块级标签
-----(2）.P标签不能嵌套块级标签

三、标签的基本功能

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!--<meta name="keywords" content="">&lt;!&ndash;关键字&ndash;&gt;-->
    <!--<meta name="description" content="">&lt;!&ndash;网页输入时跳出显示的内容&ndash;&gt;-->
    <!--<meta http-equiv="refresh" content="2;URL=https//www.baidu.com">&lt;!&ndash;隔几秒跳转&ndash;&gt;-->
    <!--<meta http-equiv="x-ua-compatible" content="IE=edge">&lt;!&ndash;以最高浏览器渲染&ndash;&gt;-->
    <title>我的第一个HTNL网页</title>>
    <!--<style>-->
    <!--a{-->
    <!--color:red;-->
    <!--}-->
    <!--</style>-->
    <!--<script>-->
    <!--</script>-->

</head>
<body>
<!--字体大小-->
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
hello
<!--src:图片地址 alt：若加载不出来提示的文字 title：光标放在上面提示文字-->
<img id="i0" src="http://img0.imgtn.bdimg.com/it/u=1528782847,1470047375&fm=26&gp=0.jpg" alt="xixi" title="佩奇">
<!--href：要跳转的网页,target=:控制是在当前还是新的网页打开-->
<a href="http://www.sogo.com" target="_blank">sogo</a>
<!--href：要跳转的标签-->
<a href="#a2">a跳转a2</a>
<div style="height:100px;background-color:red"></div>
<a href="" id="a2">哈哈哈</a>
<!--加粗-->
<b>嘻嘻</b>
<!--斜体-->
<i>嘻嘻</i>
<!--下滑线-->
<u>嘻嘻</u>
<!--删除-->
<s>嘻嘻</s>
<h1>鹅</h1>
<!--文章段落  <br/>:换行-->
<p>鹅鹅鹅，<br/>下个锅，哈哈哈</p>
<hr><!--水平线-->
<p>鹅鹅鹅，下个锅，哈哈哈</p>
<p>鹅鹅鹅，下个锅，哈哈哈</p>
&lt;<!--显示<>-->
&copy;<!--显示©表示版权-->
&nbsp;<!--显示空格-->
&gt;<!--显示>-->
&lt;<!--显示<-->
&amp;<!--显示&-->
&yen;<!--显示¥-->
&reg;<!--显示注册®-->
<!--无序列表   type:改变前面的格式-->
<ul type="">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<!--有序列表  type:设置序号格式  start:开始序号-->
<ol type="I" start="1">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>
<dl>
    <dt>标题</dt>
    <dd>内容</dd>
</dl>
<!--border 给表格加边框 cellpadding:内边框 cellspacing:外边框-->
<table border="1" cellpadding="2" cellspacing="2">
    <thead>
    <!--行-->
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>爱好</th>
    </tr>
    </thead>
    <tbody>
    <!--列-->
    <tr>
        <td>小龙</td>
        <td>12</td>
        <td>学习</td>
    </tr>
    <tr>
        <td>优秀</td>
        <td>11</td>
        <td>看学习</td>
    </tr>
    </tbody>
    <!--text:输入内容  submit：提交文本 action：告诉数据往哪提交  method:提交方法  enctype:上传文件等其他，选择不同的
         autocomplete: "off"(关闭自动补全)  "on"(打开自动补全)-->
    <form action="http://127.0.0.1:8000/upload/" method="get" enctype="multipart/form-data" autocomplete="on">
        <p>用户名：
            <!--readonly : 只读，不能改 value：默认的内容 placeholder:默认框内有内容，但是不影响输入
            disabled:禁止输入-->
            <input name="name" type="text" readonly value="xiao xiao">
            <input name="name" type="text" readonly placeholder="xiao xiao">
            <input name="name" type="text" readonly placeholder="xiao xiao" disabled>
            <!--<input name="name" type="text" readonly value="xiao xiao">-->
        </p>
        <p>
            <!--使用label标签更加规范-->
            <label for="i4">用户名：</label>
            <input id="i4" name="name" type="text"  value="xiao xiao">
        </p>
        <p>密码：
            <input name="password" type="password">
        </p>
        <p>性别：
        <!--radio：选择按钮  checked:默认选项 有label后点文字都可以选中-->
        <label for="g1">男</label>
        <input id="g1" name="gender" type="radio" value="1">
        <label>女
        <input name="gender" type="radio" value="0">
        </label>
        <input checked name="gender" type="radio" value="0">保密
        </p>
        <p>爱好：
        <!--checkbox：多选按钮-->
        <input name="hobby" type="checkbox" value="volloball">羽毛球
        <input name="hobby" type="checkbox" value="basketball">篮球
        <input name="hobby" type="checkbox" value="pingpang">皮乓球
        </p>
        <p>城市：
        <!--下拉选取  multiple:支持多选-->
        <select name="from1" id="i1" multiple>
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="xa">西安</option>
            <option value="hz">杭州</option>
        </select>
        <select name="from2" id="i2">
            <!--子选取-->
            <optgroup label="西安">
                <!--selected:默认选中这项-->
                <option value="ca" selected>长安区</option>
                <option value="bq">灞桥区</option>
                <option value="yt">雁塔区</option>
                <option value="cx">城西</option>
            </optgroup>
        </select>
        </p>
        <!--一个大的编辑框-->
        <p><textarea name="info" id="i3" cols="10" rows="10">
        </textarea></p>
        <p>头像：
            <!--选择系统文件-->
            <input name="wenjian" type="file">
        </p>
        <p>生日：<input name="birthday" type="date"></p>
        <!--邮箱格式提交-->
        <p>邮箱：<input name="email" type="email"></p>
        <!--隐藏数据，埋下伏笔-->
        <p>邮箱：<input name="hidden" type="hidden"></p>
        <!--submit：提交按钮-->
        <p><input type="submit" value="走你"></p>
        <!--button：只是按钮-->
        <p><input type="button" value="button"></p>
        <!--reset：数据重置-->
        <p><input type="reset" value="重置"></p>
    </form>
</table>
</body>
</html>

标签属性：
在这里插入图片描述

四、form表单相关内容
前后端有数据交互的时候用form表单
form表单提交数据的几个注意事项：

所有获取用户输入标签都必须放在form表单里面
action控制着往哪提交
input\select\textarea 都需要有name属性
提交按钮 <input type="submit">

五、小总结：
1、input系列：

     value:设置默认值
     readonly：只读
     placeholder 设置占位内容
     text
     password
     radio  单选框
     checbox 多选框
     date    日期
     datetime  时间
     file  文件
     button  普通按钮，多用JS给它绑定
     rest 重置
     submit 提交

2、textarea 大段文本
3、select 下拉菜单
4、optgroup 分组的下拉框