html自用笔记

关于前端Html---一个小白笔记!


网页文本与段落排版
插入其它标记
空格符号
可以用许多不同的方法来分开文字,包括空格、标记和回车(即按Enter键)。这些都被称为空格,因为他们可以增加字与字之间的距离。

基本语法:

 

语法说明:

在网页中可以有多个空格,输入一个空格使用“ ”表示,输入多少个空格就添加多少个“nbsp;”。

实例代码:

<!doctype html>

输入空格符

一个人的涵养,不在心平气和的时,而是心浮气躁时; 一个人的理性,不在风平浪静时,而是众声喧哗时;一个人的慈悲,不在居高临下时,而是人微言轻时; 情侣之间的尊重,不在闲情逸致时,而是观点左右时;夫妻间的恩爱,不在花前月下时,而是大难临头使。

2.特殊符号

除了空格以外,在网页的制作过程中,还有一些特殊的符号也需要使用代码进行代替。一般情况下,特殊符号的代码由前缀“&”、字符名称和后缀“;”组成。使用特殊符号可以将键盘上没有的字符输出来。

基本语法:

&…&copy

语法说明:

在需要添加特殊符号的地方添加相应的符号代码即可。常用符号及其对应代码如表所示。

特殊符号

符号代码

"

&

&

<

<

>

x

×

§

&sect

©

&copy

®

®

TM

2.设置文字的格式
face属性
face属性规定的是字体的名称,如中文字体的 宋体、楷体、隶书等。face属性用于设置文本所采用的字体名称,使用者的浏览器中只有安装了设置的字体后,才可以正确显示,否则这些特殊字体就会被浏览器中的普通字体所代替。

基本语法:

语法说明:

face属性用于定义该段文本所采用的字体名称。如果浏览器能够在当前系统中找到改字体,则使用该字体显示。

实例代码:

<!doctype html>

设置字体

如何成为一个内心强大的人?

成长就是不断挣扎与折腾

坚持是为了什么?

2.size属性

文字的大小也是字体的重要属性之一。HTML语言提供了标记的size属性来设置普通文字的字号。

基本语法:

语法说明:

size属性用来设置字体大小,他有绝对和相对两种方式。size属性通常有1到7个等级,1级最小,7级的字体最大,默认的字体大小是3号字。可以使用“size=?”定义字体的大小。(标记和它的属性可以影响周围的文字,该标记可应用于文本段落、句子和单词,甚至单个字母)

实例代码:

<!doctype html>

设置字体

如何成为一个内心强大的人?

成长就是不断挣扎与折腾

坚持是为了什么?

3.color属性

在HTML页面中,还可以通过不同的额颜色表现不同的文字效果,从而增加页面的亮丽色彩,吸引浏览者的注意。

基本语法:

语法说明:

它可以用浏览器承认的颜色名称和十六进制数值表示

实例代码:

<!doctype html>

设置字体

如何成为一个内心强大的人?

成长就是不断挣扎与折腾

坚持是为了什么?

4.b、strong、em、u标记

是HTML中格式化粗体文本的最基本元素。在之间的文字或在之间的文字,在浏览器中都会以粗体字显示。该元素的首尾标记都是必需的,如果没有结尾标记,则浏览器会认为从开始的所有文字都是粗体。

基本语法:

加粗的文字

加粗的文字

语法说明:

在该语法中,粗体的效果可以通过标记实现,也可以通过实现。是行内元素,它可以插入到一段文本的任何位置。

是HTML中格式化斜体文本的最基本元素。在之间的文字、在之间的文字或之间的文字,在浏览器中都会以斜体字体显示。

基本语法:

斜体字体

斜体字体

斜体字体

下划线的内容

实例代码:

<!doctype html>

设置粗体、斜体、下划线:strong、em、u

一生应该遗忘的十种人

人生需要看透,但不能看破

走进内心深处的活法

5.sup与sub标记

sup(上标文本)标记、sub(下标文本)标记都是HTML的标准标记,尽管使用的场合比较少,但是在数学等式、科学符号和化学公式中经常会用到。

基本语法:

上标内容

下标内容

语法说明:

中的内容的高度和以前后文本流定义的高度一半进行显示,sup文字上端和前面文字的上端对齐,但是与当前文本流定义的字体和字号都是一样的。

中的内容的高度和以前后文本流定义的高度一半进行显示,sup文字下端和前面文字的下端对齐,但是与当前文本流定义的字体和字号都是一样的。

实例代码:

<!doctype html>

设置上标与下标

A2+B2=(A+B)2-2AB

H2SO4化学方程式硫酸分子

3.设置段落的格式
p标记
基本语法:

段落文字

语法说明:

段落标记可以没有结束标记

,而每一个新的段落标记开始的同时也意味着上一个段落的结束。

<!doctype html>

段落标记

