当前位置: 首页 > news >正文

Python网站页面开发HTML总结

Python网站页面开发HTML总结

一、HTML基础语法

1.HTML是什么?

●HTML是HyperText Mark-up Language的首字母简写,即超文本标记语言。
●HTML不是一种编程语言,而是一种标记语言。
●超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成。
●用这种语言制作的文件保存的是一个文本文件,文件的扩展名为.html或者.htm
●“html文档也叫Web页面,其实就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它。
●如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。

2.HTML基本结构

●HTML是由:标签和内容构成。
●HTML标签(标记)的语法是由<>括起来。
● HTML标签有两种:双标签:<标签名>....</标签名>和单标签:<标签名/>
●HTML标签中还可以添加属性:<标签名属性名1=“值1”属性名2=“值2”属性名n=“值n”>...</标签名>
●HTML标签规范∶标签名小写、属性使用双引号、标签要闭合。规范不遵守浏览器不会报错,会尽量解析,大不了不显示效果。
< ! DOCTYPE html><!--头部,是html的类型,此处代表的是采用html5版本,浏览器可以识别解析-->
<html lang="en"><head><meta charset="UTF-8"><title>网页标题</title><!--此处可以写各种页头属性设置、CSS样式和Javascript脚本等...--></ head>
<body>网页显示内容
</body>
</ html>

3.HTML注释

html代码文档中可以插入注释,注释是对代码的说明和解释

4.HTML中head头部信息设置

●设置网页编码:<meta charset="utf-8" />
●关键字:<meta name="Keywords" content="关键字"/>
●描述:<meta name="Description" content="简介、描述"/>
●网页标题:<title>本网页标题</title>
●导入CSS文件:<link type="text/css" rel="stylesheet" href="**.css"/>
●CSS代码:<style type="text/css">嵌入css样式代码</style>
●JS文件或代码:<script >...</script>

二、HTML常用标签介绍

1.文本标签

<hn>..</hn>其中n为1--6的值。标题标签(加粗、独立行)<i>...</i>斜体●<em>...</em>强调斜体●<b>./b>加粗●<strong ...</strong>强调加粗●<cite></cite>作品的标题(引用)<sub>...</sub>下标●<sup>...</sup>上标●<del>...</del>删除线

2.格式化标签

<br/>换行●<p>.</p>换段●<hr />水平分割线●列表:<ul>...</ul>无序列表
●<ol>..</ol>有序列表其中type类型值:Aali 1 start属性表示起始值
●<li>...</li>列表项
●<dl>..</dl>自定义列表. <dt>...</dt>自定义列表头.<dd>...</dd>自定义列表内容
●<div>...</div>常用于组合块级元素,以便通过CSS来对这些元素进行格式化
●<span...</span>常用于包含的文本,您可以使用CSS对它定义样式,或者使用JavaScript对它进行操作。

3.图片标签

<img/>在网页中插入一张图片
●属性:●src:图片名及url地址●alt:图片加载失败时的提示信息.title:文字提示属性●width:图片宽度● height:图片高度●border:边框线粗细

4.超级链接标签

<a href=“”>...</a>超级链接标签,属性如下:
●href:必须,指的是链接跳转地址
●target:表示链接的打开方式:●_blank 新窗口●_parent父窗口●_self本窗口(默认)●_top顶级窗口● framename窗口名● title:文字提示属性(详情)●锚点链接:●定义一个锚点:<a id="a1"></a>以前使用的是<a name="a1"></a>●使用锚点:<a href="#a1"> 跳到a1处</a>

5.表格标签(用来显示数据)

<table>..</table>表格标签:属性: border(表格边框的粗细大小)、 width、cellspacing(单元格之间的间距). cellpadding(单元格里的内容到单元格边框的距离)●<caption>...</caption>表格标题
●<tr>...</tr>行标签
● <th>.../th>列头标签(内容会加粗,居中显示)
●<td>...</td>列标签:跨行属性: rowspan 跨列属性:colspan (合并单元格的作用)
●<thead>...</thead>表头
● <tbody>...</tbody>表体●<tfoot>...</tfoot>表尾注意:表格里的内容必须放到<th><hd>标签中,否则会被挤出表格

6.表单标签(用来接收数据)

