HTML基本理解day2 | 青训营笔记

150 阅读5分钟

这是我参与「第四届青训营 」笔记创作活动的的第2天

HTML常用标签

在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示,在HTML标签中,< p>标签用于定义段落,它可以将整个网页分为若干个段落。

< p>我是一个段落标签 < /p >

单词paragraph ['paregraef] 的缩写,意为段落。标签语义:可以把HTML文档分剂为若干段落。 特点:

1.文本在一个段落中会根据浏览器窗口的大小自动换行。

2.段落和段落之间保有空掉。

1.1 段落和换行标签(重要)

在HTML中,一个段落中的文字会从左到右依次排列,直到刘览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签< br/> < br />

单词 break的缩写,意为打断、换行。标签语义: 强制换行

特点:

1.< br/>是个单标签。

2.< br/>标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。

1.2 文本格式化标签

image.png

1.3 < div>和< span>标签

< div>和< span>是没有语义的,它们就是一个盒子,用来装内容的

< div> 这是头部 < /div>< span> 今日价格< /span>

div是division的缩写,表示分割、分区。span意为跨度、跨距。

特点:

1.< div>标签用来布局,但是现在一行只能放一个< div>。大盒子

2.< span>标签用来布局,一行上可以多个< span>。小盒子

1.4 图像标签和路径(重点)

在HTML标签中,< img>标签用于定义HTML页面中的图像。

< img src="图像URL" />

单词image的缩写,意为图像。

src 是< img>标签的必须属性,它用于指定图像文件的路径和文件名。所谓属性: 简单理解就是属于这个图像标签的特性。

image.png

1.4.1路径之相对路径

图像标签属性注意点:

1)图像标签可以拥有多个属性,必须写在标签名的后面。

2)属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。属性采取键值对的格式,即key=“value"的格式,属性=“属性值”。

重点掌握点:

请说出图像标签哪个属性是必须要写的?

请说出 图像标签中alt和title属性区别? 相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。这里简单来说,图片相对于HTML页面的位置

    相对路径分类                    符号                               说明 

同一级路径 图像文件位于HTML文件同一级 如 < img src="baidu.gif"/>

下一级路径 图像文件位于HTML文件下一级 如 < img src="images/baidu.gif"/>。

上一级路径 ../ 图像文件位于HTML文件上一级 如 < img src="../baidu.gif"/>。

相对路径是从代码所在的这个文件出发,去寻找目标文件的,而我们这里所说的上一级、下一级和同一级就是图片相对于 HTML 页面的位置。

1.4.2路径之绝对路径

绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。 例如,“D:\web\img\logo.gif”或完整的网络地址“www.itcastcn/images/logo…

1.5 超链接标签(重点)

< a href=" "target="目标窗口的弹出方式">文本或图像 </ a>

单词anchor['ænke(r)]的缩写,意为:锚。

两个属性的作用如下:

href 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能

target 用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开方式。

1.6 HTML中的注释和特殊字符

1.外部链接:例如<ahref="www.baidu.com>百度</ a>。

2.内部链接:网站内部页面之间的相互链接直接链接内部页面名称即可,例如< a href="indexhtml">首页</ a>。

3.空链接:如果当时没有确定链接目标时,<ahref="#">首页</ a>。

4.下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件。

5.网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。

6.锚点链接:点我们点击链接,可以快速定位到页面中的某个位置.

在链接文本的href属性中,设置属性值为#名字的形式,如< a href="#two">第2集</ a>

找到目标位置标签,里面添加一个id属性=刚才的名字,如:< h3 id="two">第2集介绍

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。HTML中的注释以“< !--”开头,以“ -->”结束。< !-- 注释语句 --> 快捷键:ctrl+ /

一句话:注释标签里面的内容是给程序猿看的,这个代码是不执行不显示到页面中的

添加注释是为了更好地解释代码的功能,便于相关开发人员理解和阅读代码,程序是不会执行注释内容的。 image.png

表格标签

表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

< table>

< tr>

< td>单元格内的文字< /td>

< /tr>

< /table>

1.< table>< /table>是用于定义表格的标签。

2.< tr>< /tr>标签用于定义表格中的行,必须嵌套在< table>< /table>标签中

3.< td>< /td>用于定义表格中的单元格,必须嵌套在标签中。

4.字母td指表格数据(tabledata),即数据单元格的内容。

1.2表头单元格标签

一般表头单元格位于表格的第一行或第一列 表头单元格里面的文本内容加粗居中显示. < th>标签表示HTML表格的表头部分(tablehead的缩写)

< table>

< tr>

< th>姓名< /th>

< /tr>

< /table>

个人信息表

姓名性别 电话

小王 女 110

小明 男 120