admin管理员组文章数量:1547978
概述
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记)。相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它。
浏览器负责将标签翻译成用户“看得懂”的格式,呈现给用户!(例:djangomoan模版引擎)
HTML文档
文档树Doctype
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档
有和无的区别
- BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式)
- CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])
这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面,那么,在不同的浏览器就会显示不同的样式。如果你的页面添加了那么,那么就等同于开启了标准模式,那么浏览器就得老老实实的按照W3C的标准解析渲染页面,这样一来,你的页面在所有的浏览器里显示的就都是一个样子了。
有,用什么?
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。
更多Meta(metadata information)
提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
-
- 页面编码(告诉浏览器是什么编码)
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
-
- 刷新和跳转
< meta http-equiv=“Refresh” Content=“30″>
< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome“ />
-
- 关键词
< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >
-
- 描述
例如:cnblogs
-
- X-UA-Compatible
微软的IE6是通过XP、Win2003等操作系统发布出来,作为占统治地位的桌面操作系统,也使得IE占据了通知地位,许多的网站开发的时候,就按照IE6的标准去开发,而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候,采用了微软公司内部标准以及部分W3C的标准,这个时候许多网站升级到IE7的时候,就比较痛苦,很多代码必须调整后,才能够正常的运行。而到了微软的IE8这个版本,基本上把微软内部自己定义的标准抛弃了,而全面的支持W3C的标准,由于基于对标准彻底的变化了,使得原先在早期IE8版本上能够访问的网站,在IE8中无法正常的访问,会出现一些排版错乱、文字重叠,显示不全等各种兼容性错误。
与任何早期浏览器版本相比,Internet Explorer 8 对行业标准提供了更加紧密的支持。 因此,针对旧版本的浏览器设计的站点可能不会按预期显示。 为了帮助减轻任何问题,Internet Explorer 8 引入了文档兼容性的概念,从而允许您指定站点所支持的 Internet Explorer 版本。 文档兼容性在 Internet Explorer 8 中添加了新的模式;这些模式将告诉浏览器如何解释和呈现网站。 如果您的站点在 Internet Explorer 8 中无法正确显示,则可以更新该站点以支持最新的 Web 标准(首选方式),也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。 通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中,可以实现这一点。
当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时,它将使用 指令来确定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型,则 Internet Explorer 8 将以 IE5 模式(Quirks 模式)显示该网页。更多
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Title
网页头部信息
Link
-
- css
< link rel="stylesheet" type="text/css" href="css/common.css" >
-
- icon
< link rel="shortcut icon" href="image/favicon.ico">
Style
在页面中写样式
例如:< style type="text/css" >
.bb{
background-color: red;
}
< /style>
Script
-
- 引进文件
< script type="text/javascript" src="http://www.googletagservices/tag/js/gpt.js"> </script >
-
- 写js代码
< script type="text/javascript" > ... </script >
body标签
标签一般分为两种:行内标签和块级标签;
块级标签: div(白板),H系列(加大加粗),p标签(段落和段落之间有间距)
行内标签: span(白板)
- 标签之间可以嵌套
- 标签存在的意义,css操作,js操作
P和br标签
<p>段落<
/
p> <!
-
-
p表示段落,默认段落之间是有间隔的!
-
-
>
<br
/
> <!
-
-
br是换行
-
-
>
a标签
跳转:
<a href
=
"http://www.baidu"
target
=
"_blank"
>点我<
/
a>
<!
-
-
href表示跳转的地址,target
=
"_blank"
表示新窗口打开,默认为当前页
-
-
>
锚:
<body>
<a href
=
"#1"
>第一章<
/
a><br
/
>
<a href
=
"#2"
>第二章<
/
a><br
/
>
<a href
=
"#3"
>第三章<
/
a><br
/
>
<a href
=
"#4"
>第四章<
/
a><br
/
>
<div
id
=
"1"
style
=
"height: 600px;"
>第一章的内容<
/
div>
<div
id
=
"2"
style
=
"height: 600px;"
>第二章的内容<
/
div>
<div
id
=
"3"
style
=
"height: 600px;"
>第三章的内容<
/
div>
<div
id
=
"4"
style
=
"height: 600px;"
>第四章的内容<
/
div>
<
/
body>
h标签
标题h1、h2、h3、h4、h5、h6、h7表示不同的大小;
div标签
块级标签-白板,可以设置属性;
span标签
行内标签-白板
input系列
- text
1 <
input
type
=
"text"
name
=
"user"
/
>
- password
1 <
input
type
=
"password"
name
=
"passwd"
/
>
- submit
1 <
input
type
=
"submit"
value
=
"登录"
/
>
- button
1 <
input
type
=
"button"
value
=
"登录"
/
>
- radio 单选框
1 2 3 <p>请选择性别:<
/
p>
男:<
input
type
=
"radio"
name
=
"sex"
value
=
"1"
checked
=
"checked"
/
>
女:<
input
type
=
"radio"
name
=
"sex"
value
=
"2"
/
>
页面效果如下:
- checkbox 多选框
1 2 3 4 5 <p>爱好<
/
p>
篮球:<
input
type
=
"checkbox"
name
=
"favor"
value
=
"1"
checked
=
"checked"
/
>
足球:<
input
type
=
"checkbox"
name
=
"favor"
value
=
"2"
/
>
台球:<
input
type
=
"checkbox"
name
=
"favor"
value
=
"3"
/
>
<!
-
-
checked
=
"checked"
表示默认选择
-
-
>
页面效果如下:
- file 上传文件
1 <
input
type
=
"file"
name
=
"fname"
/
>
页面效果如下:
- reset 重置
1 |
<
input
type
=
"reset"
value
=
"重置"
/
>
|
页面效果如下:
一、基础标签
<i>、<em> | 文字倾斜 | <i>倾斜</i>或<em>倾斜</em> |
<b>、<strong> | 文字加粗 | <b>加粗字体</b> |
<sup>、<sub> | 上标和下标 | 4<sup>2</sup>,O<sup>2</sup> |
<del> | 删除字 | <del>删除字</del> |
二、特殊符号
编号 | 标签名 | 含义 | 示例 |
01 | | 一个空格 | 你 好! |
02 | > | 大于号 | 5>3 |
03 | < | 小于号 | 5<8 |
04 | © | 版权符号 | © 海文国际 |
05 | " | 双引号 | " 中国 " |
转载于:https://wwwblogs/smile1/p/6052981.html
版权声明:本文标题:python web前端 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1727201152a1102125.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论