前端入门 —— HTML 基础知识一勺烩

公司最近人手极度空缺,领导一声令下,让我和另一个 Android 小伙去支援 Java 组开发。秉承着“一块砖”的精神,我完全服从领导安排。做什么都是做,就怕自己停滞不前。羽哥也安慰我说:“技不压身”。但赶鸭子上架做了一周之后,发现根本不行。这一周下来,我连自己做了什么、怎么做的、原理流程都是什么一点都不知道。这样不行,只会复制粘贴可不行,况且大多数时候,从哪复制粘贴到哪我都不清楚。
于是下决心先入个门吧。我们过去主要就是改一些前端页面,那我就先从前端知识开始吧。
HTML,就是你了。就从你先开始!

HTML 是一种标记语言,它是用来描述网页格式的。虽然它本身不能显示在浏览器中,但经过浏览器的解释和编译,在浏览器中就可以正确显示 HTML 的格式。

1 HTML 元素

HTML 文档是由一个个元素拼凑而成的,元素的构成分为三部分:

  • 开始标签(opening tag)
  • 元素内容
  • 结束标签(closing tag)

1.1 元素语法

  • 以开始标签起
  • 以结束标签止
  • 元素内容即开始标签与结束标签中的内容
  • 某些 HTML 元素可具有空内容
  • 空元素在开始标签中进行关闭
  • 大多数元素都具有属性

1.2 元素实例及解析

下面看一个 HTML 实例:

这是第一个段落。

上面的实例用到了三个元素:

  • 元素:

    元素定义了 HTML 文档中的一个段落。

  • 元素:
    ​HTML 文档的主题。

  • 元素:
    元素定义了整个 HTML 文档。

然后,看一下在浏览器中显示的效果:

前端入门 —— HTML 基础知识一勺烩_第1张图片

GG,出现了中文乱码的问题。这种问题的解决方法在网上一搜一大把,我的解决方法是限定了一下编码格式:



 

这是第一个段落。

重新运行一下:

解决!

1.3 注意:


  • ​上面的元素解析中没有提到 !DOCTYPE ,因为它并不是元素的一部分,它只是一份声明,因为网络上有很多不同的文件,声明正确的 HTML 版本,让浏览器能够正确显示网页。
    完整的网络声明类型:DOCTYPE 参考手册

  • 别忘记结束元素标签
    ​虽然即便不写结束标签,大多数浏览器也能够正确的显示内容,但还是不要依赖这种写法。

  • 建议使用小写标签
    ​HTML 标签对大小写不敏感:

    等同于

    。但是万维网联盟(W3C)在 HTML 4 中推荐使用小写,并且在未来 (X)HTML 版本中强制使用小写。

2. HTML 属性

属性是 HTML 元素的附加信息,一般在元素的开始菜单中进行描述,并且属性总是以名称/键值对的形式出现。

2.1 属性实例





HEML 属性这是一个链接


看代码说话,上面代码中定义了一个链接,HTML 中链接由 标签定义,链接地址写在 href 属性中,其中 href="http://www.baidu.com"
即为元素的属性。
然后属性始终在括号内,属性值一般用双引号标注,单引号也可以。但是如果属性值中有双引号存在,那么属性值就必须用单引号标注。
看一下浏览器中运行效果:

2.2 属性参考手册大全

HTML 标准属性参考手册

3. HTML 标题

标题是通过

-
标签进行定义的,

是最大的标题,
是最小的标题。

3.1 标题实例





HEML 标题

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

效果:

前端入门 —— HTML 基础知识一勺烩_第3张图片

3.2 HTML 水平线


标签可以在 HTML 中创建水平线,可用于分割内容。
在代码中使用:





HEML 标题

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

hr 水平线:


段落1


段落2


段落3

运行效果:

前端入门 —— HTML 基础知识一勺烩_第4张图片

3.3 HTML 注释

HTML 中的注释与 Java 有所不同,是这样使用注释的:
``

4. HTML 段落

HTML 可以将文档分割成若干段落,方便阅读。

4.1 使用段落

段落是通过标签

进行定义的,在之前的代码中使用过,就不演示了。

4.2 换行

如果你不想将一段长文在产生一个新段落的情况下进行换行,就使用
标签进行分割。





HEML 段落

演示换
行效果

效果:

前端入门 —— HTML 基础知识一勺烩_第5张图片

4.3 注意:

在 HTML 代码中不能通过添加额外的空格或换行来改变输出的效果。
当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

5. HTML 文本格式化

