快速入门HTML-----入门HTML必看的文章

最新推荐文章于 2024-03-13 00:00:00 发布

蔡睿智

最新推荐文章于 2024-03-13 00:00:00 发布

阅读量610

点赞数 2

分类专栏： Web前端文章标签：快速入门HTML 快速了解HTML 什么是HTML 是时候了解HTML 要学HTML的看过来

本文链接：https://blog.csdn.net/ss8860524/article/details/53259769

版权

Web前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

之前一直从事的是Android开发，因个人发展需要学习HTML，结合以前的Android学习经验，想与大家分享一下快速学习HTML方法。一下全为个人之见，有更好的想法欢迎交流。邮箱地址：2944198612@qq.com;

什么是HTML:超文本标记语言。“超文本”是指页面内可以包含图片，链接，音乐，甚至是程序等非文字元素。它的结构包括"头部分"即 Head ，"主体部分"即Body.其中Head部分提供关于网页的信息，Body提供页面的具体内容。

那么HTML是什么样的？

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>这就是一个HTML文档</title>
</head>

<body>
 欢迎访问蔡睿智的博客<a href="blog.csdn.net/ss8860524/article/details/52985019" style="color:red">Android数据存储方式之文件存储详解 </a>
</body>
</html>

加载这段HTML的样式如下:

所有的HTML文档都应该有一个<html>标签，<html>标签可以包含两个部分：<head>与<body>。

<body>标签用于包含整个文档的一般信息，比如文档的标题（<title>标签用于包含标题），对整个文档的描述，文档的关键字等等。文档的具体内容就要放在<body>标签里了。
<a>标签用于表示链接，在浏览器中查看HTML文档时，点击<a>标签括起来的内容时，通常会跳到另一个页面。这个要跳转到的页面的地址由<a>标签的href属性指定。这个要跳转到的页面的地址由<a>标签的href属性指定。上面的<a href="http://deerchao.net">中，href属性的值就是http://deerchao.net。

HTML的文档可以包含的内容: 通过不同的标签，HTML文档可以包含不同的内容，比如文本，链接，图片，列表，表格，表单，框架等等。

文本

HTML对文本的支持是最丰富的，你可以设置不同级别的标题，分段和换行，可以指定文本的语义与外观，可以说明文本是引用自其它的地方，等等等等。

链接

链接用来指出内容与另一个页面或当前某个地方有关。

图片

图片用于使页面更加完美，或者提供更多的信息。

列表

列表是用于说明一系列条目是彼此相关的。

表格

表格是按行与列将数据组织在一起的形式。也有不少人使用表格进行页面布局。

表单

表单通常由文本输入框，按钮，多选框，单选框，下拉列表等组成，使用HTML页面更有交互性。

框架

框架使页面能包含其他的页面。

HTML文档格式详细说明:HTML文档可以用任何文档编辑器(如:记事本，UltraEdit等等)创建，编辑。因为它的内容本质就是一些文本。在HTML文本中，用尖括号括起来的部分称为标签。如果想在正文里使用尖括号（或者大与号小与号，总之是同一个东西），必须使用字符转义。" < " 用该使用" < "代替，" > "则使用" > " ，至于" &"符号本身则应该使用" & "替代。标签本质上是对它所包含的内容的说明，可能会有属性，来给出更多的信息。比如<img> (图片) 标签有src属性(用于指明图片的地址)，width与height属性(用于说明图片的宽度和高度)。HTML里能使用哪些标签，这些标签分别可以拥有哪些属性，都是有规定的。后面我会对一些的常用标签做出简短介绍。标签通常由开始与结束部分(也被称为开始标签与结束标签)，他们一起限定了这个标签所包含的内容。属性只能在开始时指定，属性值可以用单引号或者双引号括起来。结束标签都可/加上标签名来表示。有时候，有些标签并不包含的内容(只包括自己的属性，甚至连属性都没有)，这种情况下，可以写成类似这样: <img src="logo.gif" />。注意最后的一个空格和一个反斜杠，它说明这个标签已经结束，不需要单独的结束标签了。某些标签包含的内容中还可以有新的标签，新的标签甚至可能还可以与包含它的标签的名称相同(哪些标签可以包含标签，可以包含哪些标签也是有规定的)。比如：

<div>
  <div>分类目录...</div>
  <div>当前分类内容列表...</div>
</div>

在这种情况下， 最后出现的标签应该最先结束,反之也是如此。

HTML文档里所有的空白符（空格，Tab，换行，回车）会被浏览器忽略，唯一的例外是空格，对空格的处理方式是所有连续的空格被当成一个空格，不管有一个，还是两个，还是100个。之所以有这样的规则是因为忽略空白符能让使用HTML的作者以他觉得最方便的格式来排列内容，比如可以在每个标签开始后增加缩进，标签结束后减少缩进。由于英语文本中空格用得很普遍（用于分隔单词），所以对空格做了这样的特殊处理。如果要显示连续的空格（比如为了缩进），应该用"   "来代表空格。