<form>...</form>表单标签  <form action=""(填写目标地址,填完表单后会跳转该地址) method="post/get"(post是指在跳转到页面后在网址栏那个地方不显示表单的内容,get是指在跳转到页面后在网址栏那个地方显示表单的内容)><input />表单项标签input定义输入字段,用户可在其中输入数据。● <select>...</select>标签创建下拉列表。● <textarea>..</textarea>多行的文本输入区域●<button>...</button>标签定义按钮。●<fieldset>--</fieldset>元素可将表单内的相关元素分组。●<legend></legend> 标签为<fieldest><figure>以及<details>元素定义标题。●<datalist> html5标签--<datalist>  标签定义可选数据的列表。●<optgroup> html5标签--<optgroup>标签定义选项组。

7.行内框架标签

<iframe>...</iframe>行内框架
属性:src:规定在iframe中显示的文档的URLname:规定iframe的名称height:规定 iframe的高度。width:定义iframe的宽度。frameborder:规定是否显示框架周围的边框。
●例如:<iframe src="1.html" name="myframe" width="700" height="500"></iframe>

8.多媒体标签

<audio></audio>音频标签
● <video></video>视频标签
●播放Flash的标签
<embed src="./images/haowan.swf" width="300" height="300"/>

相关文章:

Python网站页面开发HTML总结

Python网站页面开发HTML总结 一、HTML基础语法 1.HTML是什么&#xff1f; ●HTML是HyperText Mark-up Language的首字母简写&#xff0c;即超文本标记语言。 ●HTML不是一种编程语言&#xff0c;而是一种标记语言。 ●超文本指的是超链接&#xff0c;标记指的是标签&#xf…...

[个人笔记] vCenter设置时区和NTP同步

VMware虚拟化 - 运维篇 第三章 vCenter设置时区和NTP同步 VMware虚拟化 - 运维篇系列文章回顾vCenter设置时区和NTP同步&#xff08;附加&#xff09;ESXi设置alias参考链接 系列文章回顾 第一章 vCenter给虚机添加RDM磁盘 第二章 vCenter回收活跃虚拟机的剩余可用空间 vCente…...

(原创)Flutter与Native通信的方式:EventChannel和BasicMessageChannel

前言 上一篇博客主要介绍了MethodChannel的使用方式 Flutter与Native通信的方式&#xff1a;MethodChannel 这篇博客接着讲另外两种通信方式 EventChannel和BasicMessageChannel EventChannel用于从native向flutter发送通知事件&#xff0c;例如flutter通过其监听Android的重…...

【解决】el-tree报Cannot read property ‘getCheckedKeys‘ of undefined

如果你报错 Cannot read property getCheckedKeys of undefined 或者 Cannot read property getCheckedNodes of undefined 只要在你的在<el-tree>上加个这个&#xff0c;就可以了 ref"tree"...

车载软件架构 —— 信息安全与基础软件

车载软件架构 —— 信息安全与基础软件 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无需有人关注你。你必须承认自己的价值,你不能站在他人的角度来反对自己。人生在世,最怕…...

C\C++内存管理

目录 1.C/C内存分布2.C语言中动态内存管理方式3.C中动态内存管理3.1new/delete内置类型3.2new和delete操作自定义类型 4.operator new与operator delete函数4.2重载operator new与operator delete&#xff08;了解&#xff09; 5.new和delete的实现原理5.1内置类型5.2 自定义类…...

会议室预约系统-检验是否被预约核心SQL

会议室预约时&#xff0c;判断能否被预约&#xff0c;即查询是否已经有预约记录&#xff0c;存在不能被预约。 s,e&#xff1b;表示已经预约的开始结束时间&#xff1b; ns,ne&#xff0c;表示表单提交的预约时间&#xff1b; 只需要(ns,ne)与(s,e)区间没有交集&#xff0c;可…...

C++11类模板

类模板是用来生成类的蓝图&#xff0c;与函数模板的不同之处是&#xff0c;编译器不能为类模板推断模板参数类型。 所以我们在使用类的时候要带上<>并且指定类型如下 vector<int> v; // 需要带上<int> 哦定义类模板 如下&#xff0c;和函数模板差不多都是…...

SpiderFlow爬虫平台(爬虫学习)

申明 作为自己学习的记录,方面后期查阅 官网 SpiderFlow官网 简介 spider-flow 是一个爬虫平台&#xff0c;以图形化方式定义爬虫流程&#xff0c;无需代码即可实现一个爬虫 是使用springboot开发的项目,后端代码直接运行即可使用...

Rime输入法配置

