01--Web前端之HTML基础
html概述和基本结构
html概述
HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
html基本结构
一个html的基本结构如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 </body> 10 </html>
第一行是文档声明，第二行“<html>”标签和最后一行“</html>”定义html文档的整体，“<html>”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是'lang="zh-CN"',不定义也没什么影响，它一般作为分析统计用，定义为英文的话会调用浏览器的翻译功能，定义为中文的话则不会。
“<head>”标签和“<body>”标签是它的第一层子元素，“<head>”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“<body>”内编写网页上显示的内容。
Sublime
任何的纯文本编辑器都能够编辑html，比如记事本、editplus、notepad++。
比较有名的专门制作网页的工具有：
DreamWeaver (Adobe公司的产品，咱们刚接触代码可以使用这个，在实战中我们就不用这个了)
Sublime （高效率的程序书写工具，我们实战就用这个编辑器）
WebStorm （更高级的项目级别编程工具）
Visual Studio Code（现在的大神都在用的编辑器）
不管用什么编辑器，你都要知道，做网页和工具无关，任何的纯文本编辑器都能够做网页。我们学习的是代码，而不是所谓的工具。不过，不可否认，一个好的工具，确实能够提高工作效率，代码书写的速度，但是本质上讲，记事本也能书写网页。
sublime的中文意思是“华丽的”，是2011年开始流行的代码编辑器，可以编辑java、c、php等很多语言。
html、css、js在sublime中支持非常好。界面也非常漂亮，安装简单、小巧、插件多。
sublime非常小巧，只有21mb，甚至不用安装，直接解压缩，就能双击使用，把sublime_text.exe文件发送到桌面快捷方式就行了。（已经为同学们准备好了）
今后我们的文件，如何用sublime编辑呢？很简单，直接拖进来。
一定要记住，保存的时候，一定要书写.html，表示存为网页的格式。
sublime中的常用快捷键：
ctrl+滚轮 放大缩小文字
ctrl+shift+d 复制当前行
ctrl+shift+k 删除当前行
ctrl+shift+↑ 上移当前行
ctrl+shift+↓ 下移当前行
先介绍这些。
以后击打标签的时候，仅仅需要输入标签的名字，然后按tab就可以自动生成标签对儿了。
比如，输入p然后按tab，软件自动生成：
<p></p>
HTML文档类型
目前常用的两种文档类型是xhtml 1.0和html5
xhtml 1.0
xhtml 1.0 是html5之前的一个常用的版本，目前许多网站仍然使用此版本。
此版本文档用sublime text创建方法： html:xt + tab / html:xt + ctrl+e
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 10 11 12 </body> 13 </html>
html5
pc端可以使用xhtml 1.0，也可以使用html5。
此版本文档用sublime text创建方法： html:5 + tab 或者 ! + tab
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
两种文档的区别
1、文档声明和编码声明
2、html5新增了标签元素以及元素属性
html文档规范
xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。
1、所有的标签必须小写
2、所有的属性必须用双引号括起来
3、所有标签必须闭合
4、img必须要加alt属性(对图片的描述)
html注释：
html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：ctrl+?
<!-- 我只是一个注释 -->
html标签特点：
html的标签大部分是成对出现的,少量是单个出现的，特定标签之间可以相互嵌套，嵌套就是指一个标签里面可以包含一个或多个其他的标签，包含的标签和父标签可以是同类型的，也可以是不同类型的：
<!-- 成对出现的标签 --> <body>......</body> <p>......</p> <div>......</div> <b>......</b> <!-- 单个出现的标签 --> <br /> <img src="..." /> <input type="..." /> <!-- 标签之间的嵌套 --> <p> <span>...</span> <a href="...">...</a> </p> <div> <h3>...</h3> <div> <span>...</span> <p>...</p> </div> </div>
html标题
通过 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，比如说： <h1>用作主标题（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。
<h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3>
html段落、换行与字符实体
html段落
<p>标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开，代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>段落</title> 6 </head> 7 <body> 8 <p>HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超 9 文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的 10 标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。 11 </p> 12 13 <p>一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方 14 式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网 15 页可以从一个网页链接跳转到另外一个网页。</p> 16 </body> 17 </html>
html换行
代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入<br />来强制换行，代码如下：
<p> 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br /> 文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br /> 渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。 </p>
html多个空格
代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，多余的空格都被层叠掉了，如果想显示多个空格，可以使用空格的字符实体,代码如下：
1 <!-- 在段落前想缩进两个文字的空格，使用空格的字符实体： --> 2 <p> 3 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br /> 4 文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br /> 5 渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p>
大于小于符号
在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体，比如：
1 <!-- “<” 和 “>” 的字符实体为 < 和 > --> 2 <p> 3 3 < 5 <br> 4 10 > 5 5 </p>
html块
1、div标签 块元素，表示一块内容，没有具体的语义。
2、span标签 行内元素，表示一行中的一小段内容，没有具体的语义。
html图像
<img>标签可以在网页上插入一张图片，它是独立使用的标签，通过“src”属性定义图片的地址，通过“alt”属性定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持,"title"属性，指鼠标放到图像上会弹出对这个图片的描述。
<img src="images/pic.jpg" alt="产品图片" />
绝对路径和相对路径
像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。
- 绝对地址：相对于磁盘的位置去定位文件的地址
- 相对地址：相对于引用文件本身去定位被引用的文件地址
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：
-
“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
-
“ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。
html链接
<a>标签可以在网页上定义一个链接地址，通过href属性定义跳转的地址，通过title属性定义鼠标悬停时弹出的提示文字框。
<a href="#"></a> <!-- # 表示链接到页面顶部 --> <a href="http://www.sjzhuadu.com/" title="花都学校网站">花都学校</a>
定义页面内滚动跳转（锚和锚点）
页面内定义了“id”或者“name”的元素，可以通过a标签链接到它的页面滚动位置，前提是页面要足够高，有滚动条，且元素不能在页面顶部，否则页面不会滚动。
<a href="#mao1">标题一</a> ...... ...... <h3 id="mao1">跳转到的标题</h3>
html列表
有序列表
在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现，代码如下：
1 <ol> 2 <li>列表文字一</li> 3 <li>列表文字二</li> 4 <li>列表文字三</li> 5 </ol>
在网页上生成的列表，每条项目上会按1、2、3编号，有序列表在实际开发中较少使用。
无序列表
在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现，代码如下：
1 <ul> 2 <li>列表文字一</li> 3 <li>列表文字二</li> 4 <li>列表文字三</li> 5 </ul>
在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。
定义列表
定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释，代码如下：
<h3>前端三大块</h3> <dl> <dt>html</dt> <dd>负责页面的结构</dd> <dt>css</dt> <dd>负责页面的表现</dd> <dt>javascript</dt> <dd>负责页面的行为</dd> </dl>
浙公网安备 33010602011771号