首页 > Web开发 > 详细

HTML基本结构

时间:2019-04-07 11:17:37      阅读:112      评论:0      收藏:0      [点我收藏+]

文档的基本结构

<!DOCTYPE html>
<html>
<head>
    <title>HTML的例子</title>
</head>
<body>
<h1>欢迎光临我的主页</h1>
</body>
</html>

<!DOCTYPE html>是该文档的申明,仅仅适用于HTML5的版本,它告诉浏览器如何处理文档,并且让验证器知道按照什么样的标准检查代码的语言,然后用HTML标记标出实际代码的起始位置。其他的任何内容需要包含到<html> </html> 标签里面。且任何注释信息可以放在<!--注释内容-->或者<comment>注释内容</comment>标签里面。在编写html的时候,必须使用到标签,标签用<>括起来,分为自闭合标签(单标签)和闭合标签(双标签),如<link><a></a>

<head>头部

<head> </head> 是HTML文档的头部标签,在浏览器窗口中,头部信息是不会被显示在正文中的,在该标记中可以插入其他用于说明文件的标题和一些公共属性的标记。

<title> </title> 指定网页标题

<meta>具有以下的属性

  • charset:用于设置编码的格式,如charset="utf-8",它必须设置在标题的前面要不然要乱码。
  •   `name`:具有以下的个参数可以选择,它和`content`一起使用:
    •       `keyword`:用于告诉浏览器关键字
    •       `discription`:告诉浏览器网页的主要内容
    •       `viewport`:移动端的窗口
    •       `robots`:定义搜索引擎爬虫的索引方式
      参数 含义
      none 忽略此页
      noindex 不索引此网页
      nofollow 不通过该网页链接访问其他网页
      all 索引该网页,并且通过该网页继续索引
      index 索引该网页
      follow 继续通过该网页链接索引其他网页
    •        `author`:标注作者
    •        `generator`:注明编写网页的软件
    •        `copyright`:注明版权信息
    •        `revisit-after`:搜索引擎爬虫重新访问时间
    •        `renderer`:双内核浏览器渲染方式
      参数 含义
      wedkit 默认wedkit内核
      ie-comp 默认IE兼容模式
      ie-stand 默认IE标准模式
  •   `http-equiv`属性,相当于http的文件头作用
    •        `content-Type`:设定网页字符集
    •        `X-UA-Compatible`:告知浏览器采取什么版本来渲染当前页面
    •        `cache-control`:指定请求和响应遵循的缓存机制
      参数 含义
      no-cache 发送请求到服务器确定资源是否修改,否的话就用缓存
      no-store 不允许缓存,每次都需要到服务器去下载
      public 不允许任何中断和继续缓存
      maxage 表示在该请求开始时,多少时间内可以被缓存和重新使用,如maxage=10
    •        `expires`:设置网页的到期时间,到期后网页必须到服务器上重新下载,如`content="Sunday 21 July 01:21 GMT"`
    •        `refresh`:自动刷新,并指向设定的网页,`content="2;URL=http://www.baidu.com/"`,两秒后跳到百度
    •        `Set-Cookie`:网页过期,那么这个网页本地的Cookie就会被删除
  • <link rel="shortcut icon" href="URL">:在页面头添加小图标
  • <link rel="stylesheet" href=".../css/style.css">:引入样式

    <style></style>

    用于定义样式

    文档主体

    <body> </body>中放置的是页面中所有的内容,如图片、文字、表格、表单、超链接等元素,是用户可以直接看到的内容。

<body></body>中的一些基本属性

  • bocolor:用来设置页面的背景颜色,可以使用颜色的英文名称或者十六位进制
  • background: 用于设置背景图片
  • alink:规定文档中活动链接的颜色,即鼠标指向链接时链接文字所显示的颜色
  • link:规定文档中所有链接的颜色
  • text:规定文档中所有文本的颜色

    全局属性

    在很多标签里面都有这些常用属性
  • id:赋予了标签唯一的标识,可以用于以后样式的修饰,每个页面只能出现一次
  • class:赋予了标签类名,以后css可以对一个类进行修饰,每个页面可以多次出现
  • style:可以通过该属性直接写css的样式
  • title:赋予了标签额外的信息,当鼠标移到那里的时候,就会显示

    注意事项

(1)任何标签都必须使用<>,另外双标签需要</>来结束整个标签,单标签就不需要了。

(2)标签可以嵌套着使用,但是不能交叉使用。

(3)在源代码中不区分大小写。

(4)回车符和空格在代码编译的过程中不起任何作用。

(5)标签中的属性需要用" "括起来。

(6)文件的后缀名需要设置成.html或者.htm,而一般网站的首页文件名是index.html或者default.html

HTML基本结构

原文:https://www.cnblogs.com/MingleYuan/p/10664243.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!