纪念
这是使用 CSND发表自己的第一个博客,并且使用Markdown编辑器 进行撰写,特此纪念。本篇文章记录了我首次学习HTML所总结的一些基础知识。
HTML文档格式
HTML文档拥有一个固定的外壳,我们需要在特定的位置编写特定的标记语言。清楚文档格式,开发网页也会变得更得心应手:
-
文档的第一行一般为<!DOCTYPE html>;声明该文档类型是html类型,出于历史原因需要,现在可有可无,不过建议还是写上
-
<html></html>元素,这是一个根元素,其他所有的元素都必须嵌套在这里面
-
<head></head>元素,我们可以在这里面进行网页字符集的声明:<meta charset="utf-8">,保证你的网页不会出现乱码;还可以进行CSS样式声明以及包括你想在搜索结果中出现的关键字和页面描述等等
-
<title></title>元素,设置页面标题,出现在浏览器标签上,当你标记/收藏页面时它可用来描述页面
-
<body></body>元素,这里进行大部分的网页编写,可以包括文本,图片,音频,游戏等等
-
注释格式为:<!--你想要注释的内容-->
元素
一个HTML文档是由许多元素构成的,一个元素由开始标签、内容和结束标签构成,元素还可以包含属性,属性包含元素的额外信息,这些信息不会在浏览器中显示出来。一个属性必须包含如下内容:
-
一个空格,在属性和元素名称之间。(如果已经有一个或多个属性,就与前一个属性之间有一个空格。)
-
属性名称,后面跟着一个 = 号。
-
一个属性值,由一对引号 "" 引起来。
常见属性有:id、class、name、style、type、value等,常见的文本框和密码框都是加了属性type=“text”/“possword”,此外用户还可以自定义属性。
超链接
所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。基本上,我们可以把任何东西加上超链接。
-
超链接语法:<a href="https://www.baidu.com/" target="_blank">百度一下</a>
-
href即为要跳转去的地址 URL(Uniform Resorce Locator)
-
target属性为_blank表示在新的页面打开超链接(默认是在当前页面打开即_self)
-
超链接标签包含的内容(当前为文字"百度一下")即为显示在页面上供用户点击的
锚点
锚点,也称为书签,用于标记页面的某个元素或位置。通过锚点,我们可以轻易的在长页面内实现跳转。先使用id属性声明并生成某元素的锚点,然后再使用超链接指向该锚点即可。
例如:
// An highlighted block
<!-- 文档其余部分 -->
<h2 id="C4">第四章 论零号病人的重要性</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>
<!-- 文档其余部分 -->
...
注意:
-
元素的id值必须是唯一的,也即页面不能再有其它元素的id值为C4
-
超链接中的地址需要有#符号
文件路径
有时需获取某些文件,我们需要指定该文件位于何处,这称为文件路径。文件路径有相对路径和绝对路径两种。
1、相对路径:
html中的相对路径的概念是:指当前html页面引用的文件相对于当前html页面文件的路径,在html网页开发过程中多采用这种方法来引用我们所想使用的内容。相对路径有多种使用的方法,这些方法标识表示的意义也不相同。那么接下来我们来看一下是如何使用的。
./ :代表文件所在的目录(通常情况下可以省略不写)
…/ :代表文件所在的父级目录(也就是上一级目录)
…/…/ :代表文件所在的父级目录的父级目录(也就是上一级上一级目录)
/ :代表文件所在的根目录
2、绝对地址:
就是直接从磁盘的位置去定位文件的地址。类似于我们通过我的电脑一盘符的方式来寻找想要的指定内容,或者说直接带着协议、域名,即如这样格式的地址。不过这对于开发网页的角度来说并不常用和建议,因为一旦引用绝对路径,那么这个文件极有可能是在别人的电脑上搜索不到的。
预设格式
如果你想在网页中展示一首诗或一些特别格式的文本,那么请使用pre标签,它会完全帮你保留你想保留的格式。因为我们知道html文档编写中,会自动帮你屏蔽空格的,且在没有换行标签的声明下不会做到换行。有时使用pre标签,能够帮你节省很多不必要的麻烦。
特殊字符
HTML预留了一些字符,导致我们在需要某些字符的时候不能够直接引用,因为这样会导致浏览器误以为是html标签,比如>和<,所以我们有时需要用字符实体(实体名称)来显示我们需要的符号,并且通过字符实体还支持一些键盘上没有的特殊符号,更便于我们的网页编写。
部分特殊字符
转载自:http://www.cnblogs.com/web-d