HTML起步——学习2

1.HTML元素

1.什么是HTML元素

HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。 HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件,并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说,HTML元素就是构成HTML文件的基本对象,HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。

<开始标签> 元 素 内 容 <结束标签>

这就是一个元素:

1 <p>shiyanlou</p>

2.HTML元素语法

HTML元素语法特点:

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性(下面会讲)

3.HTML元素嵌套示例

下面这个例子中有几个元素:

1 <html>
2     <body>
3         <p>let‘s go to shiyanlou</p>
4     </body>
5 </html>

答案当然是三个<html><body><p></p></body></html>,应该很好理解吧,这就是所谓的嵌套

4.HTML空元素

HTML元素的内容是开始标签与结束标签之间的内容,而某些 HTML 元素具有空内容(empty content),这种元素被叫做空元素。比如说换行符<br>。 但<br>是不规范的写法,早先发布的html规范中<br><hr><img>等标记元素是无需“封闭自身”的,这就造成了html规范本身的不严谨,所以后来参考了更规范的XML语言的语法推出了xhtml。在xhtml中所有类似<br>这样的孤立标签都需要自行封闭,具体的做法就是在标签名字的后面跟个“/”,例如<br/>。从逻辑上讲<br />=<br>...</br>,这样做的目的是为了尽量减少网页的代码量,同时保持逻辑严谨。

扯了这么多就是想说,请保持规范的写法,以后换行请用<br/>

前面我们从示例中看出,<p>标签结束以后也后一个换行的动作,那< p>标签和< br/>标签有什么异同呢?

  • 相同之处是<br>和<p>都是有换行的属性及作用
  • 区别 <br/>是只需一个单独使用,而<p>和< /p>是一对使用
  • <br/>标签是小换行提行(相当于我们平时文本中输入一个回车),<p>标签是大换行(分段,相当与两个回车),各行作用。

看看两个标签的区别 先来个<br/>换行,

1  <p>
2         hello shiyanlou <br/>
3         i am so happy<br/>
4         let‘s go to shiyanlou.<br/>
5     </p>

再来个<p>< /p>换行

1  <p>long time to see.</p>
2     <p>i am so happy.</p>
3     <p>let‘s go to shiyanlou.</p>

上述代码效果不同,如若相同,如下使用<br/>:

1  <p>
2         hello shiyanlou <br/><br/>
3         i am so happy<br/><br/>
4         let‘s go to shiyanlou.<br/><br/>
5     </p>

2.HTML属性

某些标签要想按照作者的意愿来实现在网页上,就得需要一定信息的补充,这信息就叫属性,HTML标签可以加上属性的描述。属性提供了有关 HTML 元素的更多的信息。

关于属性有以下语法规则:

  • 是在 HTML 元素的开始标签中定义。
  • 总是以名称和值对应的形式出现,比如:name="value"。
  • 属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。
1 <a href="http://www.shiyanlou.com">shiyanlou</a>

href="http://www.shiyanlou.com",这一部分就叫做< a>标签的属性,是对< a>标签的补充说明,既指向的网页。

3.HTML文本格式化

一般我们在网页中能看见有各种各样的字体、文本样式,这就是文本格式化标签的功劳。下面我们就来学习使用文本格式化标签(比较常用的)

标签 描述
< b> (bold)粗体
< big> (big)大字体
< em> (emphasized)强调字
< i> (italic)斜体
< small> (small)小字体
< strong> (strong)加重语气

4.HTML样式

上面我们用了各种各样的标签来使HTML文本格式符合我们的意愿,其实有一个属性能帮助我们减少不少的麻烦。

style 提供了一种改变所有 HTML 元素的样式的通用方法。这里可以将,背景颜色,字体样式,字体尺寸,字体颜色,对齐方式一并定义好。

时间: 2024-12-26 03:13:19

HTML起步——学习2的相关文章

Jigsaw java起步学习

说在前面 点击链接加入群[JavaEE(SSH+IntelliJIDE+Maven)]:http://jq.qq.com/?_wv=1027&k=Sxx7Lc 1官方地址: http://openjdk.java.net/projects/jigsaw/ https://jdk8.java.net/jigsaw/ Jigsaw java起步学习

[WPF系列]从基础起步学习系列计划

