HTML的正确入门姿势——基本结构与基本标签 - Realsdg_H5之家

一、什么是HTML

HTML是超文本标签语言，即网页的源码。而浏览器就是翻译解释HTML源码的工具。

二、HTML文档的结构

HTML文档主要包括三大部分：文档声明部分、<head>头部部分、<body>主体部分。

我的第一个网页

三、HTML的基本标签 1.<head>头部部分

1.1meta标签

<!--
↑设置网页的字符集编码格式：
GB2312：国标码。简体中文的编码格式。
GBK：扩展的国标码。比国标吗多了更多的编码格式。
utf-8；万国码。可以兼容绝大多数国家的语言。

html4.01之前，声明字符集编码的格式：<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

-->

1.2title标签

杰瑞首页

1.3link标签

链接网页与其他文件。

下面举个栗子：链接小图标

2.<body>主体部分

2.1 标签的分类

HTML标签，分为“块级标签”和“行级标签”。

【块级标签和行级标签的区别】

1、块级标签自动换行，前后隔一行；
行级标签不会自动换行，从左往右依次显示
2、块级标签的宽度默认是百分之百，行级标签的宽度由文字内容撑开；
3、块级标签可以设置宽度、高度、边距等属性
行级标签不能设置上述属性

从写法上，HTML标签分为“成对标签”和“自闭合标签(空标签)”
成对标签：成对出现，有开始标签，必须有结束标签，内容包裹在两个标签之间。例如：<h1></h1> <p></p> <title></title>
自闭合标签/空标签：只有一个标签，用/表示标签的自动闭合(/可以省略)。例如<hr /> <link /> <meta />

2.2 常见的块级标签

1、h标签：标题标签，默认加粗，h1最大，h6最小

2、hr标签：水平线标签

3、br标签：换行标签，在代码中敲回车，在网页中并没有作用，必须使用<br>断行。

4、p标签：段落标签，表示网页中的一段文字

5、blockquote标签：引用标签，表示标签中的文字是应用自其他网站的内容。浏览器默认显示效果：整段向后缩进

6、cite：表示引用内容的来源，常写引用的网址URL。

7、pre标签：预格式标签，与p标签不同的是，pre标签会保留代码中的空格和回车，在网页中直接显示。最常的作用，是在网页中显示代码段，保留代码段格式。

8、div分区标签，用于配合css使用。将网页划分为块，可以包裹各种标签。

HTML基本标签我真帅！我真帅！我真帅！我真帅！我真帅！我真帅！这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。我是个帅哥！预格式标签

这是div里面的文字

2.3 基于布局的块级标签

1、有序列表ol： order list。一个有序列表由多个li组成

第一项第二项第三项

2、无序列表ul： unorder list

第一项第二项第三项

3、定义列表dl： difine list。

定义列表包含两部分：
<dt></dt>：定义列表的标题，标题顶格显示，一般一个定义列表只有一个标题
<dd></dd>：定义列表的描述项，相对于标题向后缩进显示，一个标题可以有多个描述项。

定义列表的标题定义列表的描述项1定义列表的描述项2定义列表的描述项3

2.4 了解：组合标签figure

包含两部分：
img 一张图片
figcaption：图片的标题，在图片正下方显示。

图片的标题

2.5 常用的行级标签

1、span标签：用于包裹行内的文字。常配合css使用修改文字样式。

↓栗子：“帅”字颜色变红，字体变48像素

我真帅！！！

2、em/strong/i/b 区别

1、em和i都能倾斜，strong和b都能加粗。但是，em和strong多了一层强调的含义。
(强调的作用，可以让搜索引擎快速的抓取网页的重点部分。可以实现代码的语义化。)
2、em和strong都有强调的作用，但是em是倾斜，strong是加粗，而且strong的强调程度要比em更高。

em标签，倾斜+强调strong标签，加粗+强调i标签，倾斜b标签，加粗删除线u标签，下划线

【常见引用标签】
常见的引用标签有：blockquoye、q、cite
区别：
1、显示效果上：blockquote整段缩进、q加引号、cite倾斜
2、从功能上：blockquote用于引用一整段内容，是块级标签。q引用一句话，是行级标签。cite常用于引用作品名、书画名。

3、img图片标签

①、src属性：表示图片所在的路径。
　　[路径的表示方式]
　　a网络上的图片地址。不建议使用。使用http：//协议
　　b可以使用图片的绝对路径。仅供了解。使用file：//协议。严禁使用。因为网页使用http协议，无法打开file：//协议的文件
　　　　绝对路径写法：file：///盘符：/文件路径
　　c使用相对路径。推荐使用的唯一方式。
　　　　a.图片在当前文件的下一层，“文件夹名/图片名(带后缀)”
　　　　b.图片与当前文件在同一层，直接写“图片名”。
　　　　c.图片在当前文件的上一层，“../图片名”。
　　　　注意：图片必须包含在项目里面，不能退出项目根目录
②、width、height(宽度、高度)属性。
③、title：鼠标指上时显示的文字。
④、alt：图片无法加载时显示的文字，省略alt将默认显示title内容。
⑤、align：图片周围的文字，相对于图片的排列方式：
　　top：文字居上
　　center：文字居中
　　bottom：文字居底

4、a标签：超链接