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

2017-01-12 19:15:01来源:CSDN作者:lfdfhl人点击

深入探讨Android异步精髓Handler


站在源码的肩膀上全解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有些深入的了解了,而这部分恰好是我的薄弱环节。

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

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

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


学习资料

  • w3school
  • 廖雪峰JavaScript教程
  • 传智播客前端培训课程
  • HTML & CSS 设计与构建网站
  • JavaScript & jQuery 交互式Web前端开发

版权声明

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

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文件

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台