讲给后台程序员看的前端系列教程(02)——HTML5标签(1)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lfdfhl/article/details/100545723

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">这里是h1</h1>
<h2 align="left">这里是h2</h2>
<h3 align="left">这里是h3</h3>
<h4 align="right">这里是h4</h4>
<h5 align="center">这里是h5</h5>
<h6 align="center">这里是h6</h6>

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 button</button>
	<script type="text/javascript">
		function onButtonClick(){
			alert('You click button');
		}
	</script>

此处,我们给button标签设置一个监听器,当用户点击button后利用JavaScript弹出一个对话框。

a标签

a标签在THML中常用于表示锚点和超链接,它是英文中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" />

源码和页面

在此,附上本节示例源码:

<!DOCTYPE html>
<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">这里是h1</h1>
		<h2 align="left">这里是h2</h2>
		<h3 align="left">这里是h3</h3>
		<h4 align="right">这里是h4</h4>
		<h5 align="center">这里是h5</h5>
		<h6 align="center">这里是h6</h6>
		<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 button</button>
		<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/lfdfhl</a>
		<br>
		<img src="img/blog.jpg" alt="头像" title="博客头像" vspace="20" hspace="20" />
	</body>
</html>

效果如下:
在这里插入图片描述

展开阅读全文

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