目录
一、前端基础入门
1、 HTML5基础语法与标签
1.1.1、HTML特性-空白折叠现象
- 文字和文字之间的多个空格、换行会被折叠成一个空格。
- 标签“内壁”和文字之间的空格会被忽略。
1.1.2、div标签
- div是英语division(分割)的缩写，<div></div>标签对用来将相关的内容组合到一起，已和其他内容分割，是文档结构更清晰。比如，网页的头部要放在一个<div></div>标签对中，轮播图也要放在一个<div></div>标签对中，文章内容也要放在一个<div></div>标签对中。
- <div></div>是最常见的HTML标签，因为它可以结合CSS使用，实现网页的布局，这种布局形式叫做“DIV+CSS”。
- <div></div>像是一个容器，什么都可以容纳，因此工程师也习惯称呼<div></div>为“盒子”。
1.1.3、标题标签
- h系列标签标识“标题”语义，h是headline的意思。
- h1（一级标签）、h2（二级标签）、h3（三级标签）、h4（四级标签）、h5（五级标签）、h6（六级标签），逐次递减。
- 搜索引擎非常看重<h1></h1>标签的内容，应该将重要的内容放到<h1></h1>中，比如网页的logo、名称等等。
- <h1></h1>标签一般只能放置一个，否则会被搜索引擎视为作弊（实际开发中，也会出现多个<h1>标签的情况，只是不推荐）。
1.1.4、段落标签
- <p></p>标签标识段落标签，p的英语paragraph的意思。
- 任何段落都要放在<p></p>标签中，因为HTML中即使代码换行了，页面显示效果也不会换行，必须写到<p></p>标签中。
- <p></p>标签中不能嵌套h系列标签和其他p标签。
1.1.5、标签
a、什么是标签
- HTML叫做“超文本标记语言”,超文本标记就是标签。
- 每个标签都有不同的功能
b、什么是标签对儿
- 标签通常成对儿出现。比如：<p>不负昭华，只争朝夕</p>，<p>是起始标签，</p>为结束标签。
- 不同功能的标签有不同的功能，比如：<p>不负昭华，只争朝夕</p>，p标签表示段落，<h1>不负昭华，只争朝夕</h1>，h1标签表示一级标题。
- 标签可以给文字设置不同的“语义”。
c、单标签
- 有的标签不是成对儿的，而是只有起始标签，称为单标签。比如：<mate charset="UTF-8">
- 在HTML4代，单标签必须写一个结尾的反斜杠，HTML5不用写。比如：<mate charset="UTF-8"/>
1.1.6、title、关键词及页面描述
a、title设置方式
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 网页的标题 -->
<title>网页的标题</title>
</head>
<body>
</body>
</html>b、title的用途
- title标签用来设置网页的标题，文字会显示在浏览器的标签栏上。例如：<title>网页的标题</title>
- title也是搜索引擎收录网站时显示的标题，为了吸引用户点击，合理设置title是必要的。比如：搜索百度
1.1.7、网页关键词和页面描述
- 合理设置网页的网页关键词和页面描述，也是SEO的重要手段
- SEO(Search Engine Optimization,搜索引擎优化)利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，让网站在搜索引擎的结果中内占据领先地位，获得品牌收益。
- 使用meta标签设置网页关键词和描述，name属性非常关键，用来设置meta的具体功能。
<!DOCTYPE html> <html lang="en"> <head> <!-- 关键词--> <meta name="Keywords" content="JAVA,前端,Python,大数据"> <!-- 页面描述--> <meta name="Description" content="页面描述"> </head> <body> </body> </html>
1.1.8、字符集
a、字符集设置的方式
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 设置网页的字符集 -->
<meta charset="UTF-8">
</head>
<body>
</body>
</html>b、字符集
- UTF-8:涵盖全球所有国家、民族的文字和大量图形字符。一个汉字占用3个字节数，适合制作有非汉字文字的网页。
- GBK(gb2312):收录所有汉字字符（包括简体，繁体）和英语、少量韩文、日语和少量的图形字符，一个汉字占用2个字节数，适合制作只有汉字和英语的网页，由于一个汉字仅占2个字节，网页文件尺寸明显减少。
c、更改网页的字符集
- 无论使用哪种字符集，一定要在VScode编辑器中将文件也设置为相同的字符集，否则会出现乱码，然后更改meta标签。例如：<meta charset="UTF-8">、<meta charset="gb2312">、<meta charset="gbk">
- Live Server插件不支持gb2312(gbk)字符集，只支持UTF-8字符集。
1.1.9、认识HTML5骨架
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 设置网页的字符集 -->
<meta charset="UTF-8">
<!-- 视口设置，在移动网页开发课程中将介绍 -->
<meta name="viewport" content="......">
<!-- 关键词-->
<meta name="Keywords" content="JAVA,前端,Python,大数据">
<!-- 页面描述-->
<meta name="Description" content="页面描述">
<meta name="viewport" content="......">
<!-- 网页的标题 -->
<title>网页的标题</title>
</head>
<body>
你好！
</body>
</html>a、文档类型声明DTD
- HTML文件第一行必须是DTD(Document Type Definition,文档类型声明)。
- 不写DTD会引发浏览器的一些兼容问题。
- 不同版本的HTML有不同的DTD写法
b、W3C组织
-
W3C（The World Wide Web Consortium，万维网联合会员）是万维网的主要国际标准组织，该联盟成立于1994，负责制定Web标准，主要是HTML和CSS。
c、认识标签对
- <html>标签对儿
- <head>和<body>标签对儿
1.1.10、div的常见类名
<div>标签可以添加class属性表示“类名”,类名服务于CSS。
- 页头：header
- logo：logo
- 导航条：nav
- 横幅：banner
- 内容区域：content
- 页脚：footer
1449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
