HTML初学小结

纪念

这是使用 CSND发表自己的第一个博客,并且使用Markdown编辑器 进行撰写,特此纪念。本篇文章记录了我首次学习HTML所总结的一些基础知识。

HTML文档格式

HTML文档拥有一个固定的外壳,我们需要在特定的位置编写特定的标记语言。清楚文档格式,开发网页也会变得更得心应手:

  1. 文档的第一行一般为<!DOCTYPE html>;声明该文档类型是html类型,出于历史原因需要,现在可有可无,不过建议还是写上
    
  2. <html></html>元素,这是一个根元素,其他所有的元素都必须嵌套在这里面
    
  3. <head></head>元素,我们可以在这里面进行网页字符集的声明:<meta charset="utf-8">,保证你的网页不会出现乱码;还可以进行CSS样式声明以及包括你想在搜索结果中出现的关键字和页面描述等等
    
  4. <title></title>元素,设置页面标题,出现在浏览器标签上,当你标记/收藏页面时它可用来描述页面
    
  5. <body></body>元素,这里进行大部分的网页编写,可以包括文本,图片,音频,游戏等等
    
  6. 注释格式为:<!--你想要注释的内容-->
    

元素

一个HTML文档是由许多元素构成的,一个元素由开始标签、内容和结束标签构成,元素还可以包含属性,属性包含元素的额外信息,这些信息不会在浏览器中显示出来。一个属性必须包含如下内容:

  1.  一个空格,在属性和元素名称之间。(如果已经有一个或多个属性,就与前一个属性之间有一个空格。)
    
  2.  属性名称,后面跟着一个 = 号。
    
  3.  一个属性值,由一对引号 "" 引起来。
    

常见属性有:id、class、name、style、type、value等,常见的文本框和密码框都是加了属性type=“text”/“possword”,此外用户还可以自定义属性。

超链接

所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。基本上,我们可以把任何东西加上超链接。

  1.  超链接语法:<a href="https://www.baidu.com/" target="_blank">百度一下</a>
    
  2.  href即为要跳转去的地址 URL(Uniform Resorce Locator)
    
  3.  target属性为_blank表示在新的页面打开超链接(默认是在当前页面打开即_self)
    
  4.  超链接标签包含的内容(当前为文字"百度一下")即为显示在页面上供用户点击的
    

锚点

锚点,也称为书签,用于标记页面的某个元素或位置。通过锚点,我们可以轻易的在长页面内实现跳转。先使用id属性声明并生成某元素的锚点,然后再使用超链接指向该锚点即可。
例如:

// An highlighted block
<!-- 文档其余部分 -->
<h2 id="C4">第四章 论零号病人的重要性</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>
<!-- 文档其余部分 -->
...

注意:

  1.  元素的id值必须是唯一的,也即页面不能再有其它元素的id值为C4
    
  2.  超链接中的地址需要有#符号
    

文件路径

有时需获取某些文件,我们需要指定该文件位于何处,这称为文件路径。文件路径有相对路径和绝对路径两种。
1、相对路径:
  html中的相对路径的概念是:指当前html页面引用的文件相对于当前html页面文件的路径,在html网页开发过程中多采用这种方法来引用我们所想使用的内容。相对路径有多种使用的方法,这些方法标识表示的意义也不相同。那么接下来我们来看一下是如何使用的。
  
./ :代表文件所在的目录(通常情况下可以省略不写)
…/ :代表文件所在的父级目录(也就是上一级目录)
…/…/ :代表文件所在的父级目录的父级目录(也就是上一级上一级目录)
/ :代表文件所在的根目录

2、绝对地址:
  就是直接从磁盘的位置去定位文件的地址。类似于我们通过我的电脑一盘符的方式来寻找想要的指定内容,或者说直接带着协议、域名,即如这样格式的地址。不过这对于开发网页的角度来说并不常用和建议,因为一旦引用绝对路径,那么这个文件极有可能是在别人的电脑上搜索不到的。

预设格式

如果你想在网页中展示一首诗或一些特别格式的文本,那么请使用pre标签,它会完全帮你保留你想保留的格式。因为我们知道html文档编写中,会自动帮你屏蔽空格的,且在没有换行标签的声明下不会做到换行。有时使用pre标签,能够帮你节省很多不必要的麻烦。

特殊字符

HTML预留了一些字符,导致我们在需要某些字符的时候不能够直接引用,因为这样会导致浏览器误以为是html标签,比如>和<,所以我们有时需要用字符实体(实体名称)来显示我们需要的符号,并且通过字符实体还支持一些键盘上没有的特殊符号,更便于我们的网页编写。

部分特殊字符

转载自:http://www.cnblogs.com/web-d

标签大全

来自菜鸟教程:https://www.runoob.com/tags/ref-byfunc.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值