五月的夏天 ·HTML 基本语法
HTML 它有属于它自己的一套专属语法。我们如果想要编写一个完整的网页，那么我们就必须遵循 HTML 的语法来编写代码，HTML 都是由各种标签构成的，我们只需要记住这些标签的写法和意义，那么我们就可以编写网页的基本结构了。
HTML 文件都由不同的标签构成的：
<!DOCTYPE HTML>
<HTML lang="en">
<head>
<title>HTML基本语法</title>
</head>
<body>
<p>这是一段话</p>
<h1>我是一个大标题</h1>
<a href="https://www.baidu.com">百度</a>
</body>
</HTML>
1. HTML 的构成
HTML 文件都是由标签构成的，大部分标签都是双标签，由头标签和尾标签组成，小部分标签为单标签，没有尾标签。每个标签有特定的作用，例如，代表“连接”的 a 标签，代表“图片”的 img 标签等。
2. 标签的基本写法
2.1 双标签的写法
<p>
这是一段话
</p>
总结: 双标签是成对出现的， 尾标签在标签名前会多一个/。
2.2 单标签的写法
<img src='https://www.imooc.com/static/img/index/logo.png' alt='慕课logo'>
总结：单标签没有尾标签。
3. 标签的内容和属性
3.1 标签的内容
标签的内容写在头标签和尾标签之间， 代表这段内容由特定的标签修饰。
<p>
这是一段话 <!-- 这段为p标签的内容 -->
</p>
Tips：单标签没有内容，因为它没有尾标签，通常我们指的是双标签之间的内容。
3.2 标签的属性
标签的属性，如果是标签为双标签，则属性写在头标签中（头标签的<>内）， 如果是单标签，则写在标签的<>内。
<a href='https://www.baidu.com'>百度</a> <!-- 双标签的属性写在头标签的<>内 -->
<img src='https://www.imooc.com/static/img/index/logo.png' alt='慕课logo'> <!-- 单标签的属性写在标签的<>内 -->
总结：标签的属性有三部分构成，属性名，等号，属性值，等号左边的为属性名，等号右边的为属性值，属性值必须由引号引起来，单引号和双引号都可以。标签的属性用来给标签添加属性，让标签有特点的作用。
4. HTML 标签的关系
4.1 嵌套关系
一组标签写在另外一组标签之间，充当了另外一组标签的内容。例如：
<div>
<p>
我是一个p标签
</p>
</div>
标签与标签之间是可以嵌套的，但先后顺序必须保持一致。
4.2 并列关系
一组标签和另外一组标签平级，没有任何的嵌套关系。例如：
<div>
我是一个div标签
</div>
<p>
我是一个p标签
</p>
Tips：HTML 标签只有两种关系，要么是嵌套关系，要么是并列关系。
5. 标签的注意事项
HTML标签不区分大小写，<p> 和 <P> 是一样的，但建议小写，因为大部分程序员都以小写为准。
6. 小结
- HTML 文件都由不同的标签构成的。
<!DOCTYPE HTML>
<HTML lang="en">
<head>
<title>HTML基本语法</title>
</head>
<body>
<p>这是一段话</p>
<h1>我是一个大标题</h1>
<a href="https://www.baidu.com">百度</a>
</body>
</HTML>
- 标签分为双标签和单标签。
<!-- img标签为单标签，没有尾标签和内容 -->
<img src='https://www.imooc.com/static/img/index/logo.png' alt='慕课logo'>
<!-- p标签为双标签，有尾标签和内容 -->
<p>这是一段话</p>
- 双标签都是成对出现的。
<!-- p标签为双标签，有尾标签， 尾标签多一个/ -->
<p>这是一段话</p>
- 双标签具有内容和属性。
<!-- a标签为双标签， href为标签属性， 百度为标签的内容 -->
<a href='https://www.baidu.com'>百度</a>
- 单标签只有属性，没有内容。
<!-- img标签为单标签， src和alt都为属性，单标签没有内容 -->
<img src='https://www.imooc.com/static/img/index/logo.png' alt='慕课logo'>
- 标签有且仅有嵌套和并列关系。
<!DOCTYPE HTML>
<!-- head标签和body标签为并列关系， head和HTML、body和HTML均为嵌套关系 -->
<HTML lang="en">
<head>
<title>HTML基本语法</title>
</head>
<body>
</body>
</HTML>
2024 imooc.com All Rights Reserved |