HTML不是一门编程语言,而是一门标记语言HTML由一系列的 elements组成, 您可以使用它来封装,包装或标记内容的不同部分,使其以某种方式显示,或以某种方式执行。
元素的主要部分是:
1.开始标签:包括元素的名称,包裹在开始和结束尖括号中。
2.结束标签:与开始标签相同,出来在元素名称之前的正斜杠。
3.内容:元素里面包含的内容。
4.元素:开始标记、结束标记加上内容等于元素。
(不是所有的元素都拥有开始标签、结束标签和内容)
把元素放到其他元素中间,叫做嵌套。
例子:
正确:<p>My cat is <strong>very</strong> grumpy.</p>
错误:<p>My cat is <strong>very grumpy.</p></strong>
嵌套时要先关闭里面的元素,才能关闭外层元素。
块级元素:在一个页面中以块的形势展示,相对于前面的内容,它会展示在新的一行,后面的内容也会被挤到下一行。块级元素通常用于页面结构化显示如段落、导航栏、页脚。一个以block形式展现的块级元素不能嵌套在内联元素中,但是可以嵌套在其他块级元素中。
内联元素:通常出现在块级元素之间,被一些其他的文本包围。内联元素不会导致文本换行,它通常出现在一堆文本之间。
元素也可以拥有属性:
属性包含元素的额外信息,但是这些信息并不会显示出来。
一个属性必须包含以下内容:
1.在元素和属性中间有个空格space。
2.属性名后面紧跟一个“=”。
3.有一对属性值,由一对“ ”引起来(也可以用单引号,单双引号不能在一个属性值里面混用)。
布尔属性没有值,只有跟属性名一样的属性值。
分析HTML文档:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
<DOCTYPE html>声明文档类型。
<html></html>根元素,包裹了整个完整的页面。
<head></head>:head元素是一个容器,它包含了所有你想包含在html页面中但是不想显示在html页面中的内容。
<meta chatset="utf-8">:设置文档的字符集编码。
<title></title>:设置页面标题,出现在浏览器标签上,当收藏页面时用来描述页面。
<body></body>:包含了你访问页面时所有显示在页面上的内容,文本,图片,音频,游戏等等。
在html页面中无论有多少个空白(空白字符、换行),当渲染这些代码的时候,HTML解释器会将连续出现的空白字符减少为一个单独的空格符(适当的添加空白,可以加强代码的可读性)。
在HTML中,字符 <, >,",' 和 & 是特殊字符. 它们是HTML语法自身的一部分。
把特殊字符包含进文本,需要使用字符引用。每个字符引用以符号&开始, 以分号(;)结束。
Literal character | Character reference equivalent |
---|---|
< | < |
> | > |
" | " |
' | ' |
& | & |
如今,几乎你使用的所有网站都会使用 CSS 让网页更加炫酷, 使用JavaScript让网页有交互功能, 比如视频播放器,地图,游戏以及更多功能。这些应用在网页中很常见,它们分别使用 <link>
元素以及 <script>
元素。
-
<link>
元素经常位于文档的头部,它有2个属性, rel="stylesheet",表明这是文档的样式表,而 href,包含了样式表文件的路径:<link rel="stylesheet" href="my-css-file.css">
-
<script>
部分没必要非要放在文档头部; 实际上,把它放在文档的尾部(在</body>标签之前
)是一个更好的选择 ,这样可以确保在加载脚本之前浏览器已经解析了HTML内容(如果脚本加载某个不存在的元素,浏览器会报错)。<script src="my-js-file.js"></script>
注意: < script >元素看起来像一个空元素,但它并不是,因此需要一个结束标记。您还可以选择将脚本放入< script >元素中,而不是指向外部脚本文件。