文本格式化部分没有什么好说,直接看代码:





HEML 文本格式化文本加粗

文本斜体

电脑自动输出

上标下标

效果:

前端入门 —— HTML 基础知识一勺烩_第6张图片

代码释义很简单,就不讲了。

5.2 HTML 文本化标签

下面看一下常用的 HTML 文本化标签:

前端入门 —— HTML 基础知识一勺烩_第7张图片

5.3 HTML 计算机输出标签

前端入门 —— HTML 基础知识一勺烩_第8张图片

5.4 HTML 引文、引用及标签定义

前端入门 —— HTML 基础知识一勺烩_第9张图片

6. HTML 链接

HTML 使用标签 来实现超链接。超链接可以是一个字、一组词甚至是一张图片。

6.1 使用

上文中已经使用过链接,这里就不具体展出了。只需要知道格式就可以:
*链接文本*

6.2 target属性

使用 target 属性,可使被链接的文档在何处被打开:





HEML 链接这是一个链接


上面的代码实现在新窗口中打开链接:

前端入门 —— HTML 基础知识一勺烩_第10张图片

6.3 id 属性

id 属性可用于在一个 HTML 文档中创建标记。
具体实现:

7. HTML 头部

7.1 元素

head 元素包含了所有的头部标签元素。在 head 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。

7.2 </code> 元素</h3> <p>title 元素定义了不同文档的标题,包含浏览器工具栏的标题、收藏夹的标题以及搜索结果页面的标题。</p> <h3>7.3 <code><base></code> 元素</h3> <p>base 元素定义了基本的链接地址,该标签作为文档中所有链接的默认目标。</p> <h3>7.4 <code><link></code> 元素</h3> <p>link 标签定义了文档与外部资源的关系,通常用于链接到样式表。</p> <h3>7.5 <code><style></code> 元素</h3> <p>style 元素定义了文档引用的样式文件的地址,也可在 style 中直接定义样式来渲染 HTML 文档。</p> <h3>7.6 <code><meta></code> 元素</h3> <p>meta 元素描述了文档中的一些基本的元数据。这些元数据不显示在浏览器页面上,但会被浏览器解析。META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。</p> <h3>7.7 <code><script></code> 元素</h3> <p>通常用于加载 script 文件。</p> <h2>8. HTML 图像</h2> <h3>8.1 图像标签和源属性</h3> <p>图像由 <code><img></code> 标签定义,<code><img></code> 是空标签,即没有闭合标签。然后要在页面上显示图像,还要使用源属性——src,即图像的 url 地址。<br> 定义图像的代码:</p> <pre><code><!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>HEML 链接 ​ ![](D:\Personal\WallPaper\mountains-on-mars.png)

效果:

前端入门 —— HTML 基础知识一勺烩_第11张图片

显示成功!

8.2 alt 属性

alt 属性用来为图像定义一串可替换的文本。在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。
使用也十分简单,就在 img 元素中添加即可:





HEML 链接

​

![](D:\Personal\WallPaper\mountains-on-mars.png)


8.3 高度与宽度

可以看到,刚才显示的图像太大了,那么这里就可以通过设置图像的宽高来进行限定。
height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。





HEML 链接

​

![](D:\Personal\WallPaper\mountains-on-mars.png)


效果:

前端入门 —— HTML 基础知识一勺烩_第12张图片

9. HTML 表格

表格由

标签来定义,每个表格均有若干行(由 标签定义),每行又被分为若干格(由
标签定义)。
先看一个表格实例:





HEML 表格
第 1 行, 第 1 列 第 1 行, 第 2 列
第 2 行, 第 1 列 第 2 行, 第 2 列

效果:

前端入门 —— HTML 基础知识一勺烩_第13张图片

9.1 边框

表格的边框由 border 属性定义:





HEML 表格
第 1 行, 第 1 列 第 1 行, 第 2 列
第 2 行, 第 1 列 第 2 行, 第 2 列

效果:

前端入门 —— HTML 基础知识一勺烩_第14张图片

9.2 表头

表头由

标签定义:





HEML 表格
表头1 表头2
第 1 行, 第 1 列 第 1 行, 第 2 列
第 2 行, 第 1 列 第 2 行, 第 2 列

效果:

前端入门 —— HTML 基础知识一勺烩_第15张图片

关于表格就介绍这么多,更多样式的还是要在项目中活学活用。下面是表格标签:

前端入门 —— HTML 基础知识一勺烩_第16张图片

