初识HTML

论坛 期权论坛 期权     
脑袋里的虫子   2019-7-27 14:54   4271   0
[h1]HTML的初次接触[/h1]其实细想起来,这也不是第一次基础HTML。半年之前,在学习爬虫的时候,就学过了解过一点的,今天可以说是正式开始接触HTML这门语言。
HTML(Hyper Text Markup Language),即超文本标记语言,是网页制作的必备。具体的解释,可以参考百度百科[sup][1][/sup],在这不作详细的介绍。另外还有说明一下,本文不会像网上的教程一样,对每个知识点都进行详细额讲解,只会涉及自己用到的一些内容。毕竟自己也是在边学边写这些内容,肯定会存在片面性的。想要深入学习的,害的靠自己动手,去找合适自己的资源和方法。那么现在就正式开始今天的内容。
[h2]基本知识[/h2]详细讲解之前,先了解一些基础的知识,便于理解后面的内容。
一个HTML的文档结构主要分为以下几部分:
文档声明、文档类型head头部信息:对整个HTML属性设置,主要的就是和CSS进行连接,设置样式。body主体信息:主要代码块,几乎页面所有的内容都在这里展现。


另外,HTML中所有的内容都是包括在标签内的。标签是由一对英文的尖括号()括起来的。一般来说,标签都是成对出现的,
  1. [/code],但也会有特殊的,只有单个标签,这些你遇到一个就记一个就好了。最后一个点就是 ,大多数的标签都会有属性,不同属性值对应不同样式设置。下文也会介绍,目前说遇到的某些属性的设置。
  2. [h2]简单页面创作[/h2]刚开始写HTML,学习制作网页,想要做出好看的样式,是很花时间的。简单的页面,可以参考网上的一些网站,然后起一个大概的网页构图,就可以开始练习了。这里对样式不作过多的要求,只要能练习[code]html
复制代码
即可,那就以之前写的文章为参考,写一个简单的网页。当中涉及到标题、图片、链接、段落文字以及列表等元素。接下来也会一一的讲解。
[h2]文本元素[/h2]顾名思义,文本元素就是针对网页上的所有文本的一个标签类元素。主要用到以下标签:
  1. h1
复制代码
~
  1. h6
复制代码
标题标签:对应一级到六级标题。
  1. p
复制代码
段落标签:一段文字
  1. em
复制代码
标签:
  1. strong
复制代码
标签:
另外还有换行标签
  1. [/code]、块区域标签[code]div
复制代码
  1. span
复制代码
。这些标签基本就可满足文本的需求了。
[h2]列表元素[/h2]列表元素主要分为有序、无序和自定义列表,一般是前两者用的相对较多。有序列表是
  1. [/code] ,默认是[code]start
复制代码
属性值为1开始,可以自由设定;另外常用的
  1. type
复制代码
属性值不同,也会有不同的效果,具体如下:
  1. l
复制代码
:数字1、2、3……
  1. a
复制代码
/
  1. A
复制代码
:对应a-z/A-Z
  1. i
复制代码
/
  1. I
复制代码
:对应小写/大写罗马数字
无序列表是由
  1. [/code]构成,默认为黑色实行圆点,可通过[code]type
复制代码
属性值修改:
1.
  1. disc
复制代码
:实心圆点2.
  1. circle
复制代码
:空心圆圈3.
  1. square
复制代码
:方形
[h2]超链接元素[/h2]链接元素是由
  1. a
复制代码
标签包括起来的,
  1. href
复制代码
属性值用来设置链接的地址,可以是内部链接、外部链接以及书签链接。点击链接时,默认是在本页面打开,也就是会覆盖当前的页面内容,通过
  1. target
复制代码
属性,修改其值为
  1. _blank
复制代码
即可在新的页面卡打开点击的链接。另外也要注意属性
  1. alt
复制代码
,设置这个属性之后,当你把鼠标放在链接上面,会有文字提示,这个文字提示就是自己设置的。为了规范和更好的阅读体验,建议给每个链接都设置一些这个属性值。
[h2]图像元素[/h2]
  1. img
复制代码
标签时用来标记图片的,需要一个属性来制定图片的位置。不同于链接中的
  1. href
复制代码
属性,
  1. img
复制代码
用的
  1. src
复制代码
来说明图片的地址。可以是绝对路径,也可以是相对路径。建议是相对路径,而且是把图片资源放在html文件的同一个文件夹中,这样可以防止绝对路径不可用的时候,加载不出图片。这里也有一个
  1. alt
