您好,欢迎来到网暖!

当前位置:网暖 » 站长资讯 » 建站基础 » 网络技术 » 文章详细 订阅RssFeed

python学习之web中的html

来源:网络整理 浏览:266次 时间:2020-08-11

Web概述
python学习之web中的html
web起源
python学习之web中的html
web特点
1.易导航和图形化界面
2.与平台无关
3.分布式结构
4.动态性
5.交互性

html 网页结构

HTML(Hyper Text Mark-up Language )即是
超文本标记语言, 通过使用标记标签来描述页面文档
结构和表现形式的一种语言,再由浏览器进行解析,
然后把结果展示在网页上。
•超文本指的是超链接
•标记指的是标签
1).HTML文件用编辑器打开显示的
是文本,可以用文 本的方式编辑.
2). HTML文件用浏览器打开,浏
览器会按照标签描述内容将文件渲
染成网页,显示的网页可以从一个
网页 链接跳转到另外一个网页。

python学习之web中的html

html文档规范与注释

xhtml制定了文档的编写规范,html5可部分遵守,也可全部遵守,看开发要求。
1、所有的标签必须小写
2、所有的属性必须用双引号括起来
3、所有标签必须闭合
4、img必须要加alt属性(对图片的描述)

html文档代码中可以插入注释,注释是对代码的说明和解释,注释的内容不会显示
在页面上,html代码中插入注释 的方法是:
<!-- 这是一段注释 -->

html标签

python学习之web中的html

第一个html标签
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>西部开源中心</title></head><body>    <h1 style="color: blueviolet">标题 </h1 >    <h2 style="color: blueviolet">标题 </h2 >    <h3 style="color: blueviolet">标题 </h3 >    <h4 style="color: blueviolet">标题 </h4 >    <h5 style="color: blueviolet">标题 </h5 >    <h6 style="color: blueviolet">标题 </h6 >    <!没有h7>    <h7 style="color: blueviolet">标题 </h7 ></body></html>
文本标签

python学习之web中的html

常用的文本标签
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><i>斜体</i><br/><em>斜体</em><br/><hr><b>加粗字体</b><strong>加粗字体</strong><cite>引用</cite>x<sub>1</sub> = pi*r<sup>2</sup>原价:<del>¥100</del>现价:<b style="color: red">¥10</b><br/><p>这种东西只有在并发不高的项目,管理系统中用。<p>如果是面向用户的高并发应用,都不要使用。触发器和存储过程本身难以开发和维护,不能高效移植。触发器完全可以用事务替代。存储过程可以用后端脚本替代。</body></html>
换行标签

python学习之web中的html

文本标签

python学习之web中的html

列表标签

python学习之web中的html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><h1>无序列表:四大名著</h1><ul>    <li>西游记</li>    <li>三国演义</li>    <li>水浒传</li>    <li>红楼梦</li></ul><h1>有序标签:四大名著</h1><ol type="a">    <li>西游记</li>    <li>三国演义</li>    <li>水浒传</li>    <li>红楼梦</li></ol><h1>自定义列表:</h1><dl>    <dt>四大名著</dt>    <dd>西游记</dd>    <dd>三国演艺</dd>    <dd>水浒传</dd>    <dd>红楼梦</dd>    <dt>前端开发</dt>    <dd>html</dd>    <dd>css</dd>    <dd>js</dd></dl></body></html>
div与span标签

python学习之web中的html
python学习之web中的html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><! 块级元素:一个元素占一整行><div style="font-size: 30px;border:gray 1px solid;background: red">    div 标签</div><! 行内元素,一个元素站得位置取决标签内容><div style="font-size: 30px;border:gray 1px solid"><span>    span 标签</span></body></html>
图片标签img

<img> 标签定义 HTML 页面中的图像。有两个必需的属性:src 和 alt。
title:文字提示属性
属性:src: 图片名及url地址
alt: 图片加载失败时的提示信息
width/height: 图片宽度/高度
<a href=" ">...</a> 超级链接标签
属性:
href: 必须,指的是链接跳转地址;
target: 表示链接的打开方式。
_blank 新窗口 ,
_self 本窗口(默认)
title:文字提示属性

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><! src:指定的时间图片的位置,可以通过绝对路径和相对路径表示,但大多数情况使用相对路径   alt:当图片不能被加载出来时,显示的文字信息 ><img src="./img/baidu.gif" alt="百度图片" width="500px"height="500px"></body></html>
超链接标签

锚点链接:

  1. 定义一个锚点:
    <a id="a1"></a> 百度一下 <a name="a1"></a>
  2. 使用锚点:
    <a href="#a1">跳到a1处</a>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><h1>文字标签</h1><a href="http://www.baidu.com">百度一下</a><br><a href="http://www.baidu.com" target="_blank" title="text"> 百度一下</a><h1>图片搜索</h1><br/><hr><a href="http://www/baidu.com">    <img src="baidu.gif" alt="baidu" title="baidu"></a></body></html>
