HTML 学习笔记 （第二单元）

第二单元 常见HTML标签以及属性

第一节课

如何在网页中实现标题

标题的英文 Heading
标题可分为六级，用h1-h6表示
基本语法格式

<hn>标题文本</hn>

n可以是1、2、3、4、5、6
标题文字自动加粗，依次减小；

<h1>是最大标题，<h6>是最小标题。

HTML属性

语法格式
<标签名 属性1=“属性值1” 属性2=“属性值2”>内容</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”/>
注意点：
1.属性和属性值放在开始标签中
2.标签名与属性之间空格隔开
3.属性和属性值“=”连接
4.属性值放在引号中–单引号、双引号

HTML标题标签属性

基本语法格式

<hn  align="属性值">标题文本</hn>

对齐方式

文本水平对齐方式 align
左对齐 （默认值）：left
居中对齐：center
右对齐：right

36000.png

语法格式检测

关于实现HTML标题居中效果的语法格式正确的是：B

>

<

第二课

<b>、<i>、<u> 标签

465456.png
实现文字 既加粗又倾斜 效果

    <b>、<i>、<u>标签嵌套应用，可以使文字有多种显示效果。
    例：<i><u>文字内容</u></i>

加粗标签：

<b></b>
<strong></strong>

倾斜标签：

<i></i>
<em></em>

下划线：

<u></u>

<font> 标签

如何修改网页中文字的颜色和大小?
如何使用 <font> 标签
<font> 标签是规定文本的字体尺寸、字体颜色的标签。
基本语法格式

<font>文字</font>
<font  color="颜色"  size="大小">文字</font>

颜色值可以使用英文单词、十六进制、RGB表示
size表示大小，数值从 1 到 7

思路分析 - font标签

第一步：书写基本结构 — <font>标签、<i>标签
第二步：设置标签的属性 — color属性、size属性。

注意：font 在HTML4标签 在HTML5中是属性

<hr> 标签

hr 是 Horizontal Rule 的缩写
hr 标签被用来分隔 HTML 页面中的内容，并显示为一条水平线。

语法格式：

<hr />
<hr color=”颜色” width=”宽度”size=”粗细” align=”水平对齐方式” />

（说简单点就是画条线）

标签属性：

颜色：color
粗细：size
宽度：width
水平对齐方式：align = center（默认中间）、left、right

6OB8FF.png

注意：多个属性之间顺序没有要求，不分先后。

小结

lp.png

第三节

在网页中实现段落

<p> 标签

段落通过 p 标签实现，英文是 paragraph
p 标签是一个双标签

语法格式：

<p>内容</p>

标签属性
水平对齐属性：用align来表示。
包括左、中、右 三种对齐方式。

语法格式：

<p  align=“center">标题文本</p>

align对齐的属性值：
leftr 文本左对齐（默认）
center 文本居中对齐
right 文本右对齐

p 标签特点
段落会自动换行
段落与段落之间有空隙

<br> 标签

换行标签用 br 表示，英文是 break
br 标签是一个单标签
语法格式

<br/>

段落和换行的区别
p 标签使段落之间有空隙 br 标签则没有
p 标签用来给分段 br标签用来换行

<img> 标签

图片是通过 img 标签插入网页的，image的英文意思是图像。
img 标签是单标签

语法格式：

<img  />

标签属性：

img 
<img   src='图片路径'  title='提示信息' alt='提示信息' height='高度     'width='宽度'    border='边框'  />

P69PTMF2I.png

图片标签：

 <img src = "" alt = "" >
图片路径：src

高度：height
边框：border
宽度：width
鼠标滑过提示文字：title
图片加载异常显示：alt

插入图片：

插入图片 — img 标签
设置属性 — src、width、height、border。

小结

0E.png

第四课

路径的定义

路径是磁盘上查找文件所历经文件夹的路线。
例如：D:/img/myPhoto.png
斜线（/）冒号（:）
语法结构
路径分为绝对路径和相对路径

绝对路径是完整的描述文件位置的路径。
  1. 以盘符为起点
  2. 网址

例如：
D:/img/myPhoto.png
或
https://www.baidu.com/search/search.jpg

相对路径是指目标相对于当前文件的路径。

语法格式
img/myPhoto.png
或
../search/search.jpg

注意点：

../ 表示当前文件的上一级目录
../../ 表示当前文件的上上级目录

显示特殊字符 （转义字符）

转义字符串

转义字符串是字符组合，用来解决无法在网页中正常显示的字符。

在英文状态下：
以“&”号开头
以“；” 结尾
图片21.png

转义字符：

一个空白位 &emsp;
英文半角空格 &nbsp;
小于号 &lt;
大于号 &gt;
版权 &copy;
注册 &reg;

(Markdown语法同理)

注释方法

<!- - 注释的内容 - ->
注释就是注释见名知意懂得都懂不多叙述

概念图总结

7Y.png

第二单元完！