引言 WPF技术已经算不什么新技术,一搜一大把关于WPF基础甚至高级的内容.之前工作中一直使用winform所以一直没有深入学习WPF,这次因项目中使用了WPF技术来实现比较酷的展示界面.我在这里只是把个人学习WPF的过程做些总结,同时也为想我这样的初学WPF的提供一点帮助.我争取做到由浅入深,系统全面.不足之处还请大家指教. 学习工具 俗话说:“工欲行其事,必先利其器”,在学习WPF时我们应该找几个工具提高我们的学习和开发效率. kaxaml 一个实时查看xaml代码和呈现的工具.可从这里下载

开发者和系统管理者最喜爱的开源工具Vim 起步学习的五个技巧

多年来,我一直想学 Vim.如今 Vim 是我最喜欢的 Linux 文本编辑器,也是开发者和系统管理者最喜爱的开源工具.我说的学习,指的是真正意义上的学习.想要精通确实很难,所以我只想要达到熟练的水平. 我使用了这么多年的 Linux ,我会的也仅仅只是打开一个文件,使用上下左右箭头按键来移动光标,切换到插入模式,更改一些文本,保存,然后退出.但那只是 Vim 的最最基本的操作.我的技能水平只能让我在终端使用 Vim 修改文本,但是它并没有任何一个我想象中强大的文本处理功能.这样我完全无法用 V

JavaSE和JavaEE的起步学习路线

Java javaSE部分 1)能够掌握DOS系统常用基本命令:2)熟练使用eclipse编写java代码:3)掌握常用数据结构和算法:4)掌握常用的编程设计模式:5)熟练使用java语言的常用对象:6)使用java编写单机应用程序:7)掌握面向对象编程思想,为以后深入学习JavaEE就业课程打下坚实的基础. 1.1计算机基础知识 1.1.1计算机基础 先了解计算机,进而再去了解Java语言. 1.1.2 DOS常用命令 了解什么是DOS,并掌握DOS控制台的打开方式,同时熟悉常用的DOS命令,

从-1起步学习SpringBoot

最近项目要上SpringBoot,作为一个不太合格的.neter,又要开始用SpringBoot,感觉好方. 但是又有什么办法呢,既然决定不了大方向还是学习一下吧,免得丢了饭碗. 先说一下个人的背景吧 Winform/WPF大概做了2年,感觉趋势不对,转身加入到了Web开发的大队伍中来, .net mvc4,mvc5,,net core1.0,2.0陆续学习并应用,Android开发也有过一段时间接触 接下来准备把学习过程整理出来,作为自己一个笔记,同时也希望对和我一样的初学者有一个引导. 暂时

49.Django起步学习

django起步 django安装 pip install django==2.0.4(版本号) pip install django 默认安装最新版本 创建项目 django-admin startproject myproject 开启开发服务器 cd myproject #进入项目目录 python manage.py runserver #开启服务 python manage.py runserver 7000 #改变服务监听端口 python manage.py runserver 0

HTML起步——学习3

1.HTML链接 (1)给文字及图片添加超链接 1.回顾一下最简单的链接使用,直接给文字添加链接到网页和另外的HTML文件. HTML内容如下: 1 <p><a href="www.baidu.com">百度一下</a></p> 这是最简单的超链接,接下来就来让这个HTML文件链接到另一个HTML文件.(在相同的文件夹,再添加一个HTMl文件),然后下面是HTML内容和结果: 1 <p><a href="dem

GitHub起步---创建第一个项目

---恢复内容开始--- 刚起步学习GitHub,边学边说! {参考教程:http://blog.csdn.net/steven6977/article/details/10567719}这里描述的很详细 [第一步]注册账户 1.这个步骤你已经玩过很多遍了,在网上创建个什么账户一样的.可以在网上看到注册教程 [第二步]建立代码仓库 1.点击界面上右上角的 2.添加详细信息:仓库名-->描述等信息 Initialize this repository with a README是可选的,不过本人建

IOS入门学习随笔

我的IOS学习之路并非起于大学期间,而是毕业后所在公司有相关的开发业务,所以我在今年10月份开始了我的IOS之旅. 在今年6月份苹果公司推出了全新的IOS开发语言Swift,这是件让IOS程序员兴奋的事件.因为Swift不仅有新的开发体验,更可以说这次让中国程序员有了一次和世界同步的机会.在我开始接触IOS的时候,我一直在犹豫是直接从ObjectC开始啃还是直接搭上Swift这班顺风车.在我考虑了学习的渐进性和公司实际开发任务之后,我决定从ObjectC开始我的IOS学习之路. 在确定了学习方向