这一周完成了pink老师两章的内容:HTML简介和HTML标签(上)的内容。
重点主要是HTML标签(上)的内容,他从HTML语法规范、HTML基本结构、开发工具、HTML常用标签、HTML中的注释和特殊字符这五个方面进行讲解。
一、HTML语法规范
HTML语法规范分成基本语法概述和标签关系两个内容。HTML标签是由尖括号包括的关键词,通常是成对出现,但有些特殊的标签是单个标签,如<br />。标签关系分为包含关系和并列关系。
二、HTML基本结构
HTML基本结构分为HTML标签(页面中最大的标签,被称为根标签)<html></html>,文档的头部<head></head>,文档的标题<title></title>,文档的主体<dody></body>。
三、HTML常用标签
最重要的是HTML常用标签,非常多同时要理解性的记忆。有标题标签、段落和换行标签、文本格式化标签、<div>和<span>标签、图像标签和路径、超链接标签。
(一)标题标签
1.表示形式:<h1>我是一级标题</h1>
2.特点:加了标题的文字会变得加粗,字号也会依次变小;一个标题独占一行。
(二)段落和换行标签
1.段落标签
(1)表示形式:<p>我是一个段落标签</p>
(2)特点:段落与段落之间保有空隙;文本在一个段落中会根据浏览器的大小自动换行。
2.换行标签
(1)表示形式:<br />
(2)特点:是单标签
3.段落和换行标签的区别
<br />标签知识简单地开始新的一行,而段落之间会插入一些垂直的间距。
(三)文本格式化标签
1.目的:为文字设置粗体、斜体或下划线等效果。
2.标签表示形式
※(1)加粗:<strong>文字</strong>或<b>文字</b>
※(2)倾斜:<em>文字</em>或<i>文字</i>
(3)删除线:<del>文字</del>或<s>文字</s>
(4)下划线:<ins>文字</ins>或<u>文字</u>
(四)<div>和<span>标签
1.表现形式:
(1)<div>这是头部</div>
(2)<span>今日</span>
2.特点
(1)<div>标签用来布局,但现在一行只能放一个<div>。大盒子
(2)<span>标签用来布局,一行上可以放多个<span>。小盒子
(五)图像标签和路径
1.图像标签
(1)表现形式:<img src="图像URL" />,img为标签名。
(2)作用:用于定义HTML页面中的图像。
(3)注意:src是<img>标签的必须属性(属性:属于这个图像标签的特性),它用于指定图像文件的路径和文件名。
(4)图像标签的其他属性
(5)注意点:
①图像标签可以拥有多个属性,必须写在标签名的后面。
②属性之间不分先后顺序,标签名与属性、属性与属性之间均已空格隔开。
③属性采取键盘值对的格式,即key="value"的格式,属性="属性值"。
④重点注意图像标签alt和title属性的区别。
2.路径
(1)目录文件夹和根目录
1.目录文件夹:就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,如html文件、图片等。
2.根目录:打开目录文件夹的第一层就是根目录。
(2)路径(分为相对路径、绝对路径)
1.作用:指定图像文件的位置。
2.相对路径
①概念:以引用文件所在位置为参考基础,而建立出的目录路径。(图片相对于HTML页面的位置)
②相对路径分类
※相对路径是从代码所在的这个文件出发,去寻找目标文件,同一级、上一级、下一级是图片相对于HTML页面的位置。
3.绝对路径
①概念:是指目录下的绝对位置,直接到达位置,通常是从盘符开始的路径。
②例子:"D:\web\img\logo.gif"或完整的网络地址"http://www.incast.cn/images/logo.gif"。
(六)超链接标签
(1)<a>标签用于定义超链接;作用:从一个页面链接到另一个页面。
①链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
②两个属性的作用
③链接分类
※注意!!外部链接的href必须要是http://开头+web网址。
四、HTML中的注释和特殊字符
(一)注释
1.表示方式:<!--注释语句--> 快捷键:ctrl+ /
2.这个代码是不执行不显示在页面的,只是为了更好地理解。
(二)特殊字符
例如:①要显示出<标题>
表示形式: <标题>
②标 题
表示形式:标&nbsq; &nbsq;&nbsq; 题
重点记忆!!空格符、小于号、大于号