回头看看,还有多少人一直陪在身边;用心数数,还有几份情坚持着不离散。有缘的人不是说的,而是默默陪伴;无缘的情不是夸的,却是早已不见。

不听信海枯石烂的誓言,只要睁开眼一切都没变;不相信天荒地老的永远,只要伸出手有把握的暖。

谁陪你跨过一年又一年;谁对你不改初衷永如初见!好朋友,永不说分手;真感情,一生都相守!

2.段落对其属性align

在默认的情况下,文字是左对齐的。而在网页制作过程中,往往需要选择其他对齐方式。关于对齐方式的设置要使用align参数进行设置。

基本语法:

<align=对齐方式>

语法说明:

在该语法中,align属性需要设置在标题标记后面,其对齐方式的取值如表。

属性值

含义

left

左对齐

center

居中对齐

right

右对齐

代码实例:

<!doctype html>

段落的对齐属性

无所谓时空,牵挂一直变!

真正的朋友交的是心,连的是情

善待朋友,珍惜拥有

3.nobr标记

在网页中如果某一行的文本过长,浏览器会自动对这段文字进行换行处理。可以使用nobr标记来禁止自动换行。

基本语法:

不换行文字

实例代码:

<!doctype html>

段落的对齐属性

一见钟情,只是一个传说;日久生情,才是真拥有。没有天生适合的两个人,只有后来磨合的两颗心;没有一世不变的激情,只有一生不悔的深情。知道让步不是认输,而是在乎;懂得原谅不是没生气,而是放不下。

4.br标记

在HTML文本显示中,默认是将一行文字连续的显示出来,如果想把一个句子后面的内容在下一行显示就会用到换行符
。换行符标记是个单标记,也叫空标记,不包含任何内容。在HTML文件中的任何位置,只要使用了
标记,当文件显示在浏览器中时,该标记之后的内容就将在下一行显示。

基本语法:


4.水平线标记
hr标记:hr是水平线标记,用于在网页中插入一条水平标尺线,使页面看起来整齐明了。
基本语法:


实例代码:

<!doctype html>

插入水平线

该放弃的放弃,造就理性的自己


一见钟情,只是一个传说;日久生情,才是真拥有。没有天生适合的两个人,只有后来磨合的两颗心;没有一世不变的激情,只有一生不悔的深情。知道让步不是认输,而是在乎;懂得原谅不是没生气,而是放不下。

2.水平线宽度与高度属性:width、size

在默认情况下,水平线的宽度为100%,也可以使用width手动调整水平线的宽度。size标记用于改变水平线的高度。

基本语法:



语法说明:

在该语法中,水平线的宽度值可以是确定的像素值,也可以是窗口的百分比。水平线的高度只能使用绝对像素来定义。

实例代码:

<!doctype html>

设置水平线宽度高度属性值

该放弃的放弃,造就理性的自己


一见钟情,只是一个传说;日久生情,才是真拥有。没有天生适合的两个人,只有后来磨合的两颗心;没有一世不变的激情,只有一生不悔的深情。知道让步不是认输,而是在乎;懂得原谅不是没生气,而是放不下。

3.水平线颜色属性color

基本语法:


4.水平线的对齐方式属性align

基本语法:


5.水平线去掉阴影属性noshade

默认的水平线是空心立体效果,可以将其设置为实心且不带阴影的水平线。

基本语法:


语法说明:

noshade是布尔值的属性,他没有属性值,如果在


元素中写上了这个属性,则浏览器不会显示立体形状的水平线;反之则无需设置该属性,浏览器默认显示一条立体形状带有阴影的水平线。

5.使用marquee设置滚动效果
滚动字幕的使用使得整个网页更有动感,显得很有生气。现在的网站中也越来越多到使用滚动字幕来加强网页的互动性。用JavaScript编程可以实现滚动字幕效果;用层也可以做出非常漂亮的滚动字幕。而用HTML的滚动字幕标记所需的代码较少。

marquee标记及其属性
使用marquee标记可以将文字、图片等设置为动态滚动的效果。

基本语法:

<marquee

aligh=left|right|up|bottom

bgcolor=#n

direction=left|right|up|down

behavior=type

height=n

hspace=n

scrollamount=n

scrolldelay=n

width=n

VSpace=n

loop=n>

语法说明:

只要在标记之间添加进行滚动的文字即可。而且可以在标签之间设置这些文字的字体、颜色等。

marquee标记的属性及其说明如表所示。

属性

说明

direction

文字滚动方向,滚动方向可以包含4个取值,分别为up、down、left和right

behavior

设置文字滚动的方式,可以取值scroll、slide、alternate。scroll:循环滚动,默认效果;slide:之滚动一次就停止;alternate:来回交替进行滚动

loop

循环设置

scrollamount

滚动速度

scrolldelay

滚动延迟

bgcolor

滚动文字的背景设置

width、height

滚动背景面积

hspace、vspace

设置空白空间

使用marquee插入滚动公告

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值