Python全栈之学习HTML

作者:熬夜泡枸杞 时间:2023-12-05 14:56:55 

1. vscode相关配置

w3c school 手册: https://www.w3school.com.cn/html/index.asp

插件安装:
chinese
live server(html以服务端的形式进行显示,而不是以文件的形式进行显示)
icon (文件有图标)
快捷操作:
ctrl + k   /  ctrl + t  选择主题 light+
文件 -> 首选项 -> 设置 -> -> 字体 ->
font-weight setting.json文件中配置
vscode  1.开发前段写代码速度比较快 2.免费
选择live server插件 选择齿轮 扩展设置

2. html认识

2.1 html认识

<!--
html :  网页的骨架
css  :  网页的样式
js/jq:  网页的动作
-->
<!DOCTYPE html>  声明文档的类型是html 超文本标记语言
<html>
   <head>
       此处写入web网页的配置信息
   </head>
   <body>
       此处写入网页的主体内容
       <font color="yellow" size=5> 学习html </font>
   </body>
</html>

Python全栈之学习HTML

2.2 html结构

<!DOCTYPE html>
<html>
   <head>
       <!-- 设置编码集 -->
       <meta charset="utf-8" />
       <!-- 设置网站标题 -->
       <title>这是前端内容</title>
       <!-- 设置网站图标 -->
       <!-- http://www.bitbug.net/  制作小图标的网址-->
       <link href="https://g.csdnimg.cn/static/logo/favicon.ico" rel="shortcut icon" />
       <!-- 设置搜索引擎抓取页面的关键字 -->
       <meta name="keywords" content="html再线学习 html课外学习 html线下学习" />
       <!-- 设置搜索引擎抓取页面的描述信息 -->
       <meta name="description" content="html再线学习 css在线学习 js再线学习 前端再线学习" />
       <!-- 设置几秒之后页面跳转 -->
       <!-- <meta http-equiv="refresh" content="3;url=http://www.baidu.com" /> -->
   </head>
   <body>
           <!-- 一个及多个空白符,都会被理解成一个空白符 -->
           1111       3333     343434                   234234
           <!-- 换行标签 -->
           <br />
           5<d   c>10
           <!-- 分割线标签 -->
           <hr />
           字符实体:使用字符实体来表达实际的字符含义;
               &nbsp;  使用字符实体表达多个空格
               例子:
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;11111
               <br />
               <  : &lt; 小于号  &gt; 大于号
               例子:
                   5&lt;d     c&gt;10
           <!-- 格式化预览标签 原型化输出所有内容 <pre> -->
           <pre>
           333
          +444
          ------
           777
           </pre>
   </body>
</html>

2.3 html语法特征

1.内容不区分大小写
2.标签结构分为单闭合、双闭合标签(标签成对显示)
3.一个及多个空白符,都会被理解成一个空白符

3. 标签种类_列表

3.1 常见标签

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8"/>
       <title> 常见标签 </title>
   </head>
   <body>
       <h1>一级标签</h1>
       <h2>二级标签</h2>
       <h3> * 标签</h3>
       <h4>四级标签</h4>
       <h5>五级标签</h5>
       <h6>六级标签</h6>
       <hr />
       <!-- 下角标 sub -->
       h20 => h<sub>2</sub>0
       <br />
       co2 => co<sub>2</sub>
       <br />
       <!-- 上角标 sup -->
       x2 = 100  => x<sup>2</sup> = 100
       <!-- p 是段落标签 -->
       <p>这是第一个段落</p>
       <p>这是第二个段落</p>
       <hr />
       <!-- (了解)逻辑强调 带有语义话的含义 [w3c标准] 推荐-->
       <strong>川普是我的偶像</strong>
       <em>我的爱人</em>
       <!-- (了解)物理强调 带有语义话的含义 [非w3c标准] -->
       <b>川普是我的偶像</b>
       <i>我的爱人</i>
   </body>
</html>

3.2 标签种类

<!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>
   <!--
       标签的种类:
           (1) 行内元素标签: 不能独占一行,不能设置宽和高,横向排列
               例子: span a
           (2) 块状元素标签: 独占一行,可以设置宽和高,纵向排列
               例子: div h1~h6 p
           (3) 行内块状标签: 不能独占一行,能设置宽和高,横向排列
               例子: button img input
   span 和 div 都属于无语义化标签,用来布局页面,划分页面结构
   -->
   <!-- 行内元素 -->
   <span style="width:200px;height:200px;background-color:yellowgreen;">我爱你
       <span>奥斯托夫罗斯基</span>  
   </span>  111
   <!-- 块状元素 -->
   <div style="width:100%;height:200px;background-color:seagreen;">我是网页的头部</div>
   <div style="width:100%;height:200px;background-color: skyblue;">我是网页的身体</div>
   <div style="width:200px;height:200px;background-color: tan;">我是网页的脚部</div>
   <!-- 行内块状标签 -->
   <button style="width:100px;height:20px;background-color: salmon;">按我1</button>
   <button style="width:100px;height:20px;background-color:sandybrown;">按我2</button>
   <button style="width:100px;height:20px;background-color:seagreen">按我3</button>
