网页前端开发之HTML入门
HTML入门
HTML全称HyperText Markup Language，中文译为：超文本标记语言。
它有一个同胞兄弟叫：XML，全称Extensible Markup Language，中文译为：可扩展标记语言。
简单来讲，它们都是标记语言。
那什么是标记语言？
答：标记语言是一种描述文档结构和内容的语言，与编程语言不同，它仅为书面描述没有运行功能。
它通过使用标记（标签）来构建文档，从而让用户能更专注于信息的组织和表达。
那标记语言的语法该如何写？
答：我们用XML举例（因为它比较好入手）, 如下：
有两个学生的成绩信息：张三同学的语言考80分，李四同学的数学考90分。
该信息用XML语法可以这样写：
<成绩>
<学生>
<姓名>张三</姓名>
<科目>语文</科目>
<分数>80</分数>
</学生>
<学生>
<姓名>李四</姓名>
<科目>数学</科目>
<分数>90</分数>
</学生>
</成绩>
其换写思路:
- 提取关键字：将信息中的关键字（如"姓名"、“科目”、“分数”）提取出来，放在
<>括号中形成标签； - 提取值：将关键字对应的值（如"张三"、“数学”、“90”）放在两个同名标签之间作为标签内容（注：结束标签多一个斜杠）；
- 分类归纳：将同类别的标签归纳到一个大标签下（标签支持嵌套）；
该信息还可以用属性的方式来写, 如下:
<成绩>
<学生 姓名="张三" 科目="语文" 分数="80"></学生>
<学生 姓名="李四" 科目="数学" 分数="90" />
</成绩>
其中
在标签名后面使用属性key="value"的方式来写入键值信息，
而value必须使用 英文的双引号或单引号 括住，因为属性值只支持字符串。
因为上例改用了属性写法，所以标签内容为空，因此也称为：空标签
当为空标签时，可以不用写结束标签，允许使用/>做结尾。
总结XML语法:
- 定义标签：首先定义标签，用来存放信息的关键字，标签名可以自定义，然后用
<>括住即可； - 结束标签：每个标签都有一个同名的结束标签，格式为
</标签名>(多一个斜杠开头)； - 标签内容：在开始标签到结束标签之间的内容可以是 文本 、 嵌套标签 或 留空 （从开始标签到结束标签这一部分称为XML元素）；
- 树状结构：XML标签的组织结构是树状结构, 所以第一级标签只能有一个，这个标签也称为 根元素 ；
- 属性写法：XML支持属性写法，在标签名后面使用属性
key="value"的方式来写入键值信息；
那HTML做为XML的同胞兄弟，它俩的语法区别在哪里?
答：HTML的语法与XML基本上一致，主要的区别点有以下：
- 预定义标签：HTML使用的是一组预定义的标签，每个标签都有其特定的名字及作用。在实际开发中，一般不使用自定义标签名；
- 根元素：HTML根元素的标签名必须为
<html>； - 固定搭配：HTML根元素下通常有两个搭配的子元素：
<head>和<body>；
下面是HTML的树状结构示例图：
其中
html，head，body，div，h1至h6，这些标签皆是HTML的预定义标签, 依次解释如下:
- html是根标签；
- head标签用来放置不可显示元素 (像网页的描述或链接文件)；
- body标签用来放置可显示元素（像文字与嵌套标签）；
- div标签是内容分隔标签，主要用来分隔不同的内容，形成各自独立的显示区域；
- h1至h6是标题标签, 分别用6种字号来显示其标签内容；
上图对应的HTML代码如下：
<html>
<head></head>
<body>
<div>
<!-- 可以把所有标签都写在同一行里 -->
<div><h1>111</h1><h2>222</h2><h3>333</h3></div>
</div>
<div name="第二区">
<div>
<h4>four</h4>
<h5>five</h5>
</div>
<div>
<h6>six</h6>
</div>
</div>
</body>
</html>
注：以<!–开头且以–>结尾是HTML的注解语法，其里面是注解内容。
以上就是HTML的基础知识，下篇起将讲解常见的HTML标签用法。
原文地址：https://blog.csdn.net/huangmipi/article/details/142969570
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！