要制作一个静态页面,需要用HTML和CSS来实现。一个页面由多个HTML元素组成,层次结构很重要。
CSS来选中某个元素添加样式,为了让页面看起来更美观。
HTML的文档结构可以这样理解:
html元素又叫跟标记、根元素,是所有元素的祖先元素,文档中的其他元素都在它里面。
该元素的相关属性有 : lang-指文档中的文字是用哪种自然语言书写(该属性可能会影响浏览器的语音阅读和翻译行为)
head元素是文档头,它是HTML的第一个子元素,通俗的讲就是人的头部。(head元素中的内容不会展示到页面上)
(它有两个子元素,分别是meta和title)文档头可以包含一些其他元素(用于描述页面的附加信息)
meta元素标识页面的其他元数据(页面相关的附加信息),是一个空元素。
例:<meta charset="UTF-8"> 表示中文网页需要使用声明编码,否则会出现乱码。“UTF-8”是字符编码集,该代码指示浏览
器使用字符编码集UTF-8解析页面,为获得更好的地域兼容性,避免乱码,应用UTF-8来解析网页,且让它成为meta的第一
个元素。
例:<meta name="keywords" content="自定义关键字"> keywords是关键词、关键字的意思。后面是该属性的取值(可以
加多个关键字,分隔符是英文状态的逗号),该代码用于SEO搜索引擎优化,让网页搜索排名更靠前。
例:<meta name="description" content="自定义描述内容"> description是描述网页的一段内容的意思,显示在搜索页。
title元素是标识文档标题,它会显示在浏览器的标题栏或标签页。例下面的 " CSDN-专业IT技术社区 "
body元素又叫文档体,通俗的讲就是人的身体部分。网页中所有可见的内容都在该元素内,它可以包含大量的其他元素,定
义文档的内容结构。
文档声明:<!DOCTYPE html>
DOC=document 表示文档。 TYPE 表示类型。
它既不是元素,又不是注释,写在html代码第一行,用来解析元素,告知浏览器使用哪一个html版本来解析。
上面这段代码就是html的文档层次结构。