从零开始学HTML&&CSS&&JavaScript(二)——HTML常用元素

HTML学习及进阶

  • 一 HTML常用元素
    • 1.HTML5的基本元素
    • 2.HTML5的文本格式化元素
    • 3.HTML5的语义相关化元素
    • 4.HTML5的超链接和锚点

一 HTML常用元素

1.HTML5的基本元素

基本元素有如下几个:


<html>
	<head>
		<meta charset="utf-8" />
		<title>基本标签title>
	head>
	<body>
		
		<h1>疯狂java讲义h1>
		<h2>疯狂android讲义h2>
		<h3>轻量级java EE 企业应用实战h3>
		<h4>疯狂java讲义h4>
		<h5>疯狂android讲义h5>
		<h6>轻量级java EE 企业应用实战h6>
		
		<hr />
		
		<span >Tomcatspan><span >Tettyspan><span >Resinspan>
		<br />
		
		<div >Tomcatdiv><div >Jettydiv><div >Resindiv>
		
		<p>Tomcatp><p>Jettyp><p>Resinp>
	body>
html>

由上面的结果可以看出,三个标签的效果类似,可以作为其他内容的容器

差别在于标签是行级元素,是块级元素。在默认的情况下,块级元素会换行,行级元素不会导致换行。

网页上的效果如下:
从零开始学HTML&&CSS&&JavaScript(二)——HTML常用元素_第1张图片)

2.HTML5的文本格式化元素

文本格式化元素如下:


<html>
	<head>
		<meta http-equiv="Content-Type" " content="text/html; charset=utf-8 " />
		<title>文本格式化标签title>
	head>
	<body>
		<span><b>加粗文本b>span><br />
		<span><i>斜体文本i>span><br />
		<span><b><i>粗斜体文本i>b>span><br />
		<span><em>被强调的文本em>span><br />
		<big><span>大号字体文本span>big><br 1>
		<p><strong>加粗文本p>
		<small> <span>小号字体文本span>sma11><br />
		<div>普通文本<sup>上标文本sup>div>
		<span>普通文本<strong><sub>下标加粗文本strong>span><br />
		
		从左向右排列的文本bdo><br />
		
		<bdo dir="rtl">从右向左排列的文本bdo><br />
	body>
html>

以上这些文本格式化元素都是经常使用的元素,各种标签都是可以其那套使用的,建议多去试一试。

网页效果如下:
从零开始学HTML&&CSS&&JavaScript(二)——HTML常用元素_第2张图片

3.HTML5的语义相关化元素

语义相关元素如下:

< abbr >:用来表示一个缩写。
< address>:用于表示地址,浏览器通常用斜体字显示地址。
< blockquote>:用于定义一段长的引用文本、浏览器会使用锁紧的方式显示这段文字。同时可以定义cite属性,cite属性指定该引用文本所应用额网址URL。
< q>:用于定义一段短的引用文本。浏览器会为这段引用文本添加引号。
< code> :引用一段代码。
< del>:定义文档中被删除的文字。
< ins>:定义文档中插入的文字。


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		
		<p>疯狂Java的精神是<q cite="http://ww . fkjava. org">疯狂源自梦想,技术成就辉煌q>
		这也是所有疯狂Java程序员的精神。p>
		<div>
		
		<blockquote>
		锦瑟无端五十弦,一弦一柱思华年。 <br>
		庄生晓梦迷蝴蝶,望帝春心托杜鹏。<br>
		沧海月明珠有泪,蓝田日暖玉生烟。<br>
		此情可待成追忆,只是当时已悯然。blockquote>
		是唐朝诗人李商隐的代表作,诗中隐藏着一种淡淡的忧伤, 让人无法言说,但又无以谴怀。div>
		<p>
		<cite>《芙蓉镇》cite>. <cite> (蓝风筝》cite>是国内导演拍摄的最有思考深度的两部电影。p>
		<p>
		下面代码定义了一个Java类: <br>
		<code>
			public class Cat<br>
			{<br>
				private int name = "garfield" ;<br>
			}<br>
		code>
		p>
		
		<pre>
			public class Cat
			{
				private int name = "garfield";
			}
		pre>
		<p>
		
		疯狂Java教育中心的缩写是<abbr title="疯狂 Java教育">fkjavaabbr>
		疯狂软件地址是<address>广州市天河区车陂大岗路4号沣宏大厦3006-3011address>
		
		<dfn>HTMLdfn>是种广为人知的标记语言。
		p>
		可通过输入如下命令: <br/>
		<kbd>list -1kbd><br/>
		在Linux的Shell窗口查看当前目录下所有文件、目录的详细信息。p>
		如果您在阅读疯狂Java体系图书时,遇到有任何无法理解的技术问题,<br/>
		请登录www . fkjava. org发帖提问,可按如下示例内容发帖: <br/>
		
		<samp>
		我在阅读xx图书的第X章、第x节时,遇到一个X0xx问题,<br/>
		错误提示信息是: x00K.
		samp>
		p>
		
		<var>ivar><var>jvar><var>kvar>通常用于作为循环计数器变量。
		
		<p>Android是一个<del>开发de1><ins>开放ins>式的手机、平板电脑操作系统p>
	body>
html>

网页效果如下:
从零开始学HTML&&CSS&&JavaScript(二)——HTML常用元素_第3张图片

4.HTML5的超链接和锚点

超链接和锚点相关元素如下:

href:指定超链接所关联的另一个资源。
target:指定使用框架集中的哪个框架来装载另一个资源。该属性的属性值可以是-self、_blank、_top、_panrent四个值,分贝代表使用自身、新窗口、顶层框架、父框架来装载新资源。
media:指定目标URL所引用的媒体类型。默认值为all。只有当指定了href属性时该属性才有效


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		
		<a href="http://www,crazyit.org"><b>疯狂java联盟b>a><br />
		
		<a href="http://www,crazyit.org"><em>疯狂java联盟em>a><br />
		
		<a href="http://www,crazyit.org"><img src="img/HBuilder.png" alt="疯狂java联盟">a><br />
		
		<a href="基本标签.html">文本格式化标签a>
	body>
html>

页面运行效果如下:
从零开始学HTML&&CSS&&JavaScript(二)——HTML常用元素_第4张图片
页面的跳转大家可以自己去尝试,当然还有一些URL流行的scheme和对应资源如下:
从零开始学HTML&&CSS&&JavaScript(二)——HTML常用元素_第5张图片
对应的测试代码如下:

		<a href="news:yeeku.html">html newsgroupa><br>
		<a href="ftp://www.crazyit.org/tomcat.rar">下载Tomcata><br>
		<a href="mailto:[email protected]">写信给我a>

以上是一部分的HTML常用元素,有关列表、图像、表格、框架、新增属性相关元素见续集

你可能感兴趣的:(前端基础)