</body>
</html>

3.3 列表

<!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>
   <!-- 无序列表 *** -->
   <!-- square 方块 circle 空心圆 -->
   <ul type="square">
       <li>姜子牙</li>
       <li>我和我的家乡</li>
       <li>八百</li>
       <li>唐人街探案3</li>
   </ul>
   <!-- 有序列表 -->
   <!-- type="i" 指定罗马数字 -->
   <ol start=10 type="i">
       <li>姜子牙</li>
       <li>我和我的家乡</li>
       <li>八百</li>
       <li>唐人街探案3</li>
   </ol>
   <!-- 定义列表 -->
   <dl>
       <!-- dt定义标题 -->
       <dt>女生曾经说过的谎言:</dt>
       <!-- dd定义内容 -->
       <dd>不要</dd>
       <dd>你真坏</dd>
       <dd>你是个好人</dd>
       <dd>我给你介绍个漂亮的小姑娘</dd>
   </dl>
</body>
</html>

3.4 超链接标签

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>a 超链接标签</title>
</head>
<body>
   <!--
   GET   - 从服务端请求数据 (可以携带参数来获取数据,参数会暴露在地址栏上,传参大小受浏览器限制,控制在2k~8k范围内,显式传值)
   POST  - 向服务端发送数据 (发送数据时候不限制发送数据的大小,隐式传值)
   -->
   <!-- target="_self" 代表本页面跳转 target="_blank" 新窗口跳转 -->
   <a href="./2.html" target="_self">点我1</a>
   <a href="http://www.baidu.com" target="_blank">点我2</a>
   <a href="http://www.baidu.com/s?wd=王文" target="_blank">点我3</a>
   <a href="./2.html?a=1&b=2&c=3&d=4" target="_blank">点我4</a> <!--地址栏传值 -> get显式传值-->
   <!-- 刷新页面 -->
   <a href="">点5</a>
   <!-- 不刷新页面 -->
   <a href="#">点6</a>
   <!-- 把数据扔到a连接中的href属性中 , 默认下载操作 -->
   <a href="VSCodeUserSetup-x64-1.51.0.exe">点7</a>
</body>
</html>

3.5 a链接跳锚点

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title> a链接 跳锚点 </title>
</head>
<body>
   <ul>
       <li><a href="#a1">第一章</a></li>
       <li><a href="#a2">第二章</a></li>
       <li><a href="#a3">第三章</a></li>
   </ul>
   <a id="a1">第一章内容</a>
   <p style="width:500px;height:1000px;background-color: silver;">孙悟空三打白骨精</p>
   <a id="a2">第二章内容</a>
   <p style="width:500px;height:1000px;background-color:skyblue;">孙悟空怒锤红孩儿</p>
   <a id="a3">第三章内容</a>
   <p style="width:500px;height:1000px;background-color:tan;">孙悟空大闹凌霄殿</p>
   <a href="#">回到顶部</a>
</body>
</html>

3.6 img图片标签

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>img 图片标签</title>
</head>
<body>
   <!-- img 单独调整width或者height可以随着比例进行缩放,如果同时指定有可能失真;  title属性设置图片的提示功能 -->
   <a href="https://baike.baidu.com/item/%E5%91%A8%E6%98%9F%E9%A9%B0/169917?fr=aladdin">
       <img src="zhouxingchi1.jpg" width="200px" height="200px;" title="周星驰" />
   </a>
   <img src="zhouxingchi1.jpg" width="200px" height="200px;" />
</body>
</html>

3.7 table表格标签

表格标签:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title> table 表格标签</title>
</head>
<body>
   <!--
   ### part1    
   table 表格  border 表框 width 宽度设置
   tr 表示一行
   th 表示标题加粗
   td 表示一个单元格
   -->
   <table border=1 width="1000px;">
       <thead style="background-color: tan;">
           <tr>
               <th>姓名</th>
               <th>年龄</th>
               <th>薪水</th>
               <th>部门</th>
           </tr>
       </thead>
       <tbody style="background-color: teal;">
           <tr>
               <td>王文</td>
               <td>18</td>
               <td>10万</td>
               <td>python</td>
           </tr>
           <tr>
               <td>王伟</td>
               <td>20</td>
               <td>11美元</td>
               <td>开发部门</td>
           </tr>
           <tr>
               <td>王致和</td>
               <td>22</td>
               <td>100万</td>
               <td>臭豆腐研发部门</td>
           </tr>
       </tbody>
       <tfoot style="background-color: thistle;">
           <tr>
               <td>lianxi1</td>
               <td>lianxi2</td>
               <td>lianxi3</td>
               <td>lianxi4</td>
           </tr>
       </tfoot>
   </table>
   <hr  style="width:20px;height:100px;"/>
   <!--
       colspan  横向合并
       rowspan 纵向合并
   -->
   <table border=1 width="1000px;">
       <thead style="background-color: tan;">
           <tr>
               <th>姓名</th>
               <th>年龄</th>
               <th>薪水</th>
               <th>部门</th>
           </tr>
       </thead>
       <tbody style="background-color: teal;">
       <tr>
           <td colspan=2>123</td>
           <td>10万</td>
           <td rowspan="3">销售</td>
       </tr>
       <tr>
           <td>王伟</td>
           <td>20</td>
           <td>11美元</td>
       </tr>
       <tr>
           <td>王致和</td>
           <td>22</td>
           <td>100万</td>
       </tr>
       </tbody>
       <tfoot style="background-color: thistle;">
           <tr>
               <td  colspan=4>lianxi1</td>
           </tr>
       </tfoot>
   </table>
