前端学习之html——基本结构

HTML基本结构

HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。

HTML主要是各种标签组成，基本由下面组成：

首先需要<！DOCTYPE html> 声明下文档是html文件，接着整个页面是由两个<html>标签包裹起来，中间有<head>和<body>标签并且组成。<head>一般用来声明标题的信息与属性，以及编码格式。而<body>标签中是页面的主体，标签中再嵌套着标签。


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>html5文档类型</title>
</head>

<!-- 1.标签建议全部小写 -->
<body>

	<!-- 2.属性用引号引起来 -->
	<div class="aa" id="div1"></div>

	<!-- 3.标签应该闭合 成对标签应该成对出现，单个标签在结尾加 " /"  -->
	<br>
	<br />

	<!-- 注释 -->

	<!-- 4.img标签加上alt属性 -->
	<img src="images/001.jpg " alt="风景图" />
</body>
</html>

其中四个注意点如下：

1.标签小写 2.属性的声明是放在标签里面的<>，并且引号引起来。

3.标签一般成对出现，单个标签需要加 "/" 4.插入图片时需要声明图片的信息，便于图片加载出现问题时可以显示，以及便于爬取

HTML标题、段落、换行、空格

HTML的标题有六级，通过 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>标签可以在网页上定义。6种级别的标题表示文档的6级目录层级关系，比如说： <h1>用作主标题（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。

HTML的段落是有<p>标签来定义，其中，不同段落之间会有默认的空行隔开。而在代码中自己换行的段落，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入<br />来强制换行如果想自己添加空行。同时，需要注意，在段落文字想要空格，无论自己敲多少个空格，都只会渲染出一个，可以自己添加&nbsp；来实现空格。

HTML中的块、含样式的标签

<div>用来表示html中的一块内容，比较常用，无具体的语义。其中<sapn>用来标签行内元素，表示一段话可以某部分内容，也没有具体语义。

含样式的标签，表示标签带有语义，带有一定的指示修饰作用，主要包括以下几种：

1、em 标签行内元素，表示语气中的强调词
2、i 标签行内元素，原本没有语义，w3c强加了语义，表示专业词汇
3、b 标签行内元素，原本没有语义，w3c强加了语义，表示文档中的关键字或者产品名
4、strong 标签行内元素，表示非常重要的内容

语义化的标签，就是在布局的时候多使用语义化的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。

HTML中图片的插入和相对绝对路径

<img>标签可以在网页上插入一张图片，通过“src”属性定义图片的地址，通过“alt”属性定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。例如 <img src="images/001.jpg" alt="人物图" />

其中的image/001.jpg就是指的相对地址，即相对于引用文件本身去定位被引用的文件地址。与相对路径对应的是绝对地址，指的相对于磁盘的位置去定位文件的地址。在日常使用中，相对地址使用较多，原因是：绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，而相对路径就没有这个问题。

在使用中，./表示当前目录，默认是当前目录，../表示上一层目录“ 例如：../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

HTML中的链接和列表

在html中，用<a>标签可以在网页上定义一个链接地址，通过src属性定义跳转的地址，通过title属性定义鼠标悬停时弹出的提示文字框。例如：

<a href="http://www.baidu.com" title="跳转到百度的链接">百度</a>

<a href="http://www.baidu.com" title="属性">
	<img src="images/001.jpg" alt="图片链接">
</a>

<a href="#"></a> <!--  # 表示链接到页面顶部   -->

同时可以通过链接实现页面内跳转滚动，页面内定义了“id”或者“name”的元素，可以通过<a>标签链接到它的页面滚动位置，前提是页面要足够高，有滚动条，且元素不能在页面顶部，否则页面不会滚动。例如：

<h1 id="biaoti01">标题一</h1>
<a href="#biaoti01">标题一</a>
<a href="#biaoti02">标题二</a>
<p>。。。
。。。
。。。<p>

<h1 id="biaoti02">标题二</h1>
<a href="#biaoti01">标题一</a>
<a href="#biaoti02">标题二</a>
<p>.....
.....
.....<p>

html列表

html列表主要有三种，有序列表、无序列表、定义列表

有序列表

在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现，代码如下：

<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

在网页上生成的列表，每条项目上会按1、2、3编号，有序列表在实际开发中较少使用。

无序列表

在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现，代码如下：

<ul>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ul>

在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。

定义列表

定义列表通常用于术语的定义：<dl>标签表示列表的整体，<dt>标签定义术语的题目，<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释，可以用在设置选择题、定义等方面。代码如下：

<h3>前端三大块</h3>
<dl>
    <dt>html</dt>
    <dd>负责页面的结构</dd>

    <dt>css</dt>
    <dd>负责页面的表现</dd>

    <dt>javascript</dt>
    <dd>负责页面的行为</dd>

</dl>