循序渐进Python3(十一) --0-- web之html
HTML:
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记)。
相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它。
浏览器负责将标签翻译成用户“看得懂”的格式,呈现给用户!
超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。
网页的组成:
一个网页一般由两部分组成即:
1> HTML(Hypertext Markup Language)
2> CSS(Cascade Style Sheets)。
HTML负责描述网页的结构和内容(如标题,导航栏等) CSS则负责网页的表现(外观)(如背景颜色,字体样式等)。
下面来看html的格式:
<!doctype html><html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>告诉浏览器使用什么样的html或xhtml规范来解析html文档。
<html></html>是说明这个是一个网页。告诉浏览器这个网页的开始和结束。他包含了之后的两个元素。<head>和</head>|<body>和</body>。
<head>和</head>之间的内容,是元信息和网站的标题 元信息一般是不显示出来的,但是记录了你这个HTML文件的很多有用的信息。
详细的解释一下:
为什么要使用<!DOCTYPE html>这个去告诉浏览器呢?:我们先了解一下DOCTYPE的模式 BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式) CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])
解决方案:允许网站开发者能够选择他们所熟知的模式。
依然使用旧式规则显示陈旧的网站。换句话说,所有的浏览器需要提供两种模式:怪异模式(即兼容模式)服务于旧式规则,严格模式服务于标准规则。Mac平台的IE浏览器最先实现这两种模式,Mozilla, Safari、Opera和Windows平台的IE6也相继实现了这两种模式。WIndows平台的IE5和Netscape4则只提供了怪异模式。选择使用哪种模式需要一个触发器,而“DOCTYP切换” 则用于此目的。依照标准:任何一个(X)HTML文档必须拥有一个DOCTYPE(译注:DTD(文档类型定义)是一组机器可读的规则,它们指示 (X)HTML文档中允许有什么,不允许有什么,CTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明)用以告诉其他人 这个文档的类型风格。
head部分
1、Meta(metadata information)
提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词--meta属于自闭合标签<meta charset="UTF-8"> #指定编码类型为UTF-8
2、title
网页头部信息,如下图所示:
<title
name="123"
>测试页</title> #在标签里写""="" 就是标签的属性,如本句蓝色标注的地方。
3、Link-->(由此引入css)
网页头部的图标<link rel="shortcut icon" href="favicon.ico"> # 固定语法,只需替换图片名称
4、Style
5、Script
1、在当前文件中写JS2、在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用
body部分
基础知识body里面分为两类标签:块级标签和内联标签,块级标签占用的是整行,内联标签占用的他所使用
的实际大小如下图:
<div style="background-color: green;">
无名
</div>
<span style="background-color: red">
小妖
</span>
常用标签:1、<p></p>标签和<br/>标签<p></p>标签:段落标签,每一对p标签为一段,代码如下:
2、<a></a>标签<a></a>标签用来跳转和锚<a>标签之:跳转,代码如下:
效果如下:
4、input标签用于输入,代码:文本框 密码框:
这些效果只是默认的,后面学习css之后还可以单选框:
当提交时浏览器会自动检测输入框内是否符合邮件格式,但有些低版本浏览器不支持该功能。多行文本框:
<body><textarea>123</textarea></body>
效果:
5、form表单 -->(action提交url,method提交方式,enctype上传文件)<form> <p>用户名:<input type="text"/></p> <p>密码:<input type="password"/> </p><input type="submit" value="提交"/> <input type="button" value="按钮"/> <!--这里按提交才有反映,submit是用来提交当前的表单的,当然可以有多个表单--> <!--但是,这个submit需要写入表单内,那么提交的时候是提交的当前表单--></form>
7、label标签
8、列表 ul/ol/dlul列表在前面自动加“点”,代码如下:
<ul> <li>line1</li> <li>line2</li> <li>line3</li></ul>
ol列表在前面自动加“数字”,代码如下:
<ol> <li>line1</li> <li>line2</li> <li>line3</li></ol>
dl列表自动分组,代码如下:
<dl> <dt>河北省</dt> <!--dt是标签,dd是标签里的内容--> <dd>石家庄</dd> <dd>衡水市</dd> <dt>山东省</dt> <!--dt是标签,dd是标签里的内容--> <dd>济南市</dd> <dd>烟台市</dd></dl>
9、表格<table border="1"><!--border这里是加上边框--> <thead><!--表头--> <tr>
11.iframe (上传文件 跨域 ajex)<!DOCTYPE html>可以直接打开网站内容:<html lang="en"> <head> <meta charset="UTF-8"> <title>我的汽车之家</title> </head> <body> <iframe style="width: 100%;height:2000px;" src="http://autohome.com.cn"> </iframe> </body></html>效果:
12.img 图片标签
<img src="3.png" alt="图片">
alt 表示,当图片无法正常显示的时候,显示alt所设置的值.
转载于:https://www.cnblogs.com/wumingxiaoyao/p/6046159.html
循序渐进Python3(十一) --0-- web之html相关推荐
- python下载安装教程3.8.0-windows中安装Python3.8.0的实现方法
windows中安装Python3.8.0的实现方法 操作系统:Windows10 64bit Python版本:3.8.0 安装步骤: 双击安装文件python-3.8.0-amd64.exe 勾选 ...
- python3.8.0安装_Python3.8.0
Python3.8.0是一款广受程序员欢迎的编程语言,也是面向对象的一款设计语言,Python以其语言的灵活和简易性,具有非常简捷而清晰的语法特点,在脚本工具.数据分析.web后端等等领域都有着优良的 ...
- 循序渐进学.Net Core Web Api开发系列【7】:项目发布到CentOS7
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇讨论如 ...
- python软件下载安装百度网盘-Python3.8.0
Python3.8.0是一款广受程序员欢迎的编程语言,也是面向对象的一款设计语言,Python以其语言的灵活和简易性,具有非常简捷而清晰的语法特点,在脚本工具.数据分析.web后端等等领域都有着优良的 ...
- centos7安装python3.7.4_阿里云centos7.4安装python3.7.0
CentOS7.4 安装 python-3.7.0 更新时间:2018/9/3 centos 安装最新版的python有点麻烦,因为yum没有最新版的python,所以必须从python官网下载源码. ...
- 循序渐进学.Net Core Web Api开发系列【14】:异常处理
循序渐进学.Net Core Web Api开发系列[14]:异常处理 参考文章: (1)循序渐进学.Net Core Web Api开发系列[14]:异常处理 (2)https://www.cnbl ...
- python下载安装教程3.7.3-【最新】Python-3.7.0安装教程及下载链接
[名称]:Python-3.7.0 [大小]:49 MB [语言]:英文 [安装环境]:Win7/Win8/Win10 软件介绍 Python是一种面向对象.直译式计算机程序设计语言,也是一种功能强大 ...
- python详细安装教程3.7.0-Linux 安装Python3.7.0
我这里使用的时CentOS7-mini,CentOS系统本身默认安装有Python2.x,版本x根据不同版本系统有所不同,可通过 python --V 或 python --version 查看系统自 ...
- python详细安装教程linux-Linux下python3.7.0安装教程
记录了Linux 安装python3.7.0的详细过程,供大家参考,具体内容如下 我这里使用的时centos7-mini,centos系统本身默认安装有python2.x,版本x根据不同版本系统有所不 ...
- python3.6.0安装教程-CentOS7安装Python3.6
CentOS7系统自带的Python版本是Python2.7,如需使用Python3.6,需要自行安装Python3.6. CentOS7安装Python3.6有两种方式:使用Yum源安装Python ...
最新文章
- React | Expected an assignment or function call and instead saw.....
- 关于Sqlserver中 BCP命令,实现数据导出功能。
- shell 批量添加用户健壮版
- java 值对象_java 中设计模式(值对象)的实例详解
- 计算机网络体系结构作业题整理-第十章答案
- tensorflow tf.placeholder()(相当于创建变量分配内存空间,但不赋值)
- c语言5v电源电路工作原理,稳压电源电路图详解_5v稳压电源电路原理图
- anaconda python删除pyltp_Anaconda使用
- python中config命令_python的logging.config使用详解
- Python3的编码问题
- 如何获取HTML元素所对应的javascript对象?
- 华为云modelarts平台SDK的调用
- HTML中的表单标签
- 培养学生计算机绘画水平,谈电脑绘画对高校绘画教学的作用
- 身份证号码验证——C语小程序言
- PC端微信dat还原工具源码分享【福利】
- couldn‘t find “libijkffmpeg.so“
- 电脑装两个硬盘在计算机只显示一个,插入U盘出现两个盘符怎么解决?一个U盘显示两个盘符解决方法...
- Mysql:select ...for update
- Linux 网桥配置br-lan、eth0、eth1、ra0、rai0
热门文章
- 7-3 输油管道问题 (50 分)——PTA
- 重置天下霸图20200405进度
- 小甲鱼第十九课:函数:我的地盘听我的课后总结
- linux系统下播放光盘,Linux下播放藍光光碟
- CSS中height:100vh和height:100%的区别是什么?
- Python 3.11比3.10 快60%:使用冒泡排序和递归函数对比测试
- 小陈WEB漏洞扫描器 V2.0
- 小陈学JS 筛选数组
- 极限编程(Extreme Programming)
- 智能电表远红外远程抄表实施技术方案