</body>
</html>

Python全栈之学习HTML

Python全栈之学习HTML

表格的方向属性:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>table 表格的方向属性</title>
</head>
<body>
   <!--
   水平方向设置 align : left center right  
   垂直方向设置 valign: top middle bottom
   cellspacing td 与td 之间的间距
   cellpadding td 与其中内容之间的间距
   -->
   <table border=1 width="1000px;" height="200px;" cellspacing = "10" cellpadding="10">
       <tr align="center" valign="top">
           <td>王致和</td>
           <td>蓝色</td>
           <td>踢球</td>
           <td>江西</td>
       </tr>
       <tr align="center" valign="middle"">
           <td>王致和</td>
           <td>蓝色</td>
           <td>踢球</td>
           <td>江西</td>
       </tr>
       <tr align="center" valign="bottom">
           <td>王致和</td>
           <td>蓝色</td>
           <td>踢球</td>
           <td>江西</td>
       </tr>

</table>
</body>
</html>

table中的九宫格方向:

Python全栈之学习HTML

3.8 iframe子窗口

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title> iframe 子窗口</title>
</head>
<body>
   <iframe src="" name="isme" width="1000px" height="200px;"></iframe>
   <hr />
   <a href="http://www.baidu.com" target="isme">点我跳转百度</a>
   <a href="3.html" target="isme">点我跳转3.html</a>
   <a href="4.html" target="isme">点我跳转4.html</a>
</body>
</html>

4. 音视频_表单

4.1 音视频标签

<!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>
   <!-- https://www.w3school.com.cn/html/index.asp  w3c school 手册 -->
   <video src="ceshi.mp4" controls = "controls" style="width:100px;">
       抱歉~! 您的浏览器不支持,该扔了
   </video>
   <audio src="潮汐-她的城市.mp3" controls = "controls">
       抱歉~! 您的浏览器不支持,该扔了
   </audio>
</body>
</html>

4.2 form标签

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>form表单<</title>
</head>
<body>
   <!-- action 表示提交的数据地址
   method 表示数据以什么样的形式提交
       get    显式获取数据(参数在地址栏上,参数大小在2k~8k左右)
       post   隐式提交数据(参数不在地址栏,参数大小没有限制)
   input 是行内块状元素
   type  指定input的类型
   name  指定input的名字
   value 指定input的默认值
   -->
   <form action="" method="">
       手机号:<input type="text" name="phone" value="王文"  />
       <br />
       密码:  <input type="password" name="pwd" value="李四" style="width:200px;height:50px;" />
       <br />      
       <input type="submit" value="提交" />
   </form>
</body>
</html>

5. 小练习

Python全栈之学习HTML

Python全栈之学习HTML

来源:https://blog.csdn.net/weixin_46818279/article/details/122205886

标签:Python,全栈,HTML
0
投稿

猜你喜欢

  • 详解Golang编程中的常量与变量

    2024-04-30 10:04:33
  • 费明红:什么样的404页面才是正确的?

    2009-05-21 17:47:00
  • GO的基础知识扫盲注意事项

    2023-07-12 21:30:26
  • vueJs函数toRaw markRaw使用对比详解

    2024-04-09 10:46:23
  • python调用pyaudio使用麦克风录制wav声音文件的教程

    2023-12-16 13:32:15
  • python中numpy数组的csv文件写入与读取

    2021-11-26 06:18:20
  • SQL Server分析服务性能优化浅析

    2010-01-16 13:30:00
  • selenium中常见的表单元素操作方法总结

    2021-06-15 23:54:32
  • SQLServer2008存储过程实现数据插入与更新

    2024-01-19 06:01:21
  • vue filters的使用详解

    2024-06-05 09:17:14
  • 基于Python预测一下世界杯最后赢家

    2021-01-30 16:16:48
  • 隐藏并修改文件的最后修改时间的asp-webshell

    2009-02-28 13:31:00
  • python将YUV420P文件转PNG图片格式的两种方法

    2021-09-04 10:06:10
  • 驯服不听话的网页表格

    2007-12-03 11:36:00
  • Js 按照MVC模式制作自定义控件

    2008-10-12 12:11:00
  • Python fire模块(最简化命令行生成工具)的使用教程详解

    2022-06-10 15:25:00
  • Vue用v-for给循环标签自身属性添加属性值的方法

    2024-04-10 10:30:56
  • python中wx将图标显示在右下角的脚本代码

    2022-10-27 02:26:53
  • 详细总结Python类的多继承知识

    2021-10-02 03:15:02
  • 浅谈ROC曲线的最佳阈值如何选取

    2021-10-07 07:49:29
  • asp之家 网络编程 m.aspxhome.com