【三十八】Python全栈之路--HTML
2024-04-24 15:12:33
文章目录
- 1. vscode相关配置
- 2. html认识
- 2.1 html认识
- 2.2 html结构
- 2.3 html语法特征
- 3. 标签种类_列表
- 3.1 常见标签
- 3.2 标签种类
- 3.3 列表
- 3.4 超链接标签
- 3.5 a链接跳锚点
- 3.6 img图片标签
- 3.7 table表格标签
- 3.8 iframe子窗口
- 4. 音视频_表单
- 4.1 音视频标签
- 4.2 form标签
- 5. 小练习
1. vscode相关配置
w3c school 手册： https://www.w3school.com.cn/html/index.asp
插件安装：chineselive 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>
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 />字符实体:使用字符实体来表达实际的字符含义; 使用字符实体表达多个空格例子: 11111<br />< : < 小于号 > 大于号例子:5<d c>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 inputspan 和 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>
表格的方向属性：
<!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中的九宫格方向：
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全栈之路--django的orm
文章目录 1. orm_sqlite介绍与数据库同步指令流程 1.1 orm对象关系映射 1.2 sqlite数据库 1.3 更新表结构 2. django配置连接mysql 3. orm字段和参数 ...
- Python全栈之路系列之数字数据类型
上篇文章中我们简单的体验了Python语言基本概念与语法,那么在继续深入下去的过程中,不妨先学习几个常见的Python内置数据类型?这也是大部分Python教科书的学习目录,由浅至深,慢慢深入. Py ...
- Python全栈之路系列----之-----内置函数和匿名函数lamdba
引子 什么是内置函数? 内置函数就是python 提供给我们直接拿来就可以用的函数 内置函数--内置命名空间 只管调用 不管实现 总共68个 def func(): == #这是自己定义的函数 ...
- 【三十六】Python全栈之路--MySQL
文章目录 1. mysql_where子句_聚合函数 2. mysql_其他子句语法 3. mysql_子查询 4. exists关键字 5. 练习所需表数据 6. 小练习 1. mysql_wher ...
- 【三十九】Python全栈之路--CSS
文章目录 1. 表单框类型 2. 表单属性 3. css引入 4. 选择器 4.1 常用选择器 4.2 选择器的优先级 4.3 关系选择器 4.4 属性选择器 4.5 伪类选择器_颜色设置 4.6 伪 ...
- 【三十五】Python全栈之路--MySQL
文章目录 1. mysql约束 2. 外键_联合主键_唯一索引 3. 存储引擎_表关系 1. mysql约束 # ### char varchar (补充) char 字符长度 255个 varcha ...
- 【四十六】Python全栈之路--bootstrap
文章目录 1. bootstrap简单介绍_栅格_布局容器 1.1 bootstrap简单使用 1.2 布局容器 1.3 栅格单位 1.4 表单 2. bootstrao组件和插件简单使用 2.1 简 ...
- 【十二】Python全栈之路--推导式_生成器
文章目录 1. 推导式 2. 推导式练习 3. 集合_字典推导式 4. 生成器 4.1 生成器表达式 4.2 生成器函数 5. 小练习 1. 推导式 # ### 推导式 : 通过一行循环判断遍历出一些 ...
- 【二十四】Python全栈之路--装饰器
文章目录 1. 装饰器 2. 类中相关方法 3. 小练习 1. 装饰器 # ### 装饰器 : 在不改变原有代码的前提下,为原函数扩展新功能 """ @符号 装饰器的标识 ...
- 【二十六】Python全栈之路--网络编程基础知识
文章目录 1. 网络的概念 2. 交换机_路由器 3. 三次握手_四次挥手 1. 网络的概念 # ### 1.网络开发两大架构 早期数据交互的格式是没有网络的 两个文件之间的数据交互需要通过第三个文件 ...
最新文章
- OpenCV提取轮廓(去掉面积小的轮廓)
- 安卓（android）建立项目时失败，出现Android Manifest.xml file missing几种解决方法？...
- Android补间动画笔记
- VTK修炼之道80：VTK开发基础_智能指针与引用计数
- 消息队列遥测传输（MQTT）介绍
- yaf 重写index.php,php框架Yaf路由重写实例代码
- jquery中的ajax方法参数——$.ajax()方法详解
- Unicode 与 UTF-8 之间的转换
- 总结开发Silverlight 注意事项
- RPGViewer - 反馈页面
- ⚡我的三百块别人的五分钟⚡——debug技能必学
- Apache网页与安全优化（网页压缩、网页缓存、隐藏版本信息、网页图片防盗链）——理论+实验！超详细
- [从零开始学习FPGA编程-49]：视野篇 - 芯片是如何被设计出来的？
- 手机显示一帧的流程是如何实现？
- Firewalld防火墙IP伪装与端口转发
- OGG故障集锦（一）
- Linux远程操作(rcp/rsh)命令实战
- 易共享android工具下载,EasyShare app
- 解决Intellij IDEA 一直在indexing，清除缓存后重启无效，手动清除缓存
- IT软件技术人员的职位路线（从程序员到技术总监） - 部门管理经验谈(转)