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

最新推荐文章于 2024-07-23 18:10:19 发布

Pansc2004

最新推荐文章于 2024-07-23 18:10:19 发布

阅读量394

点赞数

本文链接：https://blog.csdn.net/Pansc2004/article/details/80519165

版权

Django 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

　　前面简单了解了一下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浏览器会问你要不要翻译成其它语言

元素元信息<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>