什么是HTML
HTML: HyperText Markup Language
HTML是一种用来告知浏览器如何组织页面的标记语言。其由一系列的元素组成,这些元素用来包围或者标记不同部分的内容,让它以某种方式呈现或者工作。
简单拆分一个 HTML 元素
观察下面一个HTML元素
<p> Hello World! </p>
<p> Hello World! </p>
是一个HTML元素
<p>
是其开始标签。
</p>
是其结束标签。没有结束标签可能会产生一些不可名状的效果。
Hello World!
是其内容。
嵌套元素
你可以把元素放到其他元素之中,也就是嵌套。
比如
<p> Hello <strong> World! </strong> </p>
你需要确保元素被正确嵌套,比如上面的例子中,我们先开始 p
元素,然后才开始 strong
元素,那么我们需要先让 strong
元素结束,再让 p
元素结束。
所有元素都要正确的打开和关闭,才能确保按照你所想的方式展现
空元素
有时候我们可以发现有些元素没有结束标签,而是在开始标签后面添加了一个 /
<img src="..." alt="..." />
这样的标签我们叫做空标签,因为我们不需要它有内容。
块级元素和内联元素
- 块级元素在页面中以块的形式展现。一个块级元素出现在它前面的内容之后的新行上。任何跟在块级元素后面的内容也会出现在新行上。块级元素通常是页面上的结构元素。例如,一个块级元素可能代表标题、段落、列表、导航菜单或页脚。一个块级元素不会嵌套在一个内联元素里面,但是它可能嵌套在另一个块级元素里面。
- 内联元素通常出现在块级元素中并环绕文档内容的一小部分,而不是一整个段落或者一组元素。内联元素通常不会导致文本换行。
属性
元素可以拥有属性,看起来就像给出的例子
<p class="MyText"> Hello World! </p>
其中 class="MyText"
就是一个属性。
属性必须包含如下三点:
- 一个空格,它在属性和元素名称之间。如果一个元素具有多个属性,那么每个属性之间必须用空格分隔。
- 属性名称,后面跟着一个等于号。
- 一个属性值,由一对引号引起来。
布尔属性
有时候我们可能开到一个属性没有一个属性值,这些属性被称为布尔属性。布尔属性一般只能有一个值,这个值一般与属性名称相同。例如 disabled
属性,你可以将其分配给表单输入元素。用它来禁用表单输入元素,这样用户就不能输入了。
如下两种写法是等价的
<input type="text" disabled="disabled" />
<input type="text" disabled>
简单拆分一个 HTML文档
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>我的测试站点</title>
</head>
<body>
<p>这是我的页面</p>
</body>
</html>
<!doctype html>
这是一个历史遗留问题,我们暂时不需要管它,只要记住需要包含这个才能使其他东西正常工作即可<html></html>
这个元素包裹了页面中所有的内容,有时我们称其为根元素。<head></head>
这个元素是一个容器,包含了所有你想包含在 HTML 页面中但是不在 HTML 页面中显示的内容。这些内容包含你想在搜索结果中出现的关键字和页面描述、CSS样式、字符集声明等等。<meta charser='utf-8'>
这个元素代表了不能由其他 HTML 元素表示的元数据。charset
属性将你的文档字符集设定为 UTF-8。它可以帮助避免以后的一些问题。<title></title>
设置了页面的标题,也就是出现在该页面加载的浏览器标签的内容<body></body>
这个元素包含了你访问页面时所有显示在页面上的内容。