HTML常用标签介绍：

A.文本：

1.最常使用的标签是<font>了，它用于改变字体，字号，文字颜色。

<font size="6">6</font>
<font size="4">4</font>
<font color="red" size="5">红色的5</font>
<font face="黑体">黑体的字</font>

效果如下：

2.加粗，下划线，斜体字也是常用的文字效果，它们分别用<b>,<u>,<i>表示：

<b style="color:red">这是红色的加粗</b>
<i style="color:green">这是绿色的斜体</i>
<u style="color:blue">这是蓝色的下划线</u>

效果如下：

3.在HTML里，用来表示标题的标签有：<h1>,<h2>,<h3>,<h4>,<h5>,<h6>，它们分别表示一级标题，二级标题，三级标题...：

<h1>这就是一个HTML文</h1>
<h2>什么是HTML</h2>
...
<h2>HTML是什么样的</h2>
...

效果如下：

B.图片：

1.<hr>标签用于在页面上添加横线。可以通过指定width和color属性来控制横线的长度和颜色。

<hr width="90%" color="red" />

效果如下：

2.<img>标签用于在页面上添加图片，src属性指定图片的地址，如果无法打开src指定的图片，浏览器通常会在页面上需要显示图片的地方显示alt属性定义的文本。

<img src="http://avatar.csdn.net/7/6/E/1_ss8860524.jpg" alt="图片简介" />

效果如下：

C.链接：

1. 超级链接用<a>标签表示，href属性指定了链接到的地址。<a>标签可以包含文本，也可以包含图片。

<a href="http://deerchao.net">Unibetter大学生论坛</a>
<a href="http://validator.w3.org"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="验证HTML" /></a>

效果如下：

D.分段与换行：

1.由于HTML文档会忽略空白符，所以要想保证正常的分段换行的话，必须指出哪些文字是属于同一段落的，这就用到了标签<p>。

<p>这是第一段。</p>
<p>这是第二段。</p>

效果如下：

2.也有人不用<p>，而用<br>。<br>只表示换行，不表示段落的开始或结束，所以通常没有结束标签。

这是第一段。<br>
这是第二段。<br />
这是第三段。

效果如下：

3.有时，要把文档看作不同的部分组合起来的，比如一个典型的页面可能包括三个部分：页头，主体，页脚。<div>标签专门用于标明不同的部分：

<div>页头内容</div>
<div>主体内容</div>
<div>页脚内容</div>

效果如下：

E.表格：

1.HTML文档在浏览器里通常是从左到右，从上到下地显示的，到了窗口右边就自动换行。为了实现分栏的效果，很多人使用表格（<table>）进行页面排版（虽然HTML里提供表格的本意不是为了排版）。

<table>标签里通常会包含几个<tr>标签，<tr>代表表格里的一行。<tr>标签又会包含<td>标签，每个<td>代表一个单元格。

效果如下：

F.列表：

1.表格用于表示二维数据（行，列），一维数据则用列表表示。列表可以分为无序列表（<ul>），有序列表（<ol>）和定义列表（<dl>）。前两种列表更常见一些，都用<li>标签包含列表项目。无序列表表示一系列类似的项目，它们之间没有先后顺序。有序列表中各个项目间的顺序是很重要的，浏览器通常会自动给它们产生编号。

<div style="color:#F36">
<ul >
  <li>这是无序列表</li>
  <li>苹果</li>
  <li>桔子</li>
  <li>桃</li>
</ul> 
</div>

<div style="color:#3F6">
<ol>
  <li>这有无序列表</li>
  <li>打开冰箱门</li>
  <li>把大象赶进去</li>
  <li>关上冰箱门</li>
</ol> 
</div>

效果如下：

G.框架：

<frameset rows="15%,*">
     <frame src="top.html" name=title scrolling=no>
     <frameset cols="20%,*">
          <frame src="left.html" name=sidebar>
          <frame src="right.html" name=recipes>
     </frameset>
</frameset>

这篇文章只是让从没有接触过HTML的人对HTML有个初步的印象，所以很多东西都没有谈到。本文并没有列出HTML中所有的标签，对于列出的标签也没有介绍它们的全部属性。另外，没有提到的东西里还包括我觉得非常重要的CSS, JavaScript, XHTML, XML, Web Standards, HTML5，以及它们与HTML的关系。不过这些也不太可能在30分钟内学会，好在只要入了门，就能利用网上很多资源继续学习。当然，如果有一本纸质书，就更好了。写到这里我也要下班了，时间把握的还不错刚好8点，希望有好的想法的大牛一起交流，毕竟技术路上学无止境，共勉。