第二章:常见HTML标签以及属性

 张良   2022-11-08 09:36 

HTML由标签构成:标签包含标题,段落,图片,水平线,还有HTML属性


如何在网页中实现标题?


标题的英文 Heading

标题可分为六级,用H1-H6表示

基本语法格式:

<hn>表一文本</hn>

n可以使1、2、3、4、5、6

1、标题文字自动加粗,依次减小;

2、<h1>是最大标题,<h6>是最小标题

属性:

<h1 对齐方式=“居中”>内容</h1>

HTML属性定义:

<标签名 属性1=“属性值1” 属性2=“属性值2”>内容</标签名>

HTML属性是描述标签,HTML属性书写的位置是开始标签


HTML属性:

HTML属性是标签的附加信息,对标签的进一步描述。

语法格式:

<标签名 属性1=“属性值1” 属性2=“属性值2”>内容</标签名>

<标签名 属性1=“属性值1 ” 属性2=“属性值2” />

注意点:

1.属性和属性值放在开始标签中

2.标签名和属性之间空格隔开

3.属性和属性值 = 链接

4.属性值放在引号中---单引号、双引号

HTML属性的语法特点:

开始标签有属性,两者之间加空格,属性与值等号连,属性值外用引号


HTML标题标签属性


align属性是设置文本水平对齐的属性

基本语法格式:

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

n可以是1/2/3/4/5/6

align属性的值,left左对齐(默认值) center居中对齐 right右对齐


如何在内容中实现对文字的加粗、倾斜、下划线?


<b><i><u>标签

<b>文本</b>实现文本加粗效果

<i>文本</i>实现文本倾斜效果

<u>文本</u>实现文本下划线效果

<b><i><u>标签嵌套应用,可以使文字有多种显示效果。

讲究对称性-里对里、外对外


如何修改网页中文字的颜色和大小?


<font>标签是规定文本的字体尺寸、字体颜色的标签

基本语法格式:

<font>文字</font>

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

*颜色值可以使用英文单词、十六进制、RGB表示

size表示大小,数字从1-7


如何在网页中实现水平线?


<hr>是Horizontal Rule的缩写

<hr>标签被用来分割HTML页面中的内容,并显示为一条水平线

语法格式:

<hr />

<hr>标签属性:

align水平对齐方式:center left right

color水平线颜色:英文单词、#xxxxxx、RGB(x,x,x)

size水平线粗细:数值

width水平线宽度:属性值或者百分比


如何在网页中实现段落?


段落通过<p>标签实现,英文是paragraph

<p>标签是一个双标签

基本语法格式:

<p> 内容</p>

水平对齐属性:用align来表示

包括左、中、右,三种对齐方式

基本语法格式:

<p align="value">标题文本</p>

align对齐的属性值:

*left:文本左对齐

*center:文本居中对齐

*right:文本右对齐


<p>标签特点:

*段落会自动换行

*段落与段之间有空隙


如何实现段内换行?


换行标签用br表示,英文是break

<br>标签是一个单标签

基本语法格式:

<br/>

*<p>标签使段落之间有空隙

<br>标签则没有

*<p>标签用来给分段

<br>标签用来换行


为什么使用<strong><em>标签


<strong><em>标签目的都是强调,利于搜索引擎检索

加粗

<b></b>加粗文本

<strong></strong>强调语气,效果加粗文本

倾斜

<i></i>倾斜文本

<em></em>加强语气,效果为倾斜文本


如何使用<img>标签?


图片是通过<img>标签插入网页的,image的英文意思是图像

<img>标签是单标签

基本语法格式:

<img />


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

src图片的载入路径

alt非正常显示时的提示文字

title鼠标移到图片上显示提示文字

width图片宽度(单位:像素)

height图片高度(单位:高度)

border图片的边框(单位:像素)


什么是路径?


路径是磁盘上查找文件所历经文件夹的路线

如:D:/img/myphoto.png


什么是绝对路径?


绝对路径是完整的描述文件位置的路径

1.以盘符为起点

2.网址

语法格式:
D:/img/myphoto.php

http://www.yinmoulun.com


什么是相对路径?


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

语法格式:

img/myphoto.png

../search/search.jpg

注意点:

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

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

相对路径与绝对路径的对比:

绝对路径,直观明了,便于搜索,但不易移植,是以盘符或http为起点

相对路径,便于整站移植,但需要计算目标文件的相对位置,是以当前文件为起点


如何在网页中显示特殊字符?


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

在英文状态下:

1.以 & 号开头

2.以 ; 号结尾


&lt < 小于号

&gt > 大于号

&amp & 可用于显示其它特殊字符

&quot " 引号

&reg 已注册

&copy 版权

&trade 商标

&ensp 半个空白位

&emsp 一个空白位

&nbsp 不断行的空白


如何添加代码注释?


注释用于解释说明代码的用途

注释里面的内容,浏览器不执行、不解析、不显示。

基本语法格式:

<!-- 注释的内容 -->

说明:注释标签不能嵌套


双标签:

<h1>~<h6>    标题

<b>    加粗

<i>    倾斜

<u>    下划线

<font>    字体

<p>    段落


单标签:

<hr>    水平线

<br>    换行

<img>    图片


HTML包括

路径分为:相对路径和绝对路径

转义字符

注释


HTML属性:


<h1>~<h6>标签属性

<p>标签属性

align    水平对齐


<font>标签属性:

colo    r颜色

size    字体大小



<hr>标签属性:

width    宽度

size     粗细

color    颜色

align    水平位置


<img>标签属性:

src    图片路径

widht    宽度

height    高度

border    边框

title    提示信息

本文地址:https://www.yinmoulun.com/post/361.html,发布在阴谋论网,欢迎分享!

评论已关闭!