CrazyWing:Python自动化运维开发实战 十九、html基础入门
2017-12-21 00:11
1006 查看
导语:
马上要学习到python的web框架,但是如果一点都不懂web前端知识的话会寸步难行,那么接下来几天就知道该干什么了,先弄点基础知识来铺垫一下:)What is HTML?
HTML 是用来描述网页的一种语言。• HTML 指的是超文本标记语言 (Hyper Text Markup Language) • HTML 不是一种编程语言,而是一种标记语言 (markup language) • 标记语言是一套标记标签 (markup tag) • HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。• HTML 标签是由尖括号包围的关键词,比如 <html> • HTML 标签通常是成对出现的,比如 <b> 和 </b> • 标签对中的第一个标签是开始标签,第二个标签是结束标签 • 开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
• HTML 文档描述网页 • HTML 文档包含 HTML 标签和纯文本 • HTML 文档也被称为网页
Web 浏览器
读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容HTML 输出
我们无法确定 HTML 被显示的确切效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果。 对于 HTML,无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。 当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。 HTML 代码中的所有连续的空行(换行)也被显示为一个空格。
HTML输出空格
这里macdown输出有问题,请先跳过空格这个小节在html网页中单个空格我们直接键入空格键即可实现空格排版.
如果要实现多个空格排版,就需要 空格字符来实现 HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行空格( )是常规空格的宽度,可运行于所有主流浏览器。其他几种空格( )在不同浏览器中宽度各异。 它叫不换行空格,全称No-Break Space,它是最常见和我们使用最多的空格,大多数的人可能只接触了 ,它是按下space键产生的空格。在HTML中,如果你用空格键产生此空格,空格是不会累加的(只算1个)。要使用html实体表示才可累加,该空格占据宽度受字体影响明显而强烈。 它叫“半角空格”,全称是En Space,en是字体排印学的计量单位,为em宽度的一半。根据定义,它等同于字体度的一半(如16px字体中就是8px)。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性:透明的,此空格有个相当稳健的特性,就是其占据的宽度正好是1/2个中文宽度,而且基本上不受字体影响。 它叫“全角空格”,全称是Em Space,em是字体排印学的计量单位,相当于当前指定的点数。例如,1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性:透明的,此空格也有个相当稳健的特性,就是其占据的宽度正好是1个中文宽度,而且基本上不受字体影响。 它叫窄空格,全称是Thin Space。我们不妨称之为“瘦弱空格”,就是该空格长得比较瘦弱,身体单薄,占据的宽度比较小。它是em之六分之一宽。 它叫零宽不连字,全称是Zero Width Non Joiner,简称“ZWNJ”,是一个不打印字符,放在电子文本的两个字符之间,抑制本来会发生的连字,而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”(zero width non-joiner,U+200C),HTML字符值引用为: 它叫零宽连字,全称是Zero Width Joiner,简称“ZWJ”,是一个不打印字符,放在某些需要复杂排版语言(如阿拉伯语、印地语)的两个字符之间,使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: )。 此外,浏览器还会把以下字符当作空白进行解析:空格( )、制表位( )、换行( )和回车()还有( )等等
html文档类型
<!DOCTYPE> 声明帮助浏览器正确地显示网页。Web 世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档。
HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项声明信息,即 HTML 是用什么版本编写的。
例: 带有 HTML5 DOCTYPE 的 HTML 文档
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML 版本
从 Web 诞生早期至今,已经发展出多个 HTML 版本:版本 年份
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013
常用的声明
HTML5<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 元素
HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。开始标签 元素内容 结束标签
<p> This is a paragraph </p>
<a href="default.htm" > This is a link </a>
<br />
注:开始标签常被称为开放标签(opening tag),结束标签常称为闭合标签(closing tag)。
HTML 元素语法
• HTML 元素以开始标签起始,以结束标签终止• 元素的内容是开始标签与结束标签之间的内容
• 某些 HTML 元素具有空内容(empty content)
• 空元素在开始标签中进行关闭(以开始标签的结束而结束)
• 大多数 HTML 元素可拥有属性
• HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
HTML 元素嵌套
大多数 HTML 元素可以嵌套,即可以包含其他 HTML 元素。HTML 文档实例
<html> <body> <p>This is my first paragraph.</p> </body> </html>
上面的例子包含三个 HTML 元素:
<p> 元素: <p>This is my first paragraph.</p> 这个 <p> 元素定义了 HTML 文档中的一个段落。 这个元素拥有一个开始标签 <p>,以及一个结束标签 </p>。 元素内容是:This is my first paragraph。 <body> 元素: <body> <p>This is my first paragraph.</p> </body> <body> 元素定义了 HTML 文档的主体。 这个元素拥有一个开始标签 <body>,以及一个结束标签 </body>。 元素内容是另一个 HTML 元素(p 元素)。 <html> 元素: <html> <body> <p>This is my first paragraph.</p> </body> </html> <html> 元素定义了整个 HTML 文档。 这个元素拥有一个开始标签 <html>,以及一个结束标签 </html>。 元素内容是另一个 HTML 元素(body 元素)。
不要忘记结束标签
即使您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML: <p>This is a paragraph <p>This is a paragraph 上例在大多数浏览器中都没问题,但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。而且未来的 HTML 版本不允许省略结束标签。
HTML 属性
标签可以拥有属性,属性提供了有关 HTML 元素的更多的信息。属性是以名称/值对的形式出现,比如:name="value"。
属性总是在 HTML 元素的开始标签中规定。
属性和属性值对大小写不敏感,不过新版本的 (X)HTML 要求使用小写属性。
属性值应该始终被包括在引号(单双都可)内。
实例1: HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定: <a href="http://fklinux.blog.51cto.com">This is a link</a> 标签<a>的全称是anchor['æŋkə] 基本解释n. 锚, 铁锚的。 实例2: <h1 align="center"> 拥有关于对齐方式的附加信息,这里是居中排列标题。 实例3: <body bgcolor="yellow"> 拥有关于背景颜色的附加信息。 实例4:: <table> 定义 HTML 表格 <table border="1"> 拥有关于表格边框的附加信息。
下面是适用于大多数 HTML 元素的属性(后面有属性手册):
属性 值 描述 class classname 规定元素的类名(classname) id id 规定元素的唯一 id style style_definition 规定元素的行内样式(inline style) title text 规定元素的额外信息(可在工具提示中显示)
空的 HTML 元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。 <br> 就是没有关闭标签的空元素(<br> 标签定义换行)。 在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。 在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。 即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。
HTML元素分类:
标签元素分为三种不同的类型:块级元素、内联元素(又叫行内元素)和内联块级元素。块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行,即一个块级元素独占一行.2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致)
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
设置display:block可以将元素转换块级元素
比如:
<a href="http://fklinux.blog.51cto.com" style="display:block">这是一个51blog的链接</a>
<a></a>是一个内联元素,但是用style="display:block"将其设置成了块级元素
内联元素特点:
1、和其他元素都在一行上;2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>
设置display:inline;可以将块状元素转换为内联元素
内联块级元素特点:(同时具备内联元素、块级元素的特点)
1、和其他元素都在一行上;2、元素的高度、宽度、行高以及顶和底边距都可设置!
常用的内联块状元素有:
<img>、<input>
display:inline-block;float:left / right;position:absolute/fixed;可以将元素设置为内联块级元素。
HTML 注释
例:<!-- This is a comment -->
查看HTML源代码
在浏览器打开的网页上单击右键,然后选择“查看源文件”(IE)或“查看页面源代码”(Firefox),其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。相关文章推荐
- CrazyWing:Python自动化运维开发实战 二十、html标签用法起手式
- CrazyWing:Python自动化运维开发实战 十五、Python模块
- CrazyWing:Python自动化运维开发实战 八、Python数据类型之字符串
- CrazyWing:Python自动化运维开发实战 九、Python数据类型之列表
- CrazyWing:Python自动化运维开发实战 五、Python运算符与表达式
- CrazyWing:Python自动化运维开发实战 十七、Python异常 推荐
- CrazyWing:Python自动化运维开发实战 三、python文件类型
- CrazyWing:Python自动化运维开发实战 二、Python基本用法
- CrazyWing:Python自动化运维开发实战 二十一、html标签用法平推式
- CrazyWing:Python自动化运维开发实战 十六、Python正则表达式
- 基础入门_Python-模块和包.运维开发中inspect自省模块的最佳实践?
- CrazyWing:Python自动化运维开发实战 十一、Python数据类型之字典
- 基础入门_Python-模块和包.运维开发中日志模块logging的最佳实践?
- 基础入门_Python-模块和包.运维开发中watchdog事件监视的最佳实践?
- CrazyWing:Python自动化运维开发实战 十八、Python面向对象
- CrazyWing:Python自动化运维开发实战 十四、Python函数
- CrazyWing:Python自动化运维开发实战 十二、Python数据类型之集合
- 基础入门_Python-内建函数.运维开发中eval内建函数的最佳实践?
- 基础入门_Python-模块和包.运维开发中__import__动态导入最佳实践?
- CrazyWing:Python自动化运维开发实战 十、Python数据类型之元组