使用Python进行网站页面开发——HTML

news2025/1/20 10:59:31

目录

一、HTML基础语法

1.HTML是什么?

2.HTML基本结构

3.HTML注释

二、HTML常用标签介绍

1.文本标签

2.格式化标签

3.图片标签

4.超级链接标签

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

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

7.行内框架标签

8.多媒体标签


一、HTML基础语法

1.HTML是什么?

HTMLHyperText 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代码文档中可以插入注释,注释是对代码的说明和解释

<!--这就是唯一的一种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中显示的文档的URL

        name:规定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"/>

一些具体用法,感兴趣的可以看看。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408787.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ACM模式下JavaScript(js)的输入输出 V8 Node

OJ在线编程常见输入输出练习场 ACM模式下分V8和node.js node.jsV8内置基本模块&#xff0c;相当于java中的JREJVMjava标准库 node就是带有能操作IO和网络库的V8引擎&#xff0c;提供了很多可调用的API使得JavaScript能够读写文件&#xff0c;网络请求&#xff0c;系统信息等…

【IIS搭建网站】本地电脑做服务器搭建web站点并公网访问「内网穿透」

文章目录1.前言2.Windows网页设置2.1 Windows IIS功能设置2.2 IIS网页访问测试3. Cpolar内网穿透3.1 下载安装Cpolar3.2 Cpolar云端设置3.3 Cpolar本地设置4.公网访问测试5.结语1.前言 在网上各种教程和介绍中&#xff0c;搭建网页都会借助各种软件的帮助&#xff0c;比如网页…

前端项目如何部署到服务器实现网址访问

目录 前言 需要用到的东西 购买云服务器和域名 绑定域名 使用Xshell连接云服务器 下载Nginx 安装nginx 配置nginx 启动nginx 传输文件 配置防火墙 卸载自带的防火墙 安装iptables防火墙 最后 前言 写了那么久的前端&#xff0c;就想着让朋友们欣赏欣赏&#xff0…

ElementUI快速上手(jar包本地下载)

Element-ui是饿了么前端团队推出的基于vue进行开发的前端框架。 最近刚学了Element-ui&#xff0c;迫不及待练练手&#xff0c;却发现现成的组件样式用不了。引用官网的使用方法&#xff0c;如图&#xff1a; 展示的效果也是不尽人意&#xff0c;在百度的过程中发现可能是链接…

相对定位relative、绝对定位absolute、固定定位fixed

注&#xff1a;默认情况下的定位是 postion&#xff1a;static&#xff1b; 使用定位时&#xff0c;常常使用偏移量对位置进行描述&#xff1a;left、right、top、bottom定位时&#xff0c;使用z-indent可以元素的堆叠顺序&#xff0c;例&#xff1a;z-indent&#xff1a;1&…

Spring Security 权限控制

日积月累&#xff0c;水滴石穿 &#x1f604; 前言 项目版本Boot2.3.12.RELEASESecurity5.3.9.RELEASE 官网文档 在前面的文章中&#xff0c;所有的接口只需要登录就能访问。并没有对每个接口进行权限限制。 在正式的系统中&#xff0c;一个用户会拥有一个或者多个角色&#…

三种架构模式——MVC、MVP、MVVM

目录 前言 一、MVC&#xff08;Model-View-Controller&#xff09; 1、简介 2、框架图 二、MVP&#xff08;Model-View-Presenter&#xff09; 1、简介 2、框架图 三、MVVM&#xff08;Model-View-ViewModel&#xff09; 1、简介 2、框架图 四、总结 前言 MV系列框…

微信小程序插件--wxml-to-canvas(生成图片)

一、需求 项目中要实现一个将图片分享到朋友圈的功能&#xff0c;将生成的海报转成图片保存到手机。用到了wxml-to-canvas插件。 二、官方示例使用方法 1.安装wxml-to-canvas npm install --save wxml-to-canvas2.JSON 组件声明 {"usingComponents": {"wxml-t…

多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单

本文完整版&#xff1a;《多款顶级好用的 Vue 表单设计器测评推荐&#xff0c;可拖拽生成表单》 Vue 表单设计器form-generator - 适配 Element Plus UI 框架的表单设计器form-render - 阿里团队开源表单设计器&#xff0c;自家 Antd UI 框架友好form-create - 支持Vue3 及 Ele…

