目录
一.工具的使用
我们使用的工具是：HBuilder
1.操作步骤
双击打开----新建项目
2.打开index.html
因为目前我们没有写入任何其他内容，所以里面只有简单的结构
二、基本语法的概述
1.html标签是由尖括号包围着关键字，例如：<html>
2.标签的分类
①双标签：html的标签通常是成对出现，称为双标签；标签中出现的第一个标签称为开始标签，最后一个称为结束标签
列如：<html>........</html>
1.标签介绍
双标签的关系可以分为两类：包含关系和并列关系
包含关系（父子关系）：
<head>
<title></title>
</head>
并列关系（兄弟关系）：
<head>
头部标签
</head>
<body>
主题标签
</body>2.基本html结构
- <html></html>:html标签，页面中最大的标签；页面内容在里面写
- <head></head>:文档的头部，主要在head标签中我们必须设置文档标签
- <title></title>:文档的标题,使页面有自己的网页标题
- <body></body>:文档的主体，元素包含文档中的所有内容，页面的内容基本都是放到body中
注意html文档必须是.html或者.htm结尾，浏览器读取html文档，并以网页的形式展示。
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>以上是html的基本结构图
三、常见的标签
1.标签语义
根据标签的语义我们可以在不同的地方使用，使用一个合理的标签，可以让我们的页面看起来更整洁；
以下是一个没有语义标签的文章；看起来杂乱无章
接下来是一个使用了正确的语义标签的文章，同上对比我们可以看到整洁的文章，标题清晰可见
同样的一篇文章就看我们如何的去正确的使用其中的语义；让我们一起学习简单的标签使用吧！！
四.标签使用
1.标题标签
标题标签：见名知意，就是对标题使用的标签
分为六个标签，从上倒下依次排列大小：
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>效果如下：
特点：
- 加了标题标签文字会变粗，字号页会变大
- 一个标题独占一行
2.段落标签
段落标签：见名知意，就是对段落使用的标签；可以把html中的文章分割成若干个段落
<p>喜羊羊与灰太狼，熊出没 是两个不同的电视剧</p>
<p>喜羊羊与灰太狼，熊出没 是两个不同的电视剧</p> 
特点：
1.文本在段落中会根据浏览器的窗口大小自动换行
2.段落和段落之间有保持空隙
3.换行标签
<p>喜羊羊与灰太狼<br>
熊出没<br>
是两个不同的电视剧</p>效果展示：
特点：
- <br/> 或者<br>是一个单标签，
- <br>标签开始另一行，跟段落不一样，段落之间会插入一些垂直的间距；
4.文本格式化标签
粗体标签b、strong
特点：
- <b> 和<strong> 是HTML 中格式化粗体文本的最基本元素。
- 在<b> 和</b> 之间的文字或在<strong> 和</strong> 之间的文字，在浏览器中都会以粗体字体显示
- 首尾部分都必须有该元素，如果没有结尾标签，则浏览器会认为从<b> 开始的所有文字都是粗体。
- <b> 和<strong> 是行内元素，它可以插入到一段文本的任何地方。
基本格式如下：
<b>加粗的文字</b> <br />
<strong>加粗的文字</strong> 效果如下：
斜体标签i、em、cite
特点：
- <i>、<em> 和<cite> 是HTML 中格式化斜体文本的最基本元素。
- 在<i> 和</i> 之间的文字、在<em> 和</em> 之间的文字或在<cite> 和</cite> 之间的文字，在浏览器中都会以斜体字体显示。
基本格式如下：
<i>斜体字体</i> <br />
<em>斜体字体</em> <br />
<cite>斜体字体</cite> <br />效果如下：
删除线标签:<del></del> <s></s>
<del>删除标签</del>
<s>删除标签</s>
下划线标签:<ins>文字</ins> <u>文字</u>
<ins>下划线标签</ins> <u>>下划线标签</u>
效果如下：
5.div和span标签
<div>和<span>标签是没有语义的，只是一个盒子，使用装内容的；
特点：
- div标签是用来布局的，但是下载一行只能放一个div。大盒子
- span标签是用来布局的，一行可以使用多个span，小盒子
6.图像标签
特点:
- 图像标签可以拥有多个属性，必须写在标签名的后面
- 属性之间不分先后顺序，标签名与属性，属性与属性之间空格分开
- 属性采取键值对的格式，既：key="value"的格式，属性="属性值"
重点掌握点：
标签的属性名必须写；
alt和·title属性的区别？
7.路径
①根路径：打开目录文件的第一层就是根目录
代码示例：
"/aaa" //表示跟目录下的aaa
"../aaa" //表示当前目录的上级目录下的aaa
"bbb/aaa" //表示当前目录的bbb目录下的aaa
②HTML之绝对路径与相对路径
相对路径：
相对路径是指目标相对于当前文件的路径，网页结构设计中多采用这种方法来表示目标的路径。相对路径有多种表示方法，其表示的意义不尽相同。
表示方法如下：
./ ：代表文件所在的目录（可以省略不写）
../ ：代表文件所在的父级目录
../../ ：代表文件所在的父级目录的父级目录
/ ：代表文件所在的根目录注意：（/ ：代表文件所在的根目录）其实可以理解成项目内部的绝对路径。
举例：
如果要在1.html中引入000.css，可以有以下写法：
<linkhref="./css/css1/000.css"/> (./可以省略)
<link href="/html/css/css1/000.css"/>
<link href="../html/css/css1/000.css"/>
绝对路径
绝对路径是指完整的网址，假设图一中项目的网站域名为www.quanbaike.com，那么000.css的绝对路径应该是 https://www.quanbaike.com/html/css/css1/000.css
8.超链接标签
语法：<a href="跳转目标" target="目标窗口跳出的方式"> 超链接 </a>
属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a标签</title>
</head>
<body>
<a href="http://c.biancheng.net/" target="_blank">C语言中文网（新窗口打开）</a>
<a href="http://c.biancheng.net/">C语言中文网（现有窗口打开）</a>
</body>
</html>效果如下：
href 属性指定链接的目标，也就是要跳转到什么位置。href 可以有多种形式，例如：
- href 可以指向一个网页（.html、.php、.jsp、.asp等格式），这也是最常见的形式，例如 href="http://c.biancheng.net/view/1719.html"；
- href 可以指向图片（.jpg、.gif、.png 等格式）、音频（.mp3、.wav等格式）、视频（.mp4、.mkv格式）等媒体文件，例如 href="/uploads/allimg/181221/134I32557-0.jpg"；
- href 可以指向压缩文件（.zip、.rar等格式）、可执行程序（.exe）等，一些下载网站的链接就可以写成这种形式，例如 href="./../uploads/data_package/ComputerFoundation.zip"；
- href 甚至还可以指向本机的文件，只是很少这样使用，例如 href="D:/Program Files/360/360safe/360Safe.exe"。
超链接类型
* 内部链接：同一网站文档之间的链接。
* 外部链接：不同网站文档之间的链接。
空链接：如果我们暂时没有跳转的连接，就可以使用 “ # ”，如：<a href="#"></a>
下载链接：如果href里面的地址是一个文件或者压缩包，会下载这个文件；
* 锚点链接：同一网页或不同网页中指定位置的链接。
当我们点击连接时，可以快速的定位到页面的某一个位置
使用方法：
在链接文本的href属性中国，属性值可以设置为#名字的形式，如：<a href="#o">...</a>
找到目标位置标签，在标签中添加一个id属性=刚才的名字，如：<h3 id="o"> </h3>
9.特殊字符
- 表示 空格
- & 表示 &
- < 表示 <
- > 表示 >
- " 表示 "
- &qpos; 表示 '
总结
重点：图像的使用及其属性
超链接瞄点的使用
这里简单的学习了一些标签的使用，接下来自己尝试使用标签去打一个简单的小项目，测试自己学习的结果吧！
432
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