Rime输入法在我电脑上&#xff0c;删了装&#xff0c;装了删&#xff0c;已经反复好几次了。就像是Vim&#xff0c;用它的时候&#xff0c;感觉各种配置太麻烦&#xff0c;想要的功能不知道怎么实现。转用其它编辑器的时候&#xff0c;却又念着它的快捷键和可定制性&#xff0c…...

R语言学习笔记--列表list、数据框

列表 1-列表 列表可以包含不同类型的对象&#xff0c;也就是说&#xff0c;列表不是将某些具体的值组织起来&#xff0c;而是组织R对象。列表将数据组织在一个一维集合中。 列表非常好用&#xff0c;因为它可以装任何类型的对象&#xff0c;不要求数据之间是同质的。 创建列…...

电磁波定义、特性以及信道相关知识

文章目录 前言一、电磁波的定义、特性、波谱1、电磁波的特性2、电磁波谱的划分及用途 二、地球大气层的结构三、电磁波的传播方式1、地波&#xff08;ground-wave&#xff09;2、天波&#xff08;sky-wave&#xff09;3、视线传播&#xff08;line-of-sight&#xff09;①、相关…...

TCP KeepAlive与HTTP Keep-Alive

TCP KeepAlive与HTTP Keep-Alive TCP KeepAliveHTTP Keep-AliveTCP服务器怎么检测客户端断开连接 TCP KeepAlive TCP连接建立之后&#xff0c;如果应用程序或者上层协议一直不发送数据&#xff0c;或者隔很长时间才发送一次数据&#xff0c;那么TCP需要判断是应用程序掉线了还…...

SkyWalking链路追踪-Agent (代理人)

基础概念&#xff1a; SkyWalking链路追踪代理&#xff08;SkyWalking Tracing Agent&#xff09;是一种用于收集和传输链路追踪数据的工具。它与应用程序一起部署&#xff0c;并通过自动或手动方式来收集关于应用程序中的请求路径和操作的信息。该代理将收集到的数据发送到Sky…...

多线程案例 | 单例模式、阻塞队列、定时器、线程池

多线程案例 1、案例一&#xff1a;线程安全的单例模式 单例模式 单例模式是设计模式的一种 什么是设计模式&#xff1f; 设计模式好比象棋中的 “棋谱”&#xff0c;红方当头炮&#xff0c;黑方马来跳&#xff0c;针对红方的一些走法&#xff0c;黑方应招的时候有一些固定的…...

C++文件操作

1.写文件 //文件操作 #include<fstream> int main() {//写文件//路径 -- 此路径没有就生成给文件 string filePath R"(E:\项目\test.txt)";//打开文件 ios::app在后面追加内容 啥也不跟是覆盖写入ofstream fout(filePath, ios::app);//检查是否打开成功if (…...

overleaf(latex) 公式过大,需要调小字体,同时公式编号字体不变的方法

提问&#xff1a;用latex编辑的双列排版的论文中&#xff0c;如果一个包含矩阵的公式中&#xff0c;矩阵过大&#xff0c;导致超出列的范围&#xff0c;一般该如何调整呢&#xff1f; 回答&#xff1a;如果你在LaTeX中的双列排版中遇到了一个矩阵过大而导致超出列范围的问题&a…...

flink采用thrift读取tablets一个天坑

原先的配置 [INFO] StarRocksSourceBeReader [open Scan params.mem_limit 8589934592 B] [INFO] StarRocksSourceBeReader [open Scan params.query-timeout-s 600 s] [INFO] StarRocksSourceBeReader [open Scan params.keep-alive-min 100 min] [INFO] StarRocksSourceBeRea…...

Android 面试题 异常捕获 四

&#x1f525; 为什么要捕获奔溃 &#x1f525; 因为在开发或者测试阶段不能做到100%的问题解决&#xff0c;因为 app 上线之后会有你想不到的各种各样的使用的场景&#xff0c;而发生问题时用户只能描述一下怎么怎么怎么就出现了问题。也许反馈到开发这边可以100%复现那就可以…...

自动化测试:让软件测试更高效更愉快!

谈谈那些实习测试工程师应该掌握的基础知识&#xff08;一&#xff09;_什么时候才能变强的博客-CSDN博客https://blog.csdn.net/qq_17496235/article/details/131839453谈谈那些实习测试工程师应该掌握的基础知识&#xff08;二&#xff09;_什么时候才能变强的博客-CSDN博客h…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...