HTML+CSS入门创建一个完整的HTML文档解析-职坐标

HTML+CSS入门创建一个完整的HTML文档解析

沉沙 2018-07-17 来源：阅读 1572 评论 0

摘要：HTML指的是超文本标记语言 (Hyper Text Markup Language)，HTML文档就是我们常说的网页，一个标准的HTML文档由文档元素和元数据元素组成，二者用来创建HTML文档以及其内容。希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS的入门。

HTML指的是超文本标记语言 (Hyper Text Markup Language)，HTML文档就是我们常说的网页，一个标准的HTML文档由文档元素和元数据元素组成，二者用来创建HTML文档以及其内容。

顺便说一下什么是元数据元素: 用来构建HTML文档的基本结构，以及就如何处理文档向浏览器提供信息和指示，它们本身不是文档内容，但提供了关于后面文档内容的信息。包含在head内，如title、base、meta等都是元数据元素。本文不做重点介绍。

文档元素

文档元素一共有四个DOCTYPE、html、head、body

DOCTYPE

每一个HTML文档都必须由DOCTYPE元素开头，告诉浏览器要处理的是HTML文档，在HTML5中DOCTYPE 声明变得非常简单而且唯一，不用写版本号浏览器也能识别这是HTML5文档，因为和之前的HTML版本有所差异

<!DOCTYPE html> //HTML5声明

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD。--W3school

HTML4中声明如下:

HTML 4.01 Strict(不允许使用框架集):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Frameset(允许使用框架集):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "//www.w3.org/TR/html4/frameset.dtd">

head

包含文档的元数据，向浏览器提供文档内容和标记的信息，还包括脚本和对外资源的引用，如引入外联.css文件、js文件等。

· <base>介绍:

如果在浏览器地址为"https://segmentfault.com/demo/index.html"中载入一个文档，代码如下:

<DOCTYPE html><html>
    <head>
        <base href="https://segmentfault.com/">
    </head>
    <body>
        <a href="page2.html">跳转</a>
    </body></html>

正常点击a链接，浏览器将从"https://segmentfault.com/page2.html"中加载文档
如果不包含<base>元素，浏览器将从"https://segmentfault.com/demo/index.html"中加载文档地址

· style

style元素拥有局部属性:type、scoped、media，其对应作用如下:

1.指定内嵌样式，type属性是高速浏览器文档所定义的类型、这个值只有一种text/css

<style>
    .box {
        width: 200px;
        height: 200px;
        background: red;
    }</style>

2.指定样式范围，scoped属性的作用为style元素内定义的样式只作用于该元素的父级及其所有兄弟元素

3.media属性表明文档在指定的设备下显示其定义的样式

<style media="screen" type="text/css">
    .box {
        width: 200px;
        height: 200px;
        background: red;
    }</style>

media不只能规定设备，还能定义更具体的使用条件，举例如下:

<style media="screen AND (max-width:500px)" type="text/css">
//只在浏览器宽度小于500px的情况下生效
    .box {
        width: 200px;
        height: 200px;
        background: red;
    }
</style>
<style media="screen AND (mix-width:500px)" type="text/css">
//只在浏览器宽度大于500px的情况下生效
    .box {
        width: 200px;
        height: 200px;
        background: blue;
    }
</style>

除了用AND来定义具体条件，还可以使用NOT和OR(','表示)，另外还有其他供media使用的特性就不列举了，大家可以自己去百度了，再补充一个吧，device-width，这些特性都可以结合max-/mix-来使用

· link

1.引入外联样式表

2.添加网站图标

//href属性值为图片路径

3.预先获取关联的资源

rel属性值设置为prefetch，可以预先加载demo.html，如果页面存在链接如下，为需要demo.html页面的操作做好准备

· script

script元素可以定义页面内嵌脚本、引入外部文件脚本并通过script本身局部属性值设定加载脚本的各种方式

1.定义文档内嵌脚本

window.onload = function() {

alert('页面加载完成');