基础知识
1. HTML 标签通常是成对出现的,例如 <html> 和 </html> ,我们称为双标签。标签对中的第一个标签是 开始标签,第二个标签是结束标签。
2. 有些特殊的标签必须是单个标签(极少情况),例如 <br />,我们称为单标签。
3. HTML 文档的的后缀名必须是 .html 或 .htm
4. <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。
5. <!DOCTYPE>不是一个 HTML 标签,它就是 文档类型声明标签。
6. 字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。
7. 在<head>标签内,可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
<meta charset=" UTF-8" />
8. <!DOCTYPE html> 文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.
9. <html lang=“en”> 告诉浏览器或者搜索引擎这是一个英文网站. 本页面采取英文来显示.
10. <meta charset=“ UTF-8” /> 必须写. 采取 UTF-8来保存文字. 如果不写就会乱码.具体原理后面分析
标题标签
<h1> -<h6>
标签语义:作为标题使用,并且依据重要性递减。(随着数字的增大,字体大小减小)
特点:
加了标题的文字会变的加粗,字号也会依次变大。
一个标题独占一行
标签用于定义段落
<p>
<p> 我是一个段落标签 </p>
标签语义:可以把 HTML 文档分割为若干段落。
特点:
文本在一个段落中会根据浏览器窗口的大小自动换行。
段落和段落之间保有空隙。
换行标签
<br />(单标签)
标签语义:强制换行。
特点:
<br /> 是个单标签。
<br /> 标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距,间距比段落标签<p>小。
文本格式化标签
加粗 <strong> </strong> 或 <b> </b>
斜体 <em> </em> 或 <i> </i>
删除线 <del> </del> 或 <s> </s>
下划线 <ins> </ins> 或 <u> </u>
div> 和<span>标签
<div> 和 <span> 是没有语义的,它们就是一个盒子,用来装内容的。
特点:
①. <div> 标签用来布局,但是现在一行只能放一个<div>。 大盒子
②. <span> 标签用来布局,一行上可以多个 <span>。小盒子
图像标签和路径
src 是<img>标签的必须属性,它用于指定图像文件的路径和文件名。
<img src="xx.jpg" title="xxx" alt="xxx图片" width="100px" height="100px" border="1"/>
图像标签属性注意点:
① 图像标签可以拥有多个属性,必须写在标签名的后面。
② 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
③ 属性采取键值对的格式,即 key=“value" 的格式,属性 =“属性值”。
目录文件夹:就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如 html 文件、图片等。
根目录:打开目录文件夹的第一层就是根目录
路径问题
相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。
同一级路径 图像文件位于HTML文件的同一级 <img src="xxx.jpg" >
下一级路径 / 图像文件位于HTML文件的下一级 <img src="XXX/xxx.jpg" >
上一级路径 ../ 图像文件位于HTML文件的下一级 <img src="XXX../xxx.jpg" > 如果有多个上一级可以使用多次../
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
例如,“D:\web\img\logo.gif”或完整的网络地址
“http://www.itcast.cn/images/logo.gif”。
(注意!!!!)相对路径和绝对路径的斜杠方向相反
链接分类:
1. 外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >。
2. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如 < a href="index.html"> 首页 </a >。
3. 空链接: 如果当时没有确定链接目标时,< a href="#"> 首页 </a > 。
4. 下载链接: 如果 href 里面地址是一个文件或者压缩包,会下载这个文件。
5. 网页元素链接: 在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.
6. 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
在链接文本的 href 属性中,设置属性值为 #名字 的形式,如<a href="#two"> xxx </a>
找到目标位置标签,里面添加一个 id 属性 = 刚才的名字 ,如:<h3 id="two">xxx</h3>
注释
HTML中的注释以“<!--”开头,以“ -->”结束
特殊字符
重点记住:空格 、大于号、 小于号 这三个,
空格  
小于号 <
大于号 >