循序渐进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)刷新和跳转
<meta http-equiv="refresh" content="5"> #指定每5秒刷新一次
<meta http-equiv="refresh" Content="1;Url=http://www.cnblogs.com/" /> #指定1秒之后跳转页面至另一个网页
关键字的作用:一般是让爬虫之类的收录程序,当他们在爬你的网站的时候,如果你有关键字,那么他们会优先把关键字收
<meta name="keywords" content="博客,Mr、心弦,帅哥">
(4)描述
例如cnblog里的就是一个描述:
<meta name="description" content="博客园是一个面向开发者的知识分享社区。"
(5)X-UA-Compatible 这个是IE8特有的,知道即可,解决版本兼容问题
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
2、title
网页头部信息,如下图所示:
<title
name="123"
>测试页</title> #在标签里写""="" 就是标签的属性,如本句蓝色标注的地方。
3、Link-->(由此引入css)
网页头部的图标
<link rel="shortcut icon" href="favicon.ico"> # 固定语法,只需替换图片名称
导入CSS类似python中导入模块类似
<link rel="stylesheet" href="css/css_model.css">
4、Style
2、在其他文件中写Css样式类似python的模块导入的方式把Css样式导入到当前文件中使用
5、Script
1、在当前文件中写JS
2、在其他文件中写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>标签之:跳转,代码如下:
3、H标签
即标题标签,代码如下:
效果如下:
4、input标签
用于输入,代码:
文本框 密码框:
这些效果只是默认的,后面学习css之后还可以单选框:
文件:<input type="file" />
</p>
当提交时浏览器会自动检测输入框内是否符合邮件格式,但有些低版本浏览器不支持该功能。
多行文本框:
<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/dl
ul列表在前面自动加“点”,代码如下:
<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>
<th>name1</th>
<th>name2</th>
<th>name3</th>
</tr>
</thead>
<tbody>
<!--一个tr是1行,一个td是一列,一行里可能有很多列。-->
<!--如果想加多个行就加多个tr即可-->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
效果:
<td>1</td>
<td rowspan="2">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<!--<td>5</td>-->
<td>6</td>
</tr>
10.fieldest 大边框
<legend>无名小妖的后花园</legend>
<p>血晶花 小果花</p>
<p>冰莲花</p>
</fieldset>
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所设置的值.
循序渐进Python3(十一) --0-- web之html的更多相关文章
- 循序渐进学.Net Core Web Api开发系列【0】:序言与目录
一.序言 我大约在2003年时候开始接触到.NET,最初在.NET framework 1.1版本下写过代码,曾经做过WinForm和ASP.NET开发.大约在2010年的时候转型JAVA环境,这么多 ...
- python3.8.0 Django 开发后端接口api 部署到 Linux Centos7上
经历了两天的时候终于把本地使用python3 django开发的接口API部署到服务器上了,还是记录一下,以免之后忘记,哈哈 注意一点,就是,centos7是基于python2的,我这边默认的是pyt ...
- Spring 4 官方文档学习(十一)Web MVC 框架之配置Spring MVC
内容列表: 启用MVC Java config 或 MVC XML namespace 修改已提供的配置 类型转换和格式化 校验 拦截器 内容协商 View Controllers View Reso ...
- 基于centos7+nginx+uwsgi+python3+django2.0部署Django项目
0.序言 本文讲解如何基于centos7+nginx+uwsgi+python3+django2.0把windows上的本地项目部署到云服务器上. 本文服务器上的django项目和虚拟环境的路径将建立 ...
- 循序渐进学.Net Core Web Api开发系列【10】:使用日志
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.本篇概述 本篇介 ...
- 循序渐进学.Net Core Web Api开发系列【9】:常用的数据库操作
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇描述一 ...
- 循序渐进学.Net Core Web Api开发系列【7】:项目发布到CentOS7
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇讨论如 ...
- 循序渐进学.Net Core Web Api开发系列【6】:配置文件appsettings.json
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.本篇概述 本篇描 ...
- 循序渐进学.Net Core Web Api开发系列【4】:前端访问WebApi
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 前一篇文章 ...
- 循序渐进学.Net Core Web Api开发系列【3】:WebApi开发概览
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 目前我们已 ...
随机推荐
- 从感知器到SVM
这篇文章主要是分析感知器和SVM处理分类问题的原理,不涉及求解 感知器: 感知器要解决的是这样的一个二分类问题:给定了一个线性可分的数据集,我们需要找到一个超平面,将该数据集分开.这个超平面的描述如下 ...
- Spring3.1新特性(转)
一.Spring2.5之前,我们都是通过实现Controller接口或其他实现来定义我们的处理器类. 二.Spring2.5引入注解式处理器支持,通过@Controller 和 @RequestMap ...
- Javascript 实现HTML字符串的储存
在js中使用HTML字符串时,可以不用理会字符串的单引号和双引号的转义,因为使用的注释,注释当然什么都可以写. PS:这个有点类似于 php中的 <<<语法(heredoc和nowd ...
- sqlserver获取数据库表结构
SqlServer获取所有数据库,表,表结构 --获取所有数据库 SELECT * FROM Master..SysDatabases ORDER BY Name --获取test数据库下所有表 us ...
- 读取数据库的表并绑定到Listview
$aResultEventlog = _GetQueryTable($strSQL_Compare_FailRecordEventIDs, $iRowsEventlog, $iColsEventlog ...
- this关键字
class Demothis关键字//哪个对象在调用this所在的函数,this就代表哪个对象.{ //当定义类中功能时,该函数内部要用到该函数的对象时,这时用this来表示这个对象. public ...
- 如何获取TypedArray?
当我们需要自定义控件的时候经常会使用到TypedArray这个类,使用完之后必须调用recycler()函数.... 但是如何获取呢? 有如下几个方式: context(实际最后调用的是context ...
- ruby 2.2
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" ...
- SQL Server Reporting Services (SSRS): Reporting Services in SQL Server 2012 (codename "Denali") will support XLSX, DOCX formats. Bye bye 65536 rows limit in XLS files ;)
当SSRS报表的时候,若相应EXCEL是2003以下,在行数超过65536的时候报表会报错 "Microsoft.ReportingServices.ReportProcessing.Han ...
- solr5.5教程-Analyzer、Tokenizer、Filter
对于文本,solr在建立索引和搜索的时候需要对其做一定的处理(比如英文要去掉介词.转成小写.单词原形化等,中文要恰当地要分词).这些工作,一般由Analyzers.Tokenizers.和Filter ...