Python web模版Django-19 模版学习知识准备-html-1 html的基本构成和head相关的常用属性

  前面简单了解了一下HTML, CSS, Javascript的概念,但发现要把Django模版好好学下去,那点概念还不太够,所以增加一系列笔记,补学一些相关知识后,再回头学习Django的模版。 

  HTML是 Hyper Text mark-up language(超文本标记语言)的缩写。 它定义了一套规则,大家都来遵守,这样浏览器就能根据规则去解析它,将其翻译成方便用户“看”的格式呈现给用户。

  网页内容的组成,一般包括HTML, CSS, Javascript (https://blog.csdn.net/pansc2004/article/details/80268743):

  • HTML负责描述网页的结构和内容,比如标题,导航栏,表单,按钮,编辑框等等
  • CSS负责网页的外观、颜色和字体等等
  • Javascript是为了增加HTML的互动性而加入的脚本语言

-------------------------------------------------------

  这里先关注在HTML本身上,下面是一个简单的HTML文档:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>

</body>
</html>

最主要的标签和属性

  • <!DOCTYPE html> : 这个告诉浏览器使用什么样的HTML或XHTML规范来解析本文档。HTML的格式规则其实有很多,各有不同,后来才逐步融合统一,这个我查了一下主要的门户网站,现在都是用<!DOCTYPE html>,而且主流的浏览器全部支持,所以这个暂时也不深入研究了,用这个标准模式就错不了。
  • 元素<html> </html>:说明这个是一个网页,告诉浏览器这个网页的开始和结束。它包括两个元素 <head></head>和<body></body>两个元素。
  • 元素 <head></head>:其间的内容,是元信息(meta)和网站的标题(title),元信息一般不显示,但记录了HTML文件的很多有用的信息
  • 元素<body></body>:其间的内容,是浏览器呈现给用户看到的页面内容。
  • lang="en":说明语言类型,对程序本身用处不大,主要是告诉浏览器,可以根据语言类型去做些相关处理,比如默认设置为en,那么chrome浏览器会问你要不要翻译成其它语言

<head></head>

  • 元素  元信息<meta> ,提供有关页面的元信息,比如页面刷新、跳转、针对搜索引擎和更新频率的描述和关键词     

a)页面编码  <metacharset="UTF-8">  #指定编码类型为UTF-8

b)刷新和跳转 <metahttp-equiv="refresh" content="5">  #指定每5秒刷新一次

<meta http-equiv="refresh"Content="1;Url=http://www.cnblogs.com/luotianshuai/" /> #指定1秒之后跳转页面至另一个网页

c)关键字

关键字的作用:一般是让爬虫之类的收录程序,当他们在爬网站的时候,如果有关键字,那么他们会优先把关键字收录到他们的记录中,比如百度等,他们收录之后,在搜索你的关键字的时候,就能找到对应的网站。

<meta name="Keywords" content="搜狐,门户网站,新媒体,网络媒体,新闻,财经,体育,娱乐,时尚,汽车,房产,科技,图片,论坛,微博,博客,视频,电影,电视剧"/>

d)描述

<meta name="Description" content="搜狐网为用户提供24小时不间断的最新资讯,及搜索、邮件等网络服务。内容包括全球热点事件、突发新闻、时事评论、热播影视剧、体育赛事、行业动态、生活服务信息,以及论坛、博客、微博、我的搜狐等互动空间。" />

e)X-UA-Compatible

X-UA-Compatible  这个是IE8特有的,知道即可,因为做前端的同学都很害怕IE因为他们问题比较多各个版本问题很诡异,当IE8的时候微软想把各个版本的统一,那么这个参数就出现了,他为了向下兼容,如下的代码如果使用IE8的时候他会以IE7的模式运行。

<metahttp-equiv="X-UA-Compatible" content="IE=EmulateIE7" />


  • 元素  <title></title> :指定网页头部信息

   

  • 元素<link> : 网页头部的图标

  • Style : 在当前文件中写Css样式 或 在其它文件中写Css样式,类似python的模块导入的方式把Css样式导入到当前文件中使用
<!DOCTYPE html>
<html>
	<head>
		<style type ="text/css">
			h1{color:red}
			p {color:blue}
		</style>
		<script type="text/javascript">
		document.write("<h1>Hello World!</h1>")
		</script> 
	</head>
	<body>
	</body>
</html>


  • <script></script> : 在当前文件中写JS (参看上面的例子) 或 在其它文件中写JS,类似python的模块导入的方式把Css样式导入到当前文件中使用 



阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页