我了解的:HTML入门

    技术2022-07-11  145

    我所知道的HTML内容做个记录。

    HTML,指的是超文本标记语言(Hyper Text Markup Language)。基础概念,知道为什么叫HTML。

    当你看到这个文章的时候,至少是已经对HTML感兴趣了,其他内容也多做解释。

    最基本的网页是由一个个标签组成的。

    要怎么查看呢?

    这里以Chrome 和 百度 做为例子(Firefox也可以),来介绍怎么查看一个网站的标签。打开百度的新闻页面。在页面空白部分点击‘右键’,弹出的菜单栏最底部,有一个‘检查’功能(快捷键 Ctrl+Shift+I)。

    点击Elements,在这里就可以看到一个网站的标签内容。具体网站的构成,感兴趣的话可以通过这种方式自己查看。

    网页的构成

    不同的页面有不同的内容,但是最基本的标签构成都是一样的。

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>

    这个就是HTML 最基本的标签内容,这样一个网站也就完成了。一般网站看到的内容,都是根据对应的规则在这之中填充内容。

    介绍

    最上面的 < !DOCTYPE html> ,必须放在整个 < html> 之前,必须是第一行。它是告诉浏览器正确的显示整个网页。他并不是一个标签,只是一个‘声明’。是避免浏览的怪异模式,使浏览器按照 W3C 去渲染整个html内容。

    html 标签。

    html它是一个双标签。整个网页的内容都是在这个标签之中。lang属性是定义HTML 文档的语音类型,主要作用是告诉浏览器语言类型。默认的都是书写成 lang=“en”。如果感兴趣的话可以去具体了解这个属性的作用。 在html 标签的内部,一般分为两大部分。head 和 body部分。

    head 区域

    head也是一个双标签。在 head 之中一般会放置具有辅助功能的 meta 标签和定义网站标题的 title 标签。

    <title>网站名称 </title>

    title 标签中的内容就是打开浏览器时所看见的网站名称。

    <meta charset="UTF-8"> 这个是定义了HTML文档的编码,一般是 UTF-8。 当然<meta> 标签的功能十分强大。 他拥有不同的属性和参数,这些属性也会让网页实现不同的功能。 毕竟一个好的辅助往往是十分关键的。
    body 区域
    <body> 网站页面的主体内容 </body>

    在大部分网站中,用户所看见的绝大数内容,都是写在body中的。包括只有所讲的标签内容。

    以上就是一个HTML 的简单构成。

    标签分类

    标签分类的方法有很多:如单、双标签分类;行、块标签。

    单标签和双标签

    常见的双标签

    <title></title> <div></div> <ul></ul> <li></li> <span></span>

    常见的单标签

    <br /> <img /> <input /> <meta>

    一般会省略做为结尾的 / 写作:

    <br> <img> <input>

    通过上面的标签可以看到,标签的构成 是以<开始,> 结束。单双标签的区别就是,是一对标签还是单个标签。 双标签 :以< > 开始, </ > 结尾。在这两者之中书写其他的内容。 单标签就是:< />。 单双标签之间是不能切换着写的。一个标签是单标签还是双标签绝对不能弄混。否则会导致整个 HTML 布局的混乱。 具体的标签则是根据不同的字母去定义。当然不同的标签有不同的含义和不同的用途。这个下一篇会具体介绍。

    行标签和块标签

    初步定义

    下面的单个标签指的是一个完整的标签。 块标签:单个标签独自一行占据,无论在HTML 文件内是如何书写都会再起一行的,我们称之为块标签。 行标签:在HTML 书写,都是在同一行中,不会主动的换行的我们称之为行标签,也叫内联标签。

    这里只做一个最基本的介绍,具体内容会单独写一篇,包括介绍标签的具体作用,因为这一块的内容是一开始学习HTML最重要的。

    总结

    一定要学会使用浏览器的‘检查’功能(推荐使用Chrome或者Firefox)。这个功能对于开发web十分重要,后面的内容也会结合这个功能讲解。 一款好的编辑器可以帮助开发人员节省大量的时间。但是在入门HTML 的时候,标签最好还是手打。通过一个一个的符号和字母的输入加深印象。不要一开始就去使用编辑器自带的提示补全功能。

    Processed: 0.010, SQL: 10