10. HTML 列表

HTML 列表分为有序列表和无序列表。

10.1 无序列表

无序列表使用

    标签进行描述,每个列表项始于
  • 标签,使用小黑点进行标记。

    
    
    
    
    HEML 列表
    • 香蕉
    • 苹果
    • 橘子

    效果:

    前端入门 —— HTML 基础知识一勺烩_第17张图片

    10.2 有序列表

    有序列表使用

      标签进行描述,每个列表项始于
    1. 标签,使用数字进行标记。
      在上面的代码中添加有序列表:

      
      
      
      
      HEML 列表

      无序列表

      • 香蕉
      • 苹果
      • 橘子


      有序列表

      1. 香蕉
      2. 苹果
      3. 橘子

      效果:

      前端入门 —— HTML 基础知识一勺烩_第18张图片

      10.3 自定义列表

      除此之外,HTML 还支持自定义列表。
      自定义列表不仅仅是一列项目,而是项目及其注释的组合。
      自定义列表以

      标签开始。每个自定义列表项以
      开始。每个自定义列表项的定义以
      开始。

      
      
      
      
      HEML 列表

      无序列表

      • 香蕉
      • 苹果
      • 橘子


      有序列表

      1. 香蕉
      2. 苹果
      3. 橘子


      自定义列表

      香蕉
      - 芭蕉科芭蕉属植物,又指其果实。
      苹果
      - 美国的一家高科技公司。
      橘子
      - 是芸香科柑桔属的一种水果。

      效果:

      前端入门 —— HTML 基础知识一勺烩_第19张图片

      11. HTML 区块

      大多数 HTML 元素都被定义为块级元素和内联元素。

      11.1 区块元素

      块级元素在浏览器中显示时,会以新行开始和结束。
      实例:

      ,

      ,

        ,

        • 元素
          元素就是块级元素。它没有特定的含义,只是将 HTML 各元素组合起来。
          元素另一个用途是替代
        进行表格布局,
        元素只显示表格化数据使用。

        11.2 内联数据

        内联数据显示时通常不会以新行开始。
        实例: ,

        , ,

        • 元素
          是内联元素,它也没有任何特定含义,可用作文本的容器。另外,与 css 一同使用时, 元素可用于为一些文本设置文本属性。

        12. HTML 表单

        表单使用

        标签来设置,表单元素允许用户在表单中输入数据,如文本域、下拉列表、单选/复选框等。
        多数情况下被用到的表单标签是输入标签 ,输入类型由 type 类型属性定义,大多数被用到的输入类型如下。

        12.1 文本域

        文本域通过 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

        12.2 密码

        密码字段通过标签 来定义:

        12.3 单选按钮

        单选按钮通过 来设置:

        12.4 复选按钮

        复选按钮通过 来设置:
        评论

        12.5 按钮

        按钮通过 来设置:

        综合以上表单输入类型,来看一下最终在浏览器上的实现效果:

        13. HTML iframe

        Iframe 标记,又叫浮动帧标记,你可以用它将一个 HTML 文档嵌入在另一个 HTML 中显示。

        13.1 使用

        iframe 语法为:

        看一下使用方法,我们以之前显示图像的 HTML 文档为例,将他显示在 iframe 文档中:

        
        
        
        
        HEML iframe
        
        
        

        效果:

        前端入门 —— HTML 基础知识一勺烩_第21张图片

        13.2 宽高设置

        可以看到,上面显示的 HTML 文档显示的不全,那么也可以像设置图像宽高一样,设置其宽高:

        
        
        
        
        HEML iframe
        
        
        

        效果:

        前端入门 —— HTML 基础知识一勺烩_第22张图片

        这次显示效果好多了。

        13.3 移除边框

        如果你嫌显示边框很丑,那么你可以移除它。

        frameborder="0"

        效果:

        前端入门 —— HTML 基础知识一勺烩_第23张图片

        13.4 显示目标链接

        iframe 也可以显示一个目标链接的页面,但链接的属性必须使用 iframe 的属性。

        
        
        
        
        HEML iframe

        百度一下

        上面代码结合了这几个 iframe 的示例,通过代码可以看出,点击百度一下
        链接,会在 iframe 上面显示百度页面。看一下效果:

        前端入门 —— HTML 基础知识一勺烩_第24张图片

        14. HTML 脚本

        脚本可以使 HTML 页面具有更强的动态性和交互性。

        14.1

        你可能感兴趣的:(前端入门 —— HTML 基础知识一勺烩)