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

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

1 HTML 元素

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

开始标签（opening tag）
元素内容
结束标签（closing tag）

1.1 元素语法

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

1.2 元素实例及解析

下面看一个 HTML 实例：





这是第一个段落。

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

元素：

元素定义了 HTML 文档中的一个段落。
元素：
HTML 文档的主题。
元素：
元素定义了整个 HTML 文档。

然后，看一下在浏览器中显示的效果：

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 标题



一级标题
二级标题
三级标题
四级标题
五级标题
六级标题

效果：

3.2 HTML 水平线

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





HEML 标题



一级标题
二级标题
三级标题
四级标题
五级标题
六级标题



hr 水平线：
 
 段落1
 
 段落2
 
 段落3

运行效果：

3.3 HTML 注释

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

4. HTML 段落

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

4.1 使用段落

段落是通过标签

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

4.2 换行

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





HEML 段落



演示换
行效果

效果：

4.3 注意：

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

5. HTML 文本格式化

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





HEML 文本格式化



文本加粗


文本斜体


电脑自动输出


^上标 和 _下标

效果：

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

5.2 HTML 文本化标签

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

5.3 HTML 计算机输出标签

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

6. HTML 链接

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

6.1 使用

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

6.2 target属性

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





HEML 链接



这是一个链接

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

6.3 id 属性

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

在HTML文档中插入ID:
有用的提示部分
在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：
访问有用的提示部分
或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：

访问有用的提示部分

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)
效果：

显示成功！

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)

效果：

9. HTML 表格

表格由

标签来定义，每个表格均有若干行（由标签定义），每行又被分为若干格（由

标签定义）。
先看一个表格实例：





HEML 表格




 
  第 1 行, 第 1 列
       第 1 行, 第 2 列
 
 
 
  第 2 行, 第 1 列
       第 2 行, 第 2 列

效果：

9.1 边框

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





HEML 表格




 
  第 1 行, 第 1 列
       第 1 行, 第 2 列
 
 
 
  第 2 行, 第 1 列
       第 2 行, 第 2 列

效果：

9.2 表头

表头由

标签定义：





HEML 表格




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

效果：

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

10. HTML 列表

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

10.1 无序列表

无序列表使用

标签，使用小黑点进行标记。





HEML 列表




香蕉
苹果
橘子

效果：

10.2 有序列表

有序列表使用

标签，使用数字进行标记。
在上面的代码中添加有序列表：





HEML 列表



无序列表

香蕉
苹果
橘子








有序列表

香蕉
苹果
橘子

效果：

10.3 自定义列表

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

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

开始。





HEML 列表



无序列表

香蕉
苹果
橘子








有序列表

香蕉
苹果
橘子








自定义列表

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

效果：

11. HTML 区块

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

11.1 区块元素

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

R Mapping的世界里，有两个基本的也是重要的东东需要了解，即VO，PO。它们的关系应该是相互独立的，一个VO可以只是PO的部分，也可以是多个PO构成，同样也可以等同于一个PO（指的是他们的属性）。这样，PO独立出来，数据持按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.

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

1 HTML 元素

1.1 元素语法

1.2 元素实例及解析

1.3 注意：

2. HTML 属性

2.1 属性实例

2.2 属性参考手册大全

3. HTML 标题

是最大的标题， 是最小的标题。 3.1 标题实例 HEML 标题 ​ 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 效果：

是最小的标题。

3.1 标题实例

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

3.2 HTML 水平线

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

3.3 HTML 注释

4. HTML 段落

4.1 使用段落

4.2 换行

4.3 注意：

5. HTML 文本格式化

5.2 HTML 文本化标签

5.3 HTML 计算机输出标签

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

6. HTML 链接

6.1 使用

6.2 target属性

6.3 id 属性

7. HTML 头部

7.1 元素

8.2 alt 属性

8.3 高度与宽度

9. HTML 表格

9.1 边框

9.2 表头

10. HTML 列表

10.1 无序列表

10.2 有序列表

10.3 自定义列表

11. HTML 区块

11.1 区块元素

11.2 内联数据

12. HTML 表单

12.1 文本域

12.2 密码

12.3 单选按钮

12.4 复选按钮

12.5 按钮

13. HTML iframe

13.1 使用

13.2 宽高设置

13.3 移除边框

13.4 显示目标链接

14. HTML 脚本

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

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

3.1 标题实例

`HEML 标题一级标题二级标题三级标题四级标题五级标题六级标题`

效果：