牧神记 超级怪兽工厂 择天记 神门 放开那个女巫 帝师 绝世武魂 元龙 王牌女助 民国之文豪崛起 大魏宫廷 我是至尊 白银霸主 电影的世界 全职高手 一念永恒 未来天王 重生完美时代 国民校草宠上瘾 超凡传 元气少年 盛世帝王妃 斗罗大陆 妙手小村医 斗战狂潮 重生之财源滚滚 神藏 道君 玄界之门 万界天尊 俗人回档 大文豪 重生豪门之强势归来 侠行天下 天域神座 惊悚乐园 三生三世十里桃花 圣墟 捉蛊记 逆鳞 武道宗师 橙红年代 我真是大明星 逍遥梦路 山野杂家 超级神基因 美食供应商 文化入侵异世界 我的姐姐是大明星 劫天运 阴阳代理人之改命师 悟空传 逆流纯真年代 亵渎 超级教师 废土 大主宰 官榜 师士传说 盛唐风华 校花的贴身保镖 大唐双龙传 全职法师 网游之大盗贼 三国之最风流 仙路至尊 机动风暴 死神逃学日记 极道天魔 天骄战纪 大官人 黑客 盖世帝尊 无疆 奋斗在红楼 重生之大涅磐 绝世战魂 少年医仙 许仙志 苗疆蛊事 万妖之祖 变形记 微微一笑很倾城 皇族 龙王传说 嫡女重生记 红楼梦 天影 步步生莲 九鼎记 女总裁的贴身兵王 神印王座 纯阳 光荣之路 夜天子 法医狂妃 幽暗主宰 逆天邪神 疯巫妖的实验日志 青囊尸衣 校花 逍遥游 妖神记 巨星 明朝那些事儿 复活之战斗在第三帝国 天道图书馆 仙侠世界 独闯天涯 最后一个道士 诸神的黄昏 混沌剑神 网游之天谴修罗 龙血战神 武动乾坤 校园绝品狂徒 一品江山 傲剑凌云 雪鹰领主 花豹突击队

谷哥的小弟学前端(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有些深入的了解了,而这部分恰好是我的薄弱环节。

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

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

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


学习资料


版权声明


HTML开发工具

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

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


HTML的结构

  <! DOCTYPE   html>
  <html>

      <head>

         <title></title>

      </head>

      <body>

      </body>

  </html>

在这个结构中:

  1. <! DOCTYPE html >表示文档类型
  2. <head> </head>表示html的头
  3. <title> </title>表示html的标题
  4. <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>

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

换行标签

该标签非常简单,在文本中直接插入<br>即可

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

如上例子所示,<p></p>标签中的文件就将分成两行显示

横线标签

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

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

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

段落标签

在HTML中使用<p> </p>表示段落,请看示例:

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

        <p>谷歌和白度都是做搜索起家的科技公司</p>

        <p>但是谷歌在做操作系统和AI而白度却在卖盒饭和发布虚假医疗广告</p>

        <p>希望魏则西在天堂里远离苦痛,活得自在</p>

        <p>作恶的公司和人都不会有太好的下场</p>

    </body>
</html>

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

标题标签

在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中使用<font> </font>表示文本,且可在标签中为文本指定字体大小和颜色,请看示例:

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

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

文本加粗标签

在HTML中使用<strong> </strong><b> </b>将文本加粗

文本斜体标签

在HTML中使用<em> </em><i> </i>将文本倾斜

文本删除线标签

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

文本下划线标签

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

请看如下示例:

<!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>

在网页的顶部有个<p> </p>标签,并且该为该标签设置了id属性。在网页的最尾部利用<a> </a>并将其href属性值设置为网页顶部的<p> </p>的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文件

posted on 2017-01-07 15:36 张振伦 阅读(...) 评论(...) 编辑 收藏

导航

公告