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

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

<div>
  <div>分类目录...</div>
  <div>当前分类内容列表...</div>
</div> 
                  在这种情况下,最后出现的标签应该最先结束,反之也是如此。

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

                    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.框架:

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

<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点,希望有好的想法的大牛一起交流,毕竟技术路上学无止境,共勉。     

       








阅读更多
个人分类: Web前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