锚点的实现
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><h1>锚点</h1><a href="#a1">跳到a处</a><a href="#a2">跳到a2处</a><h2 id="a1">标题一</h2><p>一、存储过程优点存储过程是一组预先创建并用指定的名称存储在数据库服务器上的 SQL 语句,将使用比较频繁或者比较复杂的操作,预先用 SQL 语句写好并存储起来,以后当需要数据库提供相同的服务时,只需再次执行该存储过程。1.具有更好的性能存储过程是预编译的,只在创建时进行编译,以后每次执行存储过程都不需再重新编译,而一般 SQL 语句每执行一次就编译一次,因此使用存储过程可以提高数据库执行速度。2.功能实现更加灵活存储过程中可以应用条件判断和游标等语句,有很强的灵活性,可以直接调用数据库的一些内置函数,完成复杂的判断和较复杂的运算。3.减少网络传输复杂的业务逻辑需要多条 SQL 语句,当客户机和服务器之间的操作很多时,将产生大量的网络传输。如果将这些操作放在一个存储过程中,那么客户机和服务器之间的网络传输就会减少,降低了网络负载。————————————————版权声明:本文为CSDN博主「徊忆羽菲」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。原文链接:https://blog.csdn.net/guo_qiangqiang/article/details/89950862</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><h2 id="a2">标题二</h2><p>一、存储过程优点存储过程是一组预先创建并用指定的名称存储在数据库服务器上的 SQL 语句,将使用比较频繁或者比较复杂的操作,预先用 SQL 语句写好并存储起来,以后当需要数据库提供相同的服务时,只需再次执行该存储过程。1.具有更好的性能存储过程是预编译的,只在创建时进行编译,以后每次执行存储过程都不需再重新编译,而一般 SQL 语句每执行一次就编译一次,因此使用存储过程可以提高数据库执行速度。2.功能实现更加灵活</p></body></html>
表格标签

python学习之web中的html

标签:
•表格标签:table
•行标签:tr
•单元格(表示列的概念):td
•表头:th :加粗并且居中
•表格标题:caption
python学习之web中的html
•标签合并:
行合并:rowspan
列合并:colspan
•标签常用属性:
border:边框
width:宽度
height:高度
algin:对齐方式
center,left,right
python学习之web中的html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><table border="1px"align="center" width="500px" style="text-align: center;  background-color:lavender;">    <caption>表格标题</caption>    <tr>        <td>1-1</td>        <td>1-2</td>        <td>1-3</td>    </tr>    <tr>        <td>1-1</td>        <td>1-2</td>        <td>1-3</td>    </tr>    <tr>        <td>1-1</td>        <td>1-2</td>        <td>1-3</td>    </tr></table></body></html>
from表格标签

常用属性:
• action属性:提交的目标地址(URL)
• method属性:提交方式:get(默认)和post
get方式:
URL地址栏可见
长度受限制
相对不安全.
post方式:
URL地址不可见
长度不受限制
相对安全.

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><hr/><form action="sucess.html" method="get">    <!--创建三行两列的表格-->    <table width="20%" align="center" >        <tr>            <td colspan="2" style="text-align: center"><h3>用户登录</h3></td>        </tr>        <tr>            <td style="text-align: right">用户名</td>            <td><input type="text"></td>        </tr>        <tr>            <td style="text-align: right">密码</td>            <td><input type="password"></td>        </tr>        <tr>            <td colspan="2" style="text-align: center"> <input type="submit" value="登录"></td>        </tr>    </table></form></body></html>
表单项标签

<input> 表单项标签input定义输入字段,用户可在其中输入数据。
在 HTML 5 中,type 属性有很多新的值。
python学习之web中的html

下拉列表标签

<select>...</select> 标签创建下拉列表。
• name属性:定义名称,用于存储下拉值的
• size:定义菜单中可见项目的数目,html5不支持
• disabled 当该属性为 true 时,会禁用该菜单。
• multiple 多选
<option>... </option> 下拉选择项标签,用于嵌入到<select>标签中使用的;
value属性:下拉项的值
selected属性:默认下拉指定项.

文本域标签

<textarea>...</textarea> 多行的文本输入区域
• name :定义名称,用于存储文本区域中的值。
• cols :规定文本区内可见的列数。
• rows :规定文本区内可见的行数。
• disabled: 是否禁用
• readonly: 只读

按钮标签

<button>...</button> 标签定义按钮。
<fieldset> --fieldset 元素可将表单内的相关元素分组。
python学习之web中的html

html内嵌框架

<iframe>标签会创建包含另外一个html文件的内联框架(即行内框架),
src属性来定义另一个html文件的引用地址
frameborder属性定义边框,
scrolling属性定义是否有滚动条,
<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>

内嵌框架与a标签配合使用

a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中,代码如下:
python学习之web中的html

推荐站点

  • 腾讯腾讯

    腾讯网(www.QQ.com)是中国浏览量最大的中文门户网站,是腾讯公司推出的集新闻信息、互动社区、娱乐产品和基础服务为一体的大型综合门户网站。腾讯网服务于全球华人用户,致力成为最具传播力和互动性,权威、主流、时尚的互联网媒体平台。通过强大的实时新闻和全面深入的信息资讯服务,为中国数以亿计的互联网用户提供富有创意的网上新生活。

    www.qq.com
  • 搜狐搜狐

    搜狐网是全球最大的中文门户网站,为用户提供24小时不间断的最新资讯,及搜索、邮件等网络服务。内容包括全球热点事件、突发新闻、时事评论、热播影视剧、体育赛事、行业动态、生活服务信息,以及论坛、博客、微博、我的搜狐等互动空间。

    www.sohu.com
  • 网易网易

    网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。

    www.163.com
  • 新浪新浪

    新浪网为全球用户24小时提供全面及时的中文资讯,内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等,设有新闻、体育、娱乐、财经、科技、房产、汽车等30多个内容频道,同时开设博客、视频、论坛等自由互动交流空间。

    www.sina.com.cn
  • 百度一下百度一下

    百度一下,你就知道

    www.baidu.com