一、html文件的基本结构

<!DOCTYPE html>  <!--html的文档声明,声明当前html文档的版本-->
<html>           <!--根标签: html开始标签 -->
    <head>       <!--html标签中的第一个子标签: head开始标签-->
        <meta charset="UTF-8">    <!--单个标签meta: 主要用于当前文档设置, 这里设置的是文档的编码格式 utf-8-->
        <title>Document</title>   <!--title标签: 主要用于设置当前文档标题-->
    </head>      <!--html标签中的第一个子标签: head结束标签-->
    <body>       <!--html标签中的第二个子标签: body开始标签-->

    </body>      <!--html标签中的第二个子标签: body结束标签-->
</html>          <!--根标签: html结束标签 -->

二、标签的分类

标签按照显示的不同, 可以分为两类:

块元素 (行元素)
内联元素 (行内元素)

1、块元素的特点:

单个块元素在浏览器中默认独占一行
两个块元素不能够在一行显示, 他们会自动换成两行显示
块元素可以设置宽高等属性.

2、内联元素:

多个内联元素可以在一行显示
内联元素不能够设置宽高, 设置了也没有用, 不会显示出效果
内联元素的宽高由他们本身的内容多少来支撑, 内容多,宽高自动增加.

3、常见的块标签

（1）、标题标签

表示文档的标题, 除了具有块元素基本特征, 还含有默认的外边距

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

（2）、段落标签

表示文档中的一个文字段落, 除了具有块元素基本特征, 还含有默认的外边距

<p>
    既然你诚心诚意的问了， 
    我们就大发慈悲的告诉你！ 
    为了防止世界被破坏， 
    为了守护世界的和平； 
    贯彻爱与真实的邪恶， 
    可爱又迷人的反派角色~~ 
    武藏！ 
    小次郎！ 
    我们是穿梭在银河的火箭队！白洞，白色的明天在等着我们！！ 
    就是这样~喵~~~~ 
</p>

段落标签中如果想要强制换行,需要使用<br>标签, 这个标签是个单个标签,所以只有一个.

另外在html中, 如果想要写大于号, 小于号, 或者空格等, 需要使用代码来实现, 这样更加优雅~
代码实现大于号:  &gt;
代码实现小于号:  &lt;
代码实现空格:    &nbsp;

（3）、通用块容器标签 div

表示文档中的一块内容，具有块元素基本特征，没有其他默认样式

<div>这是一个div元素</div>
<div>这是第二个div元素</div>
<div>
    <h3>自我介绍</h3> 
    <p>
        姑娘貌美一枝花，才学素养人品佳。
        活泼开朗不八卦，头脑敏锐有想法。
        踏实奋进不做假，乐于求知肯深挖。
        舞文弄墨擅策划，慧心妙舌喜表达。
        交友广泛爱分享，微博日日落不下。
        四年深造象牙塔，学习实践两手抓。
        只待应届招聘季，我花开后百花杀。
    </p>
</div>

4、常见内联元素标签

（1）、超链接标签 a

链接到另外一个网页，具有内敛元素基本特征，默认文字蓝色，有下划线

<a href="02.html">第二个网页</a>
<a href="http://www.baidu.com">百度网站</a>
<a href="http://www.baidu.com"><img src="images/logo.png" alt=""></a>
<a href="#">默认链接</a>

<a href="http://www.itcast.cn">原来的窗口打开界面</a>
<a href="www.baidu.com" target="_blank">新窗口打开界面</a>

说明:

a 标签的 href 属性可以添加 # 号, 这个是缺省链接地址:
不确定地址时, 我们可以临时使用 # 来占位,确定后替换即可
如果想要跳转到当前页面的最上方时, 可以使用 #
a 标签有 target 属性
- 如果不设置该属性, 在当前页面打开新页面
- 如果设置该属性, 则会在新窗口中打开新页面

（2）、通用内联容器标签 span

具有内联元素基本特征，没有其他默认样式
我们一般在文字段落的中间部分强调某一部分的时候调用span,添加样式,从而改变强调的部分的样式:
例如: 这是一段文字,其中梅总需要强调,所以我们可以使用span来完成强调的操作.

<p>这是一个段落文字, 段落文字中有<span>特殊标志或者样式<span>的文字</p>

（3）、图片标签 img

在网页中插入图片，具有内联元素基本特性，但是它支持宽高设置

<img src="images/pic.png" alt="图片">

说明:

src属性主要是添加要展示的图片地址
alt属性的作用:
- 图片加载失败时, 显示的提示信息
- 搜索引擎在收录图片时, 根据这个属性值来收录图片
- 制作无障碍网页, 方便盲人的读屏软件读取.

（4）、特殊的一些标签

空格: 在html中, 空格一般会用: 表示

回车: 在html中回车换行一般用
表示

小于号( < ): 在html中一般用<表示

大于号( > ): 在html中一般用>表示

删除标签: del 或者 ( s )

倾斜标签: em 或者 ( i )

下划线标签: ins 或者 ( u )

三、标签总结

HTML 整体是由标签组成的, 各个标签的功能很多都是重复的
同学们学习标签用法的时候多多练习即可
标签整体分为: 块级标签和行内标签
- 块级标签可以设置宽高值, 独占一行
- 行内标签自动设置宽高值, 一行内可以有多个
- 一般来说, 块级元素可以包含行内元素,行内元素不能包含块级元素.
- 特殊情况, 需要记住: p 标签不能嵌套 div
a 标签用于跳转(超链接) [跳转网页, 跳转页面, 跳转文件等] target属性为blank时，跳转新页面，设为空，当前页面打开
标题标签用于设置标题, 共有6级
div就是一个无色透明的容器,看不见,摸不到
img标签主要用于设置图片
p 标签就是paragraph(段落) 通常用于包裹段落
span是一个行内元素通常用于p标签内部,个别文字设置时使用.
ol li有序列表
ul li无序列表
label 表单

四、块级元素和内联元素的嵌套规则：

最基本：内联不能嵌套块级，块级可以嵌套内联元素

   <div><h1></h1><p></p></div>    正确（块级并列）
　  <span></span></a>    正确（内联嵌套内联）
　　<span><div></div></span>    错误（内联嵌套块级）

有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：h1、h2、h3、h4、h5、h6、p、dt。所以说p里面不能嵌套div，就是我犯的错误。

 <p><ol><li></li></ol></p>—— 错
 <p><div></div></p>—— 错

特殊的
里面可以嵌套div（
可以但
不行）
块级元素与块级元素并列、内联元素与内联元素并列

<div><h2></h2><p></p></div>　　正确
<div><a href="#"></a><span></span></div>　　正确
<div><h2></h2><span></span></div>　　错误（块级和内联并列了）

五、标签语义化

在布局中需要尽量使用带语义的标签, 使用带语义的标签的目的首先是为了让搜索引擎能更好的理解网页的结构,提高网站在搜索中的排名(也叫作SEO), 其次是方便代码的阅读和维护
带语义的标签:

h1 —- h6: 表示标题
p: 表示段落
img : 表示图片
a: 表示链接

不带语义的标签:

div: 表示一个容器
span: 表示行内的一块内容

所以我们要根据网页上显示的内容, 使用合适的标签, 可以优化之前的代码.

前端---HTML