讲给后台程序员看的前端系列教程(02)——HTML5标签(1)
C语言自学完备手册(33篇)
Android多分辨率适配框架
HTML5前端开发实战系列教程
MySQL数据库实操教程(35篇图文版)
推翻自己和过往——自定义View系列教程(10篇)
走出思维困境，踏上精进之路——Android开发进阶精华录
讲给Android程序员看的前端系列教程(40集免费视频教程+源码)
版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
HTML不是程序设计语言，而是一种标记语言，它用一些标记、标签来说明文本的显示效果。要制作网页和建立网站，就必须对HTML语言有所了解。客观地讲：HTML标签没有多少逻辑性而言，为了大家更好的理解和记忆，我们对这些标签进行分门别类的讲解，主要分为：
-
HTML常用标签
-
HTML文本标签
-
HTML语义标签
-
HTML结构标签
-
HTML列表标签
-
HTML表格标签
-
HTML表单标签
-
HTML新增标签和API
嗯哼，来吧，我们从最常用的标签开始学习。咋了？你竟然有点担心学不会！？别逗了，这部分和我们常写的Java比起来简单多了，它的逻辑性也弱得多。所以，大兄弟你大可放心，就像看电影那样：一手拿着爆米花，一手拿着可乐，也完全可以看懂本系列教程。
HTML常用标签
我们先来看一些最常用的HTML标签。
p标签
p标签在HTML中常用于表示段落，它是英文单词paragraph的缩写。p标签的用法非常简单，只需要在标签中放置一段文本即可。
语法及其常用属性如下：
<p align="">段落文本p>
在该语法中，align属性表示对齐方式，常用取值如下：
- left：左对齐(默认)
- right：右对齐
- center：居中对齐
示例如下：
<p align="left">2017，顶着刘海的iPhoneX带着“史上升级变动最大”的iOS11，依然碎片化严重的Android带着“更快、更强大、更安全” 的8.0来到我们面前，忽思十年初，那个触 屏的、没有物理键盘的智能手机惊艳了我 ，但连个复制粘贴功能都没有的时光。回首一顾，从2007到2017，从诺记的Symbian、摩托罗拉的Linux、苹果的iOS、微软的Windows Phone、三星的 Tizen到Google的Android等，移动操作系统也曾百花齐放，但经过十年厮杀各自蚕食，格局已相当明朗，只剩下了iOS和Android两大巨头p>
在浏览器中运行之后可以发现：p标签的上下自动保留大约一行宽度的留白，这和我们平时看见的文章的每个段落是一样的。
h标签
h标签用于表示标题，它是英文单词header的缩写。我想这个单词对于Android程序员来说是再熟悉不过了吧；例如，给ListView，Recyclerview设置header和footer。在HTML中h标签细分为h1~h6，请注意：h后的数字越大，那么标题所对应的字体越小。
语法及其常用属性如下：
<hx align="">标题文本p>
在该语法中，align属性表示对齐方式，常用取值如下：
- left：左对齐(默认)
- right：右对齐
- center：居中对齐
示例如下：
<h1 align="left">这里是h1h1>
<h2 align="left">这里是h2h2>
<h3 align="left">这里是h3h3>
<h4 align="right">这里是h4h4>
<h5 align="center">这里是h5h5>
<h6 align="center">这里是h6h6>
hr标签
hr标签用于表示一条水平横线，它是英文Horizontal Rule的缩写。
语法及其常用属性如下：
<hr align="" size="" color="" width="" />
在该语法中，各属性作用如下：
align属性表示对齐方式，常用取值如下：
- left：左对齐
- right：右对齐
- center：居中对齐(默认)
size属性表示以像素为单位表示水平线的粗细，默认值为2
color属性表示水平线的颜色，可采用颜色名称、十六进制RGB、rgb(r,g,b)表示
width属性表示水平线的宽度，可采用像素值表示其宽度；亦可采用浏览器窗口的百分比表示其宽度；默认值为100%
示例如下：
<hr align="center" size="3" color="red" width="100%" />
在页面中只用写一个hr标签，就可以表示一条水平横线。
br标签
br标签用于表示换行，它在英文所对应的单词是break。它的用法也非常简单，示例如下：
<br />
nobr标签
会了刚才的br标签，再来看nobr就很简单了；该标签表示不换行。比如，我们想表示一个很长的数学公式，需要将其显示在同一行，从而避免换行后导致可读性变差产生歧义。
<nobr>这里是一个很长的数学公式，不能换行显示，只能在一行显示。这里是一个很长的数学公式，不能换行显示，只能在一行显示。这里是一个很长的数学公式，不能换行显示，只能在一行显示。这里是一个很长的数学公式，不能换行显示，只能在一行显示。nobr>
center标签
center标签表示居中显示，比如我们想将一句话显示在页面的水平方向的中间，可以这么做：
<center>测试center标签center>
marquee标签
marquee标签用于表示跑马灯效果。做Android开发的童鞋还记得不，在TextView中也有类似的属性：android:ellipsize=“marquee”；它们是非常类似的。
<marquee behavior="scroll" direction="left">
<p>测试marquee标签p>
marquee>
在marquee标签中可以通过behavior和direction属性控制跑马灯的不同效果。
button标签
button标签用于表示按钮，这和我们在Android开发中常用的Button控件是完全一样的。
<button type="button" onclick="onButtonClick()">This is a buttonbutton>
<script type="text/javascript">
function onButtonClick(){
alert('You click button');
}
script>
此处，我们给button标签设置一个监听器，当用户点击button后利用JavaScript弹出一个对话框。
a标签
a标签在HTML中常用于表示锚点和超链接，它是英文中anchor的缩写；在此，我们主要来瞅瞅利用a标签实现超链接。
<a href="http://blog.csdn.net/lfdfhl" title="谷哥的小弟" target="_blank">请点击此处的超链a>
在a标签中利用href属性指明超链接的地址，利用title表示当鼠标悬停在超链接时的提示文字，利用target属性表示打开超链接的方式。如果target的取值为_blank表示在新窗口中打开超链接；假若target的取值为_self表示在当前窗口中打开超链接。
img标签
img标签在HTML中常用于表示图像，它是英文中image的缩写。
语法及其常用属性如下：
<img src="" alt="" title="" width="" height="" vspace="" hspace="" />
在该语法中，各属性作用如下：
src属性表示图片路径
alt属性表示图片不能正常显示时的替换文字
title属性表示鼠标悬停在图片上时的显示文字
width属性表示图片的宽度
height属性表示图片的高度
vspace属性表示图片的顶部和底部的留白
hspace属性表示图片的左侧和右侧的留白
通常情况下：如果不给img标签设置宽和高，那么图片会按照其原始尺寸显示。假若只设置其中一个值，那么另外一个值会自动按照原图的比例进行调整。为了排版的美观，通常设置vspace和hspace用于调整图片的垂直边距和水平边距。
示例如下：
<img src="img/blog.jpg" alt="头像" title="博客头像" vspace="20" hspace="20" />
源码和页面
在此，附上本节示例源码：
<html>
<head>
<meta charset="utf-8">
<title>常用标签title>
head>
<body>
<p align="left">2017，顶着刘海的iPhoneX带着“史上升级变动最大”的iOS11，依然碎片化严重的Android带着“更快、更强大、更安全” 的8.0来到我们面前，忽思十年初，那个触
屏的、没有物理键盘的智能手机惊艳了我 ，但连个复制粘贴功能都没有的时光。回首一顾，从2007到2017，从诺记的Symbian、摩托罗拉的Linux、苹果的iOS、微软的Windows Phone、三星的
Tizen到Google的Android等，移动操作系统也曾百花齐放，但经过十年厮杀各自蚕食，格局已相当明朗，只剩下了iOS和Android两大巨头p>
<p align="left">在不堪其扰的情况下，为维护华为的声誉及合法权益，2019年3月26日，华为先行向美国法院提出请求确认未使用Oliveira专利，这本是一个非常普通的民事诉讼程序，但Oliveira拒绝接受法庭传票的送达，拖延参与美国法庭程序。p>
<h1 align="left">这里是h1h1>
<h2 align="left">这里是h2h2>
<h3 align="left">这里是h3h3>
<h4 align="right">这里是h4h4>
<h5 align="center">这里是h5h5>
<h6 align="center">这里是h6h6>
<hr align="center" size="3" color="red" width="100%" />
<br>
<nobr>这里是一个很长的数学公式，不能换行显示，只能在一行显示。这里是一个很长的数学公式，不能换行显示，只能在一行显示。这里是一个很长的数学公式，不能换行显示，只能在一行显示。这里是一个很长的数学公式，不能换行显示，只能在一行显示。nobr>
<br>
<center>测试center标签center>
<marquee behavior="scroll" direction="left">
<p>测试marquee标签p>
marquee>
<button type="button" onclick="onButtonClick()">This is a buttonbutton>
<script type="text/javascript">
function onButtonClick() {
alert('You click button');
}
script>
<br>
<br>
<a href="http://blog.csdn.net/lfdfhl" title="谷哥的小弟" target="_blank">本文作者：谷哥的小弟 博客地址：http://blog.csdn.net/lfdfhla>
<br>
<img src="img/blog.jpg" alt="头像" title="博客头像" vspace="20" hspace="20" />
body>
html>
效果如下：