内网npm私有仓库搭建以及使用教程

前言 前端团队沉淀一套通用的UI库、工具类、脚手架&#xff0c;不允许在公网发布&#xff0c;内网npm私有库搭建需求应运而生。如何在内网环境搭建npm私有仓库并使用&#xff1f;主角登场了 —— Verdaccio。接下来我来教大家使用 verdaccio 在内网环境中搭建npm私有仓库。 基…

canvas详细入门教程(1W字 吐血分享)

大家好&#xff0c;我是潘潘 今天为大家带来的是我已经写了很久了的canvas详细教程&#xff0c;对入门canvas很有帮助。 点击跳转原文&#xff1a; canvas详细教程原文 canvas是什么&#xff1f; 简单来说&#xff0c;<canvas> 是HTML5中的标签&#xff0c;它是一个容…

20分钟学会flex布局,熊二都表示学会了,你呢?

✏️ 作者&#xff1a;大二计算机专业学生 ♉ 星座&#xff1a;金牛座 &#x1f3e0; 主页&#xff1a;查看更多文章 &#x1f3c2; 关键&#xff1a;flex 前端布局 熊二都会 大家好&#xff0c;我是小周&#xff0c;今天分享的是熊二都能学会的前端 flex 布局&#xff0c;篇幅…

小程序 getActivePinia was called with no active Pinia. Did you forget to install pinia?

小程序项目使用pinia做状态管理报错&#xff1a; Error: [&#x1f34d;]: getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia createPinia() app.use(pinia) app运行打包时有个同样的错误 错误原因是&#xff1a;在外部js/t…

Collections类详解

目录 一.Collections概述&#xff1a; 1.1什么是Collections类&#xff1a; 1.2 Collections类和collection的区别和联系&#xff1a; 二. Collections类的主要方法&#xff1a; 一.Collections概述&#xff1a; 1.1 什么是Collections类&#xff1a; Java.util.Collections…

【Node.js】Express框架的基本使用

✍️ 作者简介: 前端新手学习中。 &#x1f482; 作者主页: 作者主页查看更多前端教学 &#x1f393; 专栏分享&#xff1a;css重难点教学 Node.js教学 从头开始学习 目录 初识Express Express简介 什么是Express 进一步理解 Express Express能做什么 Express的基本使用 …

前端登录退出:处理Token问题(获取、缓存、失效处理)以及代码实现

目录一、什么是Token二、获取token三、Token失效处理注意点1、主动退出2、Token过期① 逻辑图②方案③代码实现3、被人顶号① 逻辑图② 方案③代码实现一、什么是Token Token是服务端生成的一串字符串&#xff0c;当用户第一次登陆成功后&#xff0c;服务器会生成一个token&am…

vue 实现自适应屏幕

1.安装自适应屏幕插件&#xff08;优先使用vscode安装&#xff0c;需要调整px转化rem比例&#xff09; &#xff08;1&#xff09;安装插件&#xff1a; npm i lib-flexible --save &#xff08;2&#xff09;mian.js引入&#xff1a; import lib-flexible/flexible.js 2. 如果…

java中controller层是干嘛的?

最近在研究开源框架的源码&#xff0c;打算改写开源框架&#xff0c;适用于自身的业务场景。于是找到了一个框架(spiderFlow)。 根据他的git上的教程&#xff0c;搭建了一个。 controller层&#xff0c;在我们写代码的时候&#xff0c;一般为接口层&#xff0c;与前端&#xf…

CSS锥形渐变实现环形进度条

10月份因为疫情原因、又开启了居家办公模式&#xff0c;空闲之余&#xff0c;与其选择“躺平”&#xff0c;不如去做一些有意义的事情&#xff0c;内心的想法驱使着我去做些什么&#xff0c;但是又没有合适的素材&#xff0c;直到接手了最近的一个可视化项目&#xff0c;一个图…

若依框架---权限管理设计

前言 若依权限管理包含两个部分&#xff1a;菜单权限 和 数据权限。菜单权限控制着我们可以执行哪些操作。数据权限控制着我们可以看到哪些数据。 菜单是一个概括性名称&#xff0c;可以细分为目录、菜单和按钮&#xff0c;以若依自身为例&#xff1a; 目录&#xff0c;就是页…