1. 介绍
-
HTML
- 超文本标记语言（HyperText Markup Language）浏览器能够识别和解析的语言，通过标签的形式构建页面结构和填充内容（用来描述网页的语言）。
- HTML 不是一种编程语言，而是一种标记语言（是一套
标记标签）
-
超文本
-
超越文本的限制：可以加入图片、声音、动画、多媒体等内容
-
超级链接文本：可以实现从一个文件跳转到另一个文件，与世界各地主机的文件连接
-
前端人员开发代码 ----> 浏览器显示代码（解析、渲染） -----> 生成最后的 Web 页面
-
-
作用
- 读取 HTML 文档，并以网页的形式显示出它们。
- 浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
2. 标签
-
概念
- 标签也称为标记或元素，用于在网页中标记内容
-
语法
-
标签使用< >为标志，在< >内部写标签名和标签属性
<!-- 此处为注释 -->
-
-
说明
- 标签名不区分大小写，推荐小写表示。
-
分类
-
双标签：成对出现，包含开始标签和结束标签。
<html> <!-- 内容或其他标签 --> </html> -
单标签：只有开始标签，没有结束标签，可以手动添加“/”表示闭合。
<br> <br/>
-
-
标签属性
-
标签属性书写在开始标签中，使用空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成，属性值使用双引号表示。
<meta charset="utf-8"> -
同一个标签中可以添加若干组标签属性，使用空格间隔。
<a href="http://www.baidu.com" target="_blank">百度一下，你就知道</a>
-
3. 使用
-
创建网页文件，使用.html或.htm作为文件后缀
-
添加网页的基本结构
<!doctype html> <html> <head> <title>网页标题</title> <meta charset="utf-8"> </head> <body> 网页主体内容 </body> </html>- 专业的开发工具支持HTML代码补全功能，如VSCode中，创建好HTML文件后可以输入
英文感叹号(!)或html:5，按tab键补全页面基本结构(不同的开发工具补全的基本结构有细微的差别，可以忽略)。
- 专业的开发工具支持HTML代码补全功能，如VSCode中，创建好HTML文件后可以输入
-
标签嵌套
- 在双标签中书写其他标签，称为标签嵌套
- 嵌套结构中，外层元素称为父元素，内层元素称为子元素；
- 多层嵌套结构中，所有外层元素统称为祖先元素，内层元素统称为后代元素
- 平级结构互为兄弟元素
4. 注释
-
介绍
- 用于对代码的描述与说明，便于阅读与理解
-
特点
- 只在编辑文档时可见，在浏览器展示页面时并不会显示
-
语法
<!-- 此处为注释 -->
5. 基本结构解析
<!-- 文档类型声明，便于浏览器正确解析标签及渲染样式 -->
<!doctype html>
<!-- HTML文档开始的标志 -->
<html>
<!-- 头部设置，可在head中设置网页标题，网页选项卡图标，引入外部的资源文件，设置网页相关信息等 -->
<head>
<!-- 设置网页标题，显示在浏览器选项卡上方 -->
<title>网页标题</title>
<!-- 设置网页字符编码（默认） -->
<meta charset="utf-8">
<!-- 设置文档与外部资源的链接 -->
<link rel="stylesheet" href="#">
<!-- 设置标签的样式 -->
<style></style>
</head>
<!-- 网页主体部分，显示网页主要内容 -->
<body>
网页主体内容
</body>
<!-- 文档结束-->
</html>
- 说明
- <!DOCTYPE html> 声明浏览器使用哪种HTML版本（HTML5）来显示网页。
- <head lang=“en”> en 就是英文网页, 定义为 zh-CN 就是中文网页（定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文 ）
- <meta charset=“utf-8”> 便计算机能够识别和存储各种文字，常用：GB2312、GBK等
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » HTML5教程（二）- HTML语法及基本结构
发表评论 取消回复