目录
2 HTML语法
HTML可以实现页面的基础结构，例如可以在页面上添加标题、文字、段落、图片、超链接等内容。
2.1 HTML语言
HTML（HyperText MarkUp Language,超文本标记语言）。其中“超文本”就是通过超链接，将文本组织在一起；“标记”是指应用一些预先定义好的标签来描述网页的标题、段落、图片、超链接等内容，每种标签都具有特定的含义。
例如基础HTML框架：
<html>
<head> <title></title> </head>
<body>
<p>读到这里的都是最帅的</p>
</body>
</html>
凡是用<>都是标签，有特定含义。
2.1.2 标签、属性
1.标签：标签通常由开始标签<>与结束标签<>成对组成，标签与里面的内容构成元素。
例如：<title> 看到这里的都好帅</title>
有的标签没有结束标签，用空格与/作为结束标记，/可以省略
例如：
2.属性：属性由属性名和属性值构成,属性值用双引号括起来。属性可以有多个，用空格分隔，属性书写的先后顺序不影响其含义。 例如:img标签表示插入图片，其sre属性描述图片的来源，alt属性表示图片如果无法显示时会出现的替代文字
< img src=”logo.gif” alt=”站标” />
2.1.3 元素
1.元素定义
标签与其包含的文本内容共同构成HTML元素，元素呈现嵌套的结构.在编辑代码时，应严格按照缩进来表示结构.
<html>
<head> <title></title> </head>
<body>
<p>读到这里的都是最帅的</p>
</body>
</html>
2.父元素、子元素、兄弟元素
如果A元素包含B元素，则A元素称为父元素，B元素称为子元素。同一层的元素互为兄弟元素。
<html>
<head> <title></title> </head>
<body>
<h1>五湖四海皆兄弟</h1>
<p>读到这里的都是最帅的</p>
</body>
</html>
body元素是父元素，h1与p元素是body元素的子元素，h1与p元素互为兄弟元素。
3.空元素
无法嵌套子节点和内容，称为空元素。
例如：
2.2 文件结构与网页结构
HTML文件有着固定的基本结构，包括头部和主体两部分。头部是提供给浏览器和搜索引擎的信息，主体是网页的内容区域。
2.2.1 文件结构
-
基本文件结构：
符合HTML5标准的基本文件结构：
<! DOCTYPE html> 感叹号后面没有空格，我是因为特殊原因加了空格
<html lang=”en”>
<head> <title></title> </head>
<body>
<h1>五湖四海皆兄弟</h1>
<p>读到这里的都是最帅的</p>
</body>
</html>
-
文档类型：<!DOCTYPE html>浏览器将按照HTML5标准解析网页文件
<html lang=”en”></html>：html表示文档的起止位置，浏览器与搜索引擎解析将按照lang属性声明的语言进行网页解析。lang 属性取值en表示英语，h表示中文。
<head></head>：包含网页头部信息，用于提供网页的基本信息给浏览器与搜索引擎进行解析；tile元素内的文本将会出现在浏览器标题栏中。 <body></body>包含网页主体信息，将出现在浏览器主窗口。 meta元素是指网页元数据，例如可以添加网页关键词与描述，方便提供给搜索引擎进行搜索。 meta标签的charset属性用于声明网页字符集的编码方式。注意，保存网页时的编码方式与charset属性声明的编码方式要保持一致，否则会出现乱 码。 例如，<meta charset="UTF-8”＞声明网页用UTF-8进行编码，所以保存文件时应该也使用这种编码方式，这是一种标准做法。
-
-
字符集与编码
(1)字符、字符集 字符就是一些文字和符号，字符集是字符的集合。
(2)编码
字符转到 二进制就是编码。不同编恐方式下，同一个字符的二进制数不同。
常见编码：
-
ASCII：包含数字、英文字母和一些基本符号。
-
GB 2312：简体中文的编码方式。
-
Unicode：对各国文字、符号进行统一编码。
-
UTF-8：针对所有语言字符集的编码方式，比Unicode占用的空间更小，是一种主流的规范编码方式。
-
2.2.2 网页结构
网页整体会被划分为若干区域，例如页眉、页脚、内容区、边栏等部分，方便页面布局。
-
div标签
div标签用于划分区域，本身没有含义。通过id属性或class属性定义，例如：<div id=”header”></div>或者<div class=”header”></div>
-
语义化结构标签
由于div本身没有具体含义，HTML5提供了一系列语义化标签，常用结构化标签包括一下几个：
1 header：页眉，可以作为整个页面的页眉，也可以是某个部分的页眉。页面的页眉通常包括Logo、主导航、搜索框等。
2 nav：导航条。
• 3 footer:页脚，可以是整个页面的页脚，也可以是某个部分的页脚。
• 4 main:页面主要内容，一个页面只能使用一次。
• 5 aside：侧栏，例如文章的一组链接、广告、友情链接、相关产品列表等。
• 6 article与section。
• article：可以独自被外部引用的内容，可以是一篇文章、博客、帖子等，通常都带有标题。
• section:用于一段主题性的内容，例如一个章节、片段，通常也带有标题。
div、section、article语义是从无到有、逐渐增强的，可以使用article就尽量不要使用section。
今天的文章web前端开发入门与实战 电子书_web前端学什么「建议收藏」分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/86351.html
