iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >如何快速入门HTML
  • 886
分享到

如何快速入门HTML

2024-04-02 19:04:59 886人浏览 泡泡鱼
摘要

这篇文章主要讲解了“如何快速入门html”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何快速入门HTML”吧!html网页语法结构如下:   <h

这篇文章主要讲解了“如何快速入门html”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何快速入门HTML”吧!

html网页语法结构如下:

  <html>

  <head>

  <title>网页标题</title>

  </head>

  <body>主体内容</body>

  </html>

  1、标题字体:一对<H#>标记表明正文中的第一层标题。标题一共有六层(H1&mdash;H6),随着数字的增加,标题字体依次减小且自动显示为黑体字。

  1) 一级标题<H1>是HTML文档中最重要的标题,一般将其作用整个HTML文档的标题。

  2) 二级标题<H2>通常用来标注文档中的章。

  3) 三级标题<H3>通常用来标注每一章内部的节。

  4) 四级标题<H4>通常用来标注文档的小节。

  5) 五级标题<H5>和六级标题<H6>可以分别用来在<H4>内部划分更小的节。因为<H5>和<H6>通常使用很小的字体显示,因此这两个标记并不常用。

  标题字体用到的属性是“ALIGN”,用来控制标题文字的水平对齐方式:

  Left(居左对齐)、Right(居右对齐)、 Center(居中对齐)。

  语法为:

  <H * align=“”>标题文字</H>

  说明:(1)其中“*”表示数字1&mdash;6

  (2)“”之中为Left、Right或者Center三者之一。

  默认为 align=left

  2、文章字体:<FONT></FONT>标记用于在HTML文档中设置文本大小与颜色。

  文章字体用到的属性为SIZE与COLOR:

  1) SIZE 取值从1到7,代表字体尺寸从最小到最大,其中SIZE属性的缺省值为3,也可在所取数值前加控制符:“+”代表加大字体,“&mdash;”则反之。

  2) COLOR有两种表示方法:

  A. 英文字母:black(黑色)、white(白色)、red(红色)、green(绿色)、blue(蓝色)、yellow(黄色)、aqua(浅绿 色)、fuchsia(紫红色)、gray(灰色)、lime(橙色)、maroon(栗色)、purple(紫色)、olive(橄榄)、 silver(银色)

  B. 用6个16进制的字母表示,也就是0&mdash;F之间取值,称为RGB值:0代表的颜色最暗,F代表的颜色最亮,如“000000”是黑色,“ffffff”是白色。

  文章字体语法:

  <FONT SIZE=” “ COLOR=” “>文章文字</FONT>

  说明:其中SIZE属性可以选择1&mdash;7;COLOR属性值可以选择RGB值或者预定义颜色名称(即英文字母)。

  标记<br>不空一行

  <p>段落标记 空一行 相当于<br><br>

  3、 物理字体:用来给文本赋以某种显示属性,而不必考虑文本的逻辑含义。

  1) <B></B>或者<STRONG></STRONG>:用来指示以粗体字显示文本。(大多数WEB浏览器都认为是黑体)。

  2) <I></I>或者<EM></EM>:用来指示以斜体字显示文本。

  3) <U></U>:用来指示为文本加下划线。没有颜色属性,文本颜色就是它的颜色

  4) <SUP></SUP>:指示以上标方式显示文本。

  5) <SUB></SUB>:指示以下标方式显示文本。

  6) <STRIKE></STRIKE>:用来指示在文本的正中央画一条删去线。没有颜色属性,文本颜色就是它的颜色

  4、 逻辑字体:是命令各种浏览器对控制符容器中的字符进行相对的修饰。

  1) <EM></EM>:一般强调文字,字体是意大利斜体。

  2) <STRONG></STRONG>:着重强调文字,以黑体(加粗)字显示。

  3) <CODE></CODE>:代表一个HTML元素示例的文字。

  4) <SAMP></SAMP>:输出示例中的文字。当浏览器遇到<SAMP>标记时,就根据系统默认设置格式化标 记<SAMP></SAMP>之间的文本。一般它以比标准字体较小的字体样式显示文字,而且文字宽度固定。

  5) <KBD></KBD>:代表一个键盘按键的文字。

  6) <VAR></VAR>:定义变量或者值的文字。斜体显示。

  7) <DFN></DFN>:定义文字。斜体显示。

  8) <CITE></CITE>:引用文字,意大利斜体显示。

  9) <SMALL></SMALL>:小号字体。

  10) <BIG></BIG>:大号字体。

  说明:<BIG><SMALL>标记与<FONT SIZE>标记可产生同样的效果,但后者对字形的控制更加精确。<BIG><SMALL>版本可用于早期的浏览器版本,但 早期版本不支持<FONT>标记。

  5、 字符实体:

  在往HTML文档中写入特殊字符,要使用特殊的代码,浏览器会用HTML命令对这些特殊代码进行翻译

  下面就是以字母或数字表示的特殊符号的常用举例:

  ;:空格

  !;:!

  &#quot;:”

  #;:#

  $;:$

  %;:%

  &#amp;&;:&

  ';:&rsquo;

  (;:(

  );:)

  *;:*

  +;:+

  ,;:,

  -;:&mdash;

  。;: 。

  /;:/

  0;-9;:数字从0到9

  :;: :

  ;;: ;

  <;<;:<

  =;:=

  >;>;: >

  ?;:?

  @;:@

  A;-Z:大写字母从A到Z

  [;:[

  \;:\

  ];:]

  ^;:^

  _;:_

  &mdash;&mdash;;:&mdash;&mdash;

  a;-z:小写字母从a到z

  ; ;:不换行空格

  6、 文字对齐:

  <DIV>可以设置文字与页面的左边,中间,右边对齐。

  <CENTER></CENTER>可以设置文本在页面的中间对齐。

  <P>也可以设置段落对齐。用法与<DIV>大致相同。

  1) <DIV>语法:<DIV ALIGN=” “>文字</DIV>

  说明:ALIGN属性可以用“LEFT”、“CENTER”、“RIGHT”,分别对应于将标记中间的字符块按照左、中、右对齐。

  2) <CENTER>语法:<CENTER>文本</CENTER>

  说明:这个标记没有属性,它的作用是将标记中间的字符居中对齐,它的作用和<DIV ALIGN=”CENTER”><DIV>一样。

  3) <P ALIGN=” ? “>段落</P>

  说明:<P>和<DIV>中的ALIGN属性的属性值一样,也是取“LEFT”、“CENTER”、“RIGHT”三个值,分别对应将中间的字体左、中、右对齐。只能对一行文字起作用

  7、 文字移动:用文字编排各种WEB页面时,难免会有一些需要强调的部分,设置动态效果会起到强调突出文本的作用。页面的移动,必须在浏览器中才能看到。

  文字移动所包含的主要内容有:

  A. 文字移动方向的设置

  B. 文字移动方式的设置

  C. 文字移动循环的设置(次数)

  D. 文字移动速度与延时的设置

  E. 文字移动底色的设置

  F. 文字移动面积的设置

  1) 语法:<MARQUEE DIRECTioN=” ? “>文字</MARQUEE>

  说明:DIRECTION属性的属性值是取“LEFT”、“RIGHT”两个值,分别对应将中间的字体向左、右移动。

  2) 语法:<MARQUEE BEHAVIOR=” “>文字</MARQUEE>

  说明:BEHAVIOR属性的属性值是取“SCROLL”、“SLIDE”、“ALTERNATE”三个值,分别对应将中间的字体循环移动、只移动一次、在屏幕中间左右移动。

  3) 语法:<MARQUEE LOOP=” ? “>文字</MARQUEE>

  说明:LOOP属性的属性值是取一个数值,表示将中间的字体循环移动的次数。

  4) 语法:<MARQUEE SCROLLAMOUNT=” ? ”>文字</MARQUEE>

  说明:SCROLLAMOUNT属性的属性值是取数字值,对应将中间的字体循环移动的速度。数值越大,表示速度越快。

  5) 语法:<MARQUEE SCROLLDELAY=” ? ”>文字</MARQUEE>

  说明:SCROLLDELAY属性的属性值是取数字值,对应将中间的字体循环移动的延时。设置这个参数也会影响到文字移动的速度。

  6) 语法:

  <MARQUEE HEIGHT=” “ ? WIDTH=” ” BGCOLOR=” “></MARQUEE>

  说明:

  A. HEIGHT属性的属性值是取数字值,这个属性控制了文字移动面积的高度。

  B. WIDTH属性的属性值是取数字值,这个属性控制了文字移动面积的宽度。

  C. BGCOLOR属性的属性值可以取RGB值,或者用预定义值,它控制了移动文字的背景颜色。

  8、 文字中行的控制:

  主要包括两个内容:

  A. 分段:在文本中另起一段。<p>

  B. 换行:在文本中另起一行。<br>

  1) <P>的语法:<P ALIGN=” “></P>

  说明:ALIGN属性是可选的。它的属性的属性值可以取“LEFT”、“CENTER”、“RIGHT”三个值中的值,这个属性控制了段落中的文字在WEB页面中的对齐方式。注意:有些浏览器不支持右对齐方式。

  当我们单独定义一个空行时,我们习惯使用<p>的双标记形式,所以

  <p>是HTML中唯一一个不能明确定义是双标记还是单标记的一个标记。

  2) 语法:<BR>

  说明:这个标记是单标记。

  9、 列表:常用的有三种类型的列表,分别是无序列表、有序列表、定义列表。列表单

  元允许嵌套。<UL> <OL> <DL>

  结构:

  A. 起始标记:定义了整个列表的开始,同时定义这个列表的属性。

  B. 定义每一个选项。

  C. 列表的结束。

  1) 无序列表:

  A. 语法:<UL TYPE=” ? “COMPACT></UL>

  说明:

  l <UL>用于定义无序列表,无序列表的起始标记<UL>和结束标记</UL>都是必须的。显示为一个实心黑色圆点。

  l TYPE属性可以分别取三个值“DISC”、“SQUARE”、“CIRCLE,它们是用来控制强调符风格的属性,三个值分别对应实心圆点,实心方块,空心圆圈。在FRONTPAGE里,除DISC外的其它两个属性必须使用小写时浏览器才可识别。

  l COMPACT属性是个无值属性(名称标记),用来使列表的表项用紧凑格式紧凑表示。

  B. 语法:<LI TYPE=” “></LI>

  说明:

  l TYPE属性是可选的,一般情况下是不需要的,因为在整体列表定义时应该已经定义完毕,只有在极少数情况下,需要使不同表项的强调符不同,才有必要在这里 定义这个属性。属性值的选择和前面列表的属性选项一致。(在FRONTPAGE里,除DISC外的其它两个属性必须使用小写时浏览器才可识别。)

  2) 有序列表:

  语法:<OL TYPE=” ? “ START=” ? “ COMPACT></OL>

  说明:

  l <OL>标记用于定义有序列表,有序列表的起始标记<OL>和结束标记</OL>都是必须的。有序列表的列表项之前有序号,有序列表和无序列表的区别只在于用序号代替了强调符。

  l TYPE属性可以分别取五个值“1”、“a”、“A”、“i”、“I”,它是用来控制强调符风格的属性,五个值分别对应数字、小写字母、大写字母、小写罗马数字、大写罗马数字。

  l START属性是一个数字,表示从第几个数字(字母)开始计数值为数值。例:4

  l COMPACT属性是个无值属性(名称标记),用来使列表的表项用紧凑格式紧凑显示。

  3) 定义列表:一般用来定义术语,有时也将定义列表称为词汇列表。定义列表的列表项分成两部分,一部分是需要定义的术语,另一部分是该术语的定义。

  A. 语法:<DL COMPACT></DL>

  说明:

  l <DL>标记用于标注定义列表,起始标记<DL>和结束标记</DL>都是必须的。

  l COMPACT属性是个无值属性(名称标记),用来使列表的表项用紧凑格式紧凑显示。

  l <DL>标记内不允许含有除<DD>和<DT>其他任何单元或普通文本。

  B. 语法:<DT></DT>

  说明:

  l <DT>标记用于标注需要定义的术语。

  C. 语法:<DD></DD>

  说明:

  l <DD>单元也只允许出现在<DL>单元的内部,其结束标记</DD>通常可以省略。

  l <DD>单元可以含有一些字块级单元,特别是可以嵌入其他列表。

  预格式化:<PRE>单元用来包含一段预先编排好格式的文本,WEB浏览器将把起始标记<PRE>与结束标 记</PRE>之间的文本按照原代码中的格式原封不动的再现出来,<PRE>单元的结束标记</PRE>是必需的, 不能省略(实践证明可以省略,不会影响什么?)。与一般段落有所不同,对于预格式文本来说,自动换行是被禁止的,以便保证预先编排的格式不被破 坏。<PRE>单元有一个可选属性“WIDTH”,它用来设置文本的宽度,单位是字符数。“WIDTH”属性可以使浏览器选择适当的字体,以 使整个PRE单元的文本适应当前窗口的宽度。

  <PRE>单元还应该注意下述几个问题:

  l 语法规则中列举的文本级标记,例如<FONT>等允许出现在<PRE>单元,但是他们并没有全部得到所有浏览器的支持。

  l 段落标记<P>不允许出现在<PRE>单元内部,但如果强制如此,浏览器一般会将其看作两个换行。

  l 因为<PRE>单元内部允许有其他HTML标记出现,故一般不可以不加改变地将一段ASCII文本添加 上<PRE></PRE>后直接插入到HTML文档之中。若文本中存在“>”“<”“&”等特殊字符,应事 先将其转换为相应的字符实体。

  链接:是WWW的基础,也是核心。单击这些链接,读者就能从当前WEB页的当前位置跳转到Internet的任何一个部分。Anchor:锚 简写:A

  语法:<A HREF=”URL#NAME” TARGET=” _blank ”></A>

  说明:

  l “HREF”是超文本引用的意思它是标记<A>的属性,可以将需要链接页面的地址放在“HREF”之后的引号中进行链接。

  l URL(UnifORM Resource Locator):统一资源定位符,是WEB页的地址。

  l URL后面跟的“#NAME”部分是指定页面的指定部分的标识,它是通过在目的页面的<A NAME=“”>定义的名称。

  l URL部分可以使用的协议和目的类型主要有以下几种:

  2 内部链接

  2 外部链接

  2 文件下载地址

  2 电子邮件地址

  加入图片:大多数浏览器都支持两种图形格式:GIF(图形互换格式)和JPEG(联合图像专家组)。

  语法:<IMG SRC=” ” ALIGN=” “ BORDER=” “ ALT=” “>

  说明:

  l “SRC”表示图片的来源,与<A>标记的“HREF”的属性一样,可以为<IMG>标记的“SRC”属性指定完整的Internet地址。如果图像文件与HTML文件在同一个文件夹内,也可以仅指定文件名,即使用相关地址。

  l 属性“ALIGN”属性则标识了图片在页面中的对齐方式,分别取值为“LEFT”、“RIGHT”、“TOP”、“MIDDLE”、“BOTTOM”,对应于左、中、右对齐。(若标记<IMG>中不包含ALIGN属性,图像将于靠近它的文字底部对齐。

  l “BORDER”属性标识了图片的边框线的宽度,数值越大,边框线越宽。

  l “ALT”属性是在图片显示后,对于图片的一段描述文字,这段文字是在当浏览者将鼠标放置到该图上,停止一段时间后,页面上自动会弹出一个黄色的文本框,里面的文字,就是我们写在引号中的内容。

  13、水平线:<HR>标记用来在WEB页面上画出一条水平标尺线。使用标尺线是为了将HTML文档在逻辑上分隔成不同主题的分区,从而使文档便于阅读。<HR>单元只有起始标记<HR>没有结束标记。

  语法:<HR ALIGN=” ” WIDTH=” ” SIZE=” “ NOSHADE>

  说明:

  l ALIGN属性用来设置水平标尺线的对齐方式,“LEFT”为水平线与页面的左边对齐,“CENTER”为水平线与页面的中间对齐,“RIGHT”为水平 线与页面的右边对齐,缺省时标尺线居中。ALIGN属性只有在设置了比浏览器窗口宽度小的“WIDTH”属性时才有实际意义。

  l WIDTH属性用来设置水平标尺线在水平方向上的宽度,即水平标尺线的长度。

  l SIZE属性设置水平标尺的粗细,单位是像素数。SIZE属性只能取整数值,缺省值为2。

  l NOSHADE属性是一个名称记号,用于取消水平标尺线的阴影,即画出一条简单的实线,没有三维效果。

  表格:是指按照一定顺序将文本及图形按照一定方式进行排列。是组织数据的一种十分有效的方式。与列表相比,表格可以容纳更多的内容,而从表现效果来看,表 格的形式也更加完美。表格中由行和列分隔成的格子称为表元(cell),是矩形区域,它可以包含文本,图像和HTML标记。可将其他HTML元素放入表格 单元中,但一个单元中使用的标记不能持续作用到其他单元。也就是说,如果要在一个表元中间放一个双标记,那么一定要在表元结束之前,结束这个双标记。用以 分隔表元的行列线则称为表格的边框线(border),表元的内容分成两类,一类是表头,一类是表数据。

感谢各位的阅读,以上就是“如何快速入门HTML”的内容了,经过本文的学习后,相信大家对如何快速入门HTML这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

--结束END--

本文标题: 如何快速入门HTML

本文链接: https://www.lsjlt.com/news/89932.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何快速入门HTML
    这篇文章主要讲解了“如何快速入门HTML”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何快速入门HTML”吧!html网页语法结构如下:   <h...
    99+
    2024-04-02
  • php如何快速入门
    要快速入门PHP,可以按照以下步骤进行:1. 安装一个PHP开发环境:可以选择安装XAMPP、WAMP、MAMP等集成环境,也可以在...
    99+
    2023-08-30
    PHP
  • 如何快速入门Vuex
    本篇文章为大家展示了如何快速入门Vuex,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。一、前言当我们的应用遇到多个组件共享状态时,会需要多个组件依赖于同一状态。传参...
    99+
    2024-04-02
  • 如何快速入门Mybatis
    这篇文章主要讲解了“如何快速入门Mybatis”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何快速入门Mybatis”吧!本文主要内容:传统JDBC传统JDBC编码格式public&nbs...
    99+
    2023-06-15
  • 如何进行python快速入门
    这期内容当中小编将会给大家带来有关如何进行python快速入门,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。九九乘法表for i in range(1,10): &...
    99+
    2023-06-25
  • 如何进行SQLite快速入门
    这篇文章给大家介绍如何进行SQLite快速入门,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。SQLite基础什么是SQLiteSQLite是一款轻型的嵌入式数据库它占用资源非常的低,在...
    99+
    2024-04-02
  • Python3快速入门
    Python3快速入门Python3快速入门(一)——Python简介https://blog.51cto.com/9291927/2385592Python3快速入门(二)——Python3基础https://blog.51cto.com...
    99+
    2023-01-31
    入门 快速
  • python 快速入门
         导入 #from dir1 import test #import dir1.test as test 列表推到: b3 =[x for x in xing if x in ming] print(b3)  li ...
    99+
    2023-01-31
    入门 快速 python
  • SpringBoot快速入门
    文章目录 1,SpringBoot简介1.1 SpringBoot快速入门1.1.1 开发步骤1.1.1.1 创建新模块1.1.1.2 创建 `Controller`1.1.1.3 启动服务器...
    99+
    2023-10-27
    spring boot spring java
  • JavaScript快速入门
    目录 1.概述 2.引入方式 3.调试 4.基础语法 4.1.变量 4.2.常量 4.3.运算符 ​编辑 4.4.流程控制 4.4.1.顺序 4.4.2.判断 4.4.3.循环 4.5.对象 4.6.数组 4.7.函数 5.高级特性 1...
    99+
    2023-10-28
    javascript 前端 开发语言 原力计划
  • 开发者如何快速入门Python
    今天就跟大家聊聊有关开发者如何快速入门Python,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。Python确实是个好语言,这点毋庸置疑, Python一直以简洁方便而又强大著称,其...
    99+
    2023-06-17
  • SendPkt快速入门[Python]
    SendPkt快速入门作者:gashero电邮:harry.python@gmail.com原文地址:http://gashero.yeax.com/p=26项目主页:http://sendpkt.googlecode.com日期:2007...
    99+
    2023-01-31
    入门 快速 SendPkt
  • python3.x 快速入门
    Edit the > 2018/6/15 11:26:53 1认识Python 人生苦短,我用python - 优雅,明确,简单 是python设计哲学 - python的设计目标之一, 是让代码具备高度的可阅读性 ...
    99+
    2023-01-31
    入门 快速
  • FastAPI--快速入门(1)
    FastAPI 是一个高性能 Web 框架,用于构建 API。主要特性:快速:非常高的性能,与 NodeJS 和 Go 相当快速编码:将功能开发速度提高约 200% 至 300%更少的错误:减少约 40% 的人为错误直观:强大的编辑器支持,...
    99+
    2023-01-31
    入门 快速 FastAPI
  • K8s该快速入门
    这篇文章将为大家详细讲解有关K8s该快速入门,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。通过一个业务发展的故事,分享 K8s 出现的原因以及它的运作方式。...
    99+
    2024-04-02
  • JDBC | JDBC快速入门
    👑 博主简介:    🥇 Java领域新星创作者    🥇 阿里云开发者社区专家博主、星级博主、技术博主 🤝 交流社区:BoBoo...
    99+
    2023-09-20
    1024程序员节 java mysql
  • 如何快速入门PHP商城开发?
    随着电子商务的蓬勃发展,越来越多的人开始关注线上商城的开发。而PHP作为一种流行的Web开发语言,其开发商城的技能更是得到了广泛应用。如果你是一名初学者,但想要快速入门PHP商城开发,请看下文。一、学习PHP语言的基础知识在开始学习PHP商...
    99+
    2023-05-14
    PHP 入门 商城开发
  • 如何快速入门SQL Server XML查询
    本篇文章给大家分享的是有关如何快速入门SQL Server XML查询,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。sql xml 入门: -...
    99+
    2024-04-02
  • SpringBoot快速入门详解
    Spring Boot是什么? Spring Boot并不是什么新的框架,它是对Spring的缺点进行了改善和优化,Spring Boot默认了很多的框架使用方式,像maven整合了...
    99+
    2024-04-02
  • SparkSQL使用快速入门
    目录一、SparkSQL的进化之路二、认识SparkSQL2.1 什么是SparkSQL2.2 SparkSQL的作用2.3 运行原理2.4 特点2.5 SparkSession2....
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作