复制代码
属性,功能和超链接中的相似,是指图片加载不成功的时候,在网页显示的文字,这样是为了方便有视力障碍的人阅读网页。
至此,一个简单的网页就基本完成了。没有太多的技巧在里面,多数都是基础的一些知识内容。
注:部分效果和代码如下



  1. [/code][code]
复制代码
  1. [/code][code]   
复制代码
  1.     手机软件推荐
复制代码
  1.    
复制代码
  1. [/code][code]
复制代码
  1.     写在前面
复制代码
  1.     最近这一年都处于水逆的时间,毕业一年多=,实际的工作时间确实少得可怜。最近才刚找到一份工作,正在为转正努力中......
复制代码
  1.         闲话不多讲,正式开始本次的文章。好久之前写了一篇《换手机,表情丢失??这里6000+个表情,任君选择...》,关于换手机表情包丢失怎么补充的,这次就推荐换手机或者电脑应该用的一些软件,这些都是本人喜欢用的一些。
复制代码
  1.     手机移动端
复制代码
  1.     其实手机本身就会自带一些软件,也基本能够满足一般的需求了。但对于我这种爱自己瞎折腾的人来说,个性化的软件才是王道。
复制代码
  1.     阅读器-(看-写-听)
复制代码
  1.    
复制代码
  1.         首先还是最重要的,先介绍办公文件这类文件的。其实这类的产品,市面上有很多的。比如WPS、Microsoft Office自家产品等等。一般来说,移动端的这类产品,需求点在于能够随时随地的浏览文件,对于其他的功能像编辑或者新建文件,并不是刚需。而且手机的屏幕小,操作起来不是很方便,通常都是电脑PC端更好点。这里介绍的产品是N doc。这款产品。虽不能修改,但是能看就可以。而且不仅能看office三大文件,同时还支持PDF、RTF、epub电子书和代码。
复制代码
  1.         
复制代码
  1.         而且还能跟云盘连接,进行同步文档,配合Windows的One Drive,就可以随时查看电脑的文档。
复制代码
  1.    
复制代码
  1.    
复制代码
  1.         第二个是关于资讯阅读的。自己平时喜欢看一些网站咨询,但是想看的是在太多,导致每次看完一个网站,在打开另外的时候,等待网页加载和筛选需要的信息,都得浪费不少时间。这里推荐的RSS阅读器就很好的解决了这个问题。
复制代码
  1.         这款RSS阅读器是Feeder,界面非常简洁。最左边就是自己订阅的RSS,会不定期的跟新,中间的发现页面可以去添加软件推荐的RSS源进行关注,或者搜索自己喜欢的RSS资源。对于感兴趣文章可以点击星号收藏起来 ,方便稍后阅读。要是默认的阅读界面对内功排版不是很适合,也可以用浏览器打开来阅读。那如果自己对于RSS不太熟悉,不知道哪些好,也不知道去哪里找,有没有现成的呢?答案是肯定的,文章就在这里 ,上面大神整理好的资源,只要把链接复制下来,再去发现页面大部分就能找到了。
复制代码
  1.    
复制代码
  1.         第四个软件是思维导图XMind。用这个主要是方便自己理清思路和逻辑条理。特别是在写代码的时候,需要将整体的逻辑分步骤实现,这时候就能体现它的好处的。手机端支持XMind、PNG
复制代码
  1.         和PDF三种文件类型的分享,无论是分享给别人,还是跨平台使用都很友好的。我是手机端和PC端配合使用的,毕竟大屏看的爽的。
复制代码
  1.         
复制代码
  1.    
复制代码
  1.     其他工具
复制代码
  1.    
复制代码
  1.         解压缩文件:RAR解压或者是ZArchive
复制代码
  1.         浏览器:Via或者夸克 就基本满足了,小小的安装包,该有的功能还是有。如果想要安装插件的可以尝试战斗民族的浏览器Yandex或者是Kiwi Browser
复制代码
  1.         其他:Microsoft Launcher,用来同步电脑和手机,方便讲电脑浏览的记录同步到手机,不过好像只针对Edge浏览器
复制代码
  1.    
复制代码
  1.    
复制代码
  1.     除了以上的工具,有些根本不用介绍,因为这些都是日常生活中必须要用到。比如说微信、QQ和支付宝,不用介绍你都会装上的。安装这些就基本满足正常的需求使用,但还是想要吐槽的是,自带的APP太多了,不仅没什么用,还不能卸载,占我内存空间。
复制代码
  1.    
复制代码
  1. [/code][code]
复制代码
[h2]References[/h2]
  1. [1]
复制代码
百度百科: https://baike.baidu.com/item/html,HTML的百度百科解释
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:5
帖子:1
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP