谷哥的小弟学前端(01)——HTML常用标签（1）

探索Android软键盘的疑难杂症

 深入探讨Android异步精髓Handler

详解Android主流框架不可或缺的基石

 站在源码的肩膀上全解Scroller工作机制

Android多分辨率适配框架（1）— 核心基础

 Android多分辨率适配框架（2）— 原理剖析

 Android多分辨率适配框架（3）— 使用指南

自定义View系列教程00–推翻自己和过往，重学自定义View

自定义View系列教程01–常用工具介绍

 自定义View系列教程02–onMeasure源码详尽分析

 自定义View系列教程03–onLayout源码详尽分析

 自定义View系列教程04–Draw源码分析及其实践

 自定义View系列教程05–示例分析

 自定义View系列教程06–详解View的Touch事件处理

 自定义View系列教程07–详解ViewGroup分发Touch事件

 自定义View系列教程08–滑动冲突的产生及其处理

开篇语

前几天，我问校长：快年底了项目不是很忙，你觉得我该学点什么呢？Python?C++?还是.net呢？

校长回答了我四个字：学以致用

听到这个回答，我当时一下子有点懵，他说的是什么意思呢？我还没有来得及细想就被叫到会议室开会——项目的技术选型。在这个项目中可能需要采用cordova实现混合开发。既然是混合开发那么就离不开H5和JS了。那么混合开发可以从容地实现这个项目么？如果需要作出这个判断，那么就需要对H5和JS以及CSS有些深入的了解了，而这部分恰好是我的薄弱环节。

噢，噢，到这我大概明白了校长的意思：去学你工作中会用到的东西。那些暂时用不到的东西学了也就摆在那里了，没有机会去实践，时间久了也就淡忘了。所以，学就学目前用得上的东西，而且学了之后里面可以立马转换成生产力；这样的学习才是最有价值的，最高效的。

故在此开始对于前端的学习，并将此过程以博文的形式予以记录。

作为一名崭新的新手，不足之处，恳请大家斧正。

学习资料

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

HTML开发工具

在此选用Sublime Text3作为学习HTML的开发工具，至于该工具的下载及其安装过程不再赘述，但是请注意设置其编码方式：

文件 —> 保存使用编码 —> UTF-8 with BOM

HTML的结构

  <! DOCTYPE   html>
  <html>
      <head>
         <title></title>
      </head>
      <body>
      </body>
  </html>

在这个结构中：

<! DOCTYPE html >表示文档类型
<head> </head>表示html的头
<title> </title>表示html的标题
<body> </body> 表示html的主体

其中，<! DOCTYPE html >也叫做单标签，它只有开始标签没有结束标签；<body> </body>叫做双标签，它有开始标签也有结束标签。其实从这里也可以看出来<head> </head>和<body> </body>属于并列的关系而<head> </head>和<title> </title>属于嵌套的关系

HTML的Hello World

好了，工具也有了；HTML的最基本的结构也了解了，现在就来开始写一个最简单的关于HTML的Hello World吧

<!DOCTYPE html>
<html>
    <head>
        <title>hello world</title>
    </head>
    <body>
        <p>原创作者：谷哥的小弟</p>
        <p>博客地址：http://blog.csdn.net/lfdfhl</p>
   </body>
</html>

运行，查看效果：

HTML标签介绍

在对HTML有了最原始的、最朦胧的了解之后，我们开始对其标签作详细的认识。

先来看几个常用的单标签。

注释标签

注释标签用于给代码添加，格式为<!– –>，它的快捷键为Ctrl + /

<!DOCTYPE html>
<html>
    <head>
        <title>hello world</title>
    </head>
    <body>
        <!-- 版权声明-->
        <p>原创作者：谷哥的小弟</p>
        <p>博客地址：http://blog.csdn.net/lfdfhl</p>
   </body>
</html>

比如，此处就使用了注释标签来标注了该段代码的原作者及其版权信息。

换行标签

该标签非常简单，在文本中直接插入 即可

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
    </head>
    <body>
        <p>有心课堂<br>欢迎您的到来</p>
    </body>
</html>

如上例子所示，标签中的文件就将分成两行显示

横线标签

该标签也非常简单，在文本中直接插入<hr>即可，直接看示例：

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
    </head>
    <body>
        <!-- <br>是一个换行标签-->
        <p>有心课堂<br>欢迎您的到来</p>
        <!-- <hr>是一个横线标签-->
        <hr>
    </body>
</html>

再来看几个常用的双标签。

段落标签

在HTML中使用 表示段落，请看示例：

<!DOCTYPE html>
<html>
    <head>
        <title>心声</title>
    </head>
    <body>
        <p>谷歌和白度都是做搜索起家的科技公司</p>
        <p>但是谷歌在做操作系统和AI而白度却在卖盒饭和发布虚假医疗广告</p>
        <p>希望魏则西在天堂里远离苦痛，活得自在</p>
        <p>作恶的公司和人都不会有太好的下场</p>
    </body>
</html>

比如我们要展示几段话，那么可以将每段话放到一个 标签中。

标题标签

在HTML中使用<h> </h>表示段落，请看示例：

<!DOCTYPE html>
<html>
    <head>
        <title>标题</title>
    </head>
    <body>
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h4>标题4</h4>
        <h5>标题5</h5>
        <h6>标题6</h6>
    </body>
</html>

关于标题标签请注意：其范围是<h1> </h1>到<h6> </h6>并且字体依次减小

嗯哼，继续看下一个标签

文本标签

在HTML中使用 表示文本，且可在标签中为文本指定字体大小和颜色，请看示例：

<!DOCTYPE html>
<html>
    <head>
        <title>文本标签</title>
    </head>
    <body>
        <p><font size="11" color="red">本文原创作者：谷哥的小弟</font></p>
    </body>
</html>

在此，通过 显示了文字，并且使用size和color为文字指定了颜色和字体大小。

文本加粗标签

在HTML中使用 和 将文本加粗

文本斜体标签

在HTML中使用 和 将文本倾斜

文本删除线标签

在HTML中使用<del> </del>和<s> </s>为文本设置删除线

文本下划线标签

在HTML中使用<ins> </ins>和 为文本设置下划线

请看如下示例：

<!DOCTYPE html>
<html>
    <head>
        <title>文本格式化标签</title>
    </head>
    <body>
        <strong>这是文本加粗标签</strong>
        <br>
        <b>这也是文本加粗标签</b>
        <br>
        <br>
        <em>这是文本斜体标签</em>
        <br>
        <i>这也是文本斜体标签</i>
        <br>
        <br>
        <del>这是文本删除线标签</del>
        <br>
        <s>这也是文本删除标线签</s>
        <br>
        <br>
        <ins>这是文本下划线标签</ins>
        <br>
        <u>这也是文本下划线标签</u>
    </body>
</html>

运行结果如下：

图片标签

在HTML中使用<img> </img>标签显示图片，请看示例：

<!DOCTYPE html>
<html>
    <head>
    <title>图片标签</title>
    </head>
    <body>
        <img src="girl.jpg" title="这是我的女朋友" alt="该标签用于显示一张图" width="200" height="300">
        <img src="beauty.jpg" title="女朋友真漂亮" alt="该标签也用于显示图片" width="200" height="300">
        <img src="cute.jpg" title="女朋友真靓丽" alt="该标签同样用于显示图片" width="200" height="300">
    </body>
</html>

在该<img> </img>标签中常用src属性表示图片的来源和名称；用title属性设置鼠标放到图片上时显示的文字；用alt属性设置当图盘无法正常显示时对图片的描述；用width和height属性设置图片的宽和高

超链接标签

在HTML中使用<a> </a>标签实现超链接

利用超链接标签实现页面跳转

<!DOCTYPE html>
<html>
    <head>
        <title>超链接</title>
    </head>
    <body>
        <!-- 版权声明-->
        <p>原创作者：谷哥的小弟</p>
        <p>博客地址：http://blog.csdn.net/lfdfhl</p>
        <a href="http://stay4it.com/"
           title="有心课堂" target="_self">欢迎您的到来</a>
        <a href="http://blog.csdn.net/lfdfhl"
           title="谷哥的小弟" target="_blank">欢迎访问我的博客</a>
   </body>
</html>

在利用<a> </a>实现超链接时使用href属性指明跳转的地址；使用title属性设置当鼠标放到超链接上时显示的文字；用target属性指明超链接的跳转方式，其中_self表示不开启新窗口且在当前窗口打开跳转后的页面而_blank表示开启新窗口打开跳转后的页面。如果在一个页面中所有的超链接跳转方式均一致，那么可以在<head> </head>标签中进行统一的配置。

<base target="_self"></base>

表示该页面的所有超链接均在原窗口显示

<base target="_blank"></base>

表示该页面的所有超链接均在新窗口显示

在某些特殊的时候需要去除<a> </a>标签的跳转，那么只需设置href的属性值为#即可。

利用超链接标签实现锚链接

在很多网页下方都有一个标识”返回顶部”，该小功能就可以利用<a> </a>标签实现；请看示例：

<!DOCTYPE html>
<html>
    <head>
        <title>锚链接</title>
    </head>
    <body>
        <p id="top">这里是顶部</p>
        <p>原创作者：谷哥的小弟</p>
        <p>博客地址：http://blog.csdn.net/lfdfhl</p>
        <p>有心课堂：打破技术瓶颈，每天进步一点点</p>
        <p>网站地址：http://stay4it.com/</p>
        <p>原创作者：谷哥的小弟</p>
        <p>博客地址：http://blog.csdn.net/lfdfhl</p>
        <p>有心课堂：打破技术瓶颈，每天进步一点点</p>
        <p>网站地址：http://stay4it.com/</p>
        <p>原创作者：谷哥的小弟</p>
        <p>博客地址：http://blog.csdn.net/lfdfhl</p>
        <p>有心课堂：打破技术瓶颈，每天进步一点点</p>
        <p>网站地址：http://stay4it.com/</p>
        <p>原创作者：谷哥的小弟</p>
        <p>博客地址：http://blog.csdn.net/lfdfhl</p>
        <p>有心课堂：打破技术瓶颈，每天进步一点点</p>
        <p>网站地址：http://stay4it.com/</p>
        <p>原创作者：谷哥的小弟</p>
        <p>博客地址：http://blog.csdn.net/lfdfhl</p>
        <p>有心课堂：打破技术瓶颈，每天进步一点点</p>
        <p>网站地址：http://stay4it.com/</p>
        <a href="#top">返回顶部</a>
   </body>
</html>

在网页的顶部有个 标签，并且该为该标签设置了id属性。在网页的最尾部利用<a> </a>并将其href属性值设置为网页顶部的 的id从而实现让网页回滚到顶部。其实，HTML中每个标签都有id属性，它可以作为控件的唯一标识符；这点和Android的布局文件中为每个控件设置id属性是非常类似的。

利用超链接标签实现简单的下载功能

在利用<a> </a>标签可以实现页面跳转以外，还可以利用该标签实现非常简单的下载功能，请看示例：

<!DOCTYPE html>
<html>
    <head>
    <title>简单的下载功能</title>
    </head>
    <body>
        <a href="girl.zip">这里是打包好的高清无码的图片</a>
    </body>
</html>

该小功能的实现亦是非常简单的，只需将<a> </a>的href属性指向一个压缩文件即可。

列表标签

在HTML中有三种常用的列表：无序列表<ul> </ul>、有序列表<ol> </ol>、自定义列表<dl> </dl>，请看示例:

<!DOCTYPE html>
<html>
    <head>
    <title>HTML中的列表</title>
    </head>
    <body>
        <!-- 无序列表 -->
        前端开发知识
        <ul type="circle">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
        <br>
        <br>
        <!-- 有序列表 -->
        追女朋友的步骤
        <ol type="1" start="1">
            <li>故意制造邂逅</li>
            <li>索要联系方式</li>
            <li>搞定女孩她娘</li>
            <li>女孩子到手了</li>
        </0l>
        <br>
        <br>
        <!-- 自定义列表 -->
        <dl>
            <dt>售后服务</dt>
            <dd>产品维修</dd>
            <dd>补开发票</dd>
            <dd>技术支持</dd>
            <dd>相关政策</dd>
            <dt>关注我们</dt>
            <dd>官方微信</dd>
            <dd>技术网站</dd>
            <dd>售前咨询</dd>
            <dd>联系地址</dd>
        </dl>
    </body>
</html>

运行效果图如下：

在无序列表<ul> </ul>中使用中使用type属性设置每个子项前的小图标，其中type=”square”表示小方块，type=”circle”表示小圆点

在有序列表有序列表<ol> </ol>中使用type属性设置子线的排序形式，共计五种1,A,a ,i,I且利用start属性表示序号的起始值

在自定义列表<dl> </dl>中使用<dt> </dt>表示小标题，使用<dd> </dd>表示列表项

嵌入标签

在HTML中可以利用无序列表<embed> </embed>标签实现嵌入；比如在网页中嵌入背景音乐：

<embed src="song.mp3" hidden ="true"/>

滚动标签

在HTML中可以利用无序列表<marquee> </marquee>标签实现文本或者图片的滚动效果，请看示例：

<!DOCTYPE html>
<html>
    <head>
    <title>marquee标签</title>
    </head>
    <body>
        <marquee behavior="slide" direction="up"
                 width="500" height="500" bgcolor="pink">
          <img src="girl.jpg">
        </marquee>
    </body>
</html>

在<marquee> </marquee>标签中利用width，height，bgcolor属性设置滚动区域的大小和背景颜色；利用behavior属性设置了滚动的方式其值可取scroll、slide、alternate；利用direction属性设置滚动的方向其值可取left、right、up、down等值

元信息标签

在HTML中可以在<head> </head>标签中利用<meta> 标签来表示与页面有关的元信息。

利用<meta> 指定网页的编码

<meta charset="utf-8" >

如上所示，通过<meta> 的charset属性表明该页面采用UTF-8编码。

利用<meta> 指定网页的关键词

<meta  name="keywords"  content="Java,Android,Html,CC,JS">

如上所示，通过<meta> 的name=”keywords”和content属性设定了网页的关键词，从而起到SEO的作用。

利用<meta>设置网页的描述信息

<meta  name="description" content="这是我的技术博客">

如上所示，通过<meta> 的name=”description”和content属性设置了网页的描述

利用<meta>设置网页的重定向

 <meta http-equiv="refresh"  content="5;url=http://stay4it.com/">

如上所示，通过<meta> 的http-equiv=”refresh”和content属性设置了该页面在5秒钟后跳转到新的地址

代码小结如下：

<!DOCTYPE html>
<html>
    <head>
        <title>meta标签</title>
        <meta charset="utf-8" >
        <meta name="keywords"       content="Java,Android,Html,CC,JS">
        <meta name="description"    content="这是我的技术博客">
        <meta http-equiv="refresh"  content="5;url=http://stay4it.com/">
    </head>
    <body>
        <!-- 版权声明-->
        <p>原创作者：谷哥的小弟</p>
        <p>博客地址：http://blog.csdn.net/lfdfhl</p>
   </body>
</html>

链接标签

在HTML中可以在<head> </head>标签中利用<link>标签来用于链接外部css文件和收藏夹图标(favicon.ico)

<link rel="icon"  href="sina.ico">
<link rel="stylesheet"   href="test.css">

如上所示，通过<link> 的rel=”icon”和href属性指定了该网页的收藏夹图标(favicon.ico)；通过<link> 的rel=”stylesheet”和href属性指定了该网页所链接的CSS文件