HTML的概念

HTML 全称为 HyperText Mackeup Language,译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。
基本格式：

<html>
	<head><title></title></head>
	<body></body>
</html>

通过观察格式，发现 Html 代码由 <html> 开始 </html>结束。里面由头部分 <head></head>和体部分 <body></body>两部分组成。
头部分是给 Html 页面增加一些辅助或者属性信息，它里面的内容会最先加载。
体部分是真正存放页面数据的地方。
注意：
（1）Html 就是超文本标记语言的简写，是最基础的网页语言。
（2）Html 是通过标签来定义的语言，代码都是由标签所组成。
（3）Html 代码不用区分大小写。

对格式的解释

html：放在 html 文件的开头，但没有实质性的功能，即使没有这个标记，浏览器在碰到其他的 html 标记时也一样会进行解析。
浏览器内置了 html 语言的解析器。
可以设置默认打开浏览器:工具—文件夹选项-文件类型
head：头标记，放置关于此 html 文件的信息，如提供索引，定义 css 等。
title：标题标记，包含在 head 标记内，它的作用是设定网页的标题。
body:主体标记，网页所需要显示的内容都放在这个标记内。

书写规范

多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
属性与属性值之间用 “=” 连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号，或公司规定书写规范。

编写说明

使用我们在 java 基础教程里使用的 UltraEdit 文本编辑器，保存为 .html 文件即可。
使用任意浏览器都可以打开 html 文件。

示例代码：

<html>

	<head>
		<title>www.weiyuxuan.com</title>		
	</head>
	
	<body>
		<font color="red"> 你们好吗? </font>
	</body>
	
</html>

结果图：
JavaWeb_HTML（2）_HTML的概念和标签

常见的 HTML 标签

注释标签： ：内部的代码不被浏览器解析，但是在网页源代码中可以看到被注释的内容。
标题标签：<hx>
hx 的取值是从 h1-h6，字体从大到小。字体加粗，自动换行。
文字粗体标签：
文字斜体标签：
下划线标签：
换行标签： or <br\>
换行标签是单个使用的标记。
段落标签：
段落标签除自动换行外，还会增加一行空白。
空格标签：

示例代码：

<html>
	
	<head>
		<title>www.weiyuxuan.com</title>		
	</head>
	
	<body>
		<!-- 
			注释
		-->
		<h1>标题一</h1>
		<h2>标题二</h2>
		<h3>标题三</h3>
		<h4>标题四</h4>
		<h5>标题五</h5>
		<h6>标题六</h6>
		
		内容
			
		<br/>	
		<b>加粗</b>	
		
		<br/>	
		<i>斜体</i>
		
		<br/>
		<u>下划线</u>
		
		<p>第一段</p>
		<p>第二段</p>
		
		魏&nbsp;&nbsp;&nbsp;宇&nbsp;&nbsp;&nbsp;轩	
	</body>
	
</html>

结果图：
JavaWeb_HTML（2）_HTML的概念和标签

HTML 的字体标签

作为一个页面来说，最常见的元素是：文字和图片。
文字：默认是从左到右，从上到下显示。
font：字体标签
我们的标签除了告诉你，在标签对里面是什么，还可以通过给标签添加属性来控制内容的显示。

使用格式：

<标签名 属性1="属性值1" 属性2="属性值2" 属性3="属性值3" ...>内容</标签名>

注意：属性值可以是"",也可以是’’,也可以不写引号。但是，推荐使用""。

color：颜色。
size：大小，值得取值范围是 1-7。
face：字体标签，可以同时指定多个字体，如果都没有满足的，就采用默认字体。
<hr>：水平分割线。
颜色的组成：三原色 rgb
每一种基本颜色的范围是从 0-255。
为了表示数据的方便，就采用十六进制表示数据。范围是：00-ff。
所以，颜色的表示就是：#rrggbb
红色：#ff0000
绿色：#00ff00
蓝色：#0000ff
黑色：#000000
白色：#ffffff
使用屏幕取色工具来获取颜色，下载点我。
使用方法：鼠标移动选择屏幕任意处的颜色，选中以后，按 Alt+C 即可获得颜色值，复制粘贴过来即可。

示例代码：

<html>
	
	<head>
		<title>www.weiyuxuan.com</title>			
	</head>
	
	<body>
		
		<h1>将近酒</h1>
		
		<font size="1">唐代：李白</font><br/>

	 	<font color="blue">    君不见，黄河之水天上来，奔流到海不复回。</font><br/>
	  	<font color="green">   君不见，高堂明镜悲白发，朝如青丝暮成雪。</font><br/>
		<font color="red">     人生得意须尽欢，莫使金樽空对月。        </font><br/>
		
		<font size="1" color="purple"> 天生我材必有用，千金散尽还复来。 </font><br/>
		<font size="3" color="purple"> 烹羊宰牛且为乐，会须一饮三百杯。 </font><br/>
		<font size="5" color="purple"> 岑夫子，丹丘生，将进酒，杯莫停。 </font><br/>
		<font size="7" color="yellow,purple"> 与君歌一曲，请君为我倾耳听。     </font><br/>
		
		<font size="5" color="#4BAD85" face="楷体"> 钟鼓馔玉不足贵，但愿长醉不复醒。 </font><br/>
		<font size="5" color="#4BAD85" face="仿宋"> 古来圣贤皆寂寞，惟有饮者留其名。 </font><br/>
		<font size="5" color="#EAB766" face="隶书"> 陈王昔时宴平乐，斗酒十千恣欢谑。 </font><br/>
		<font size="5" color="#EAB766" face="幼圆"> 主人何为言少钱，径须沽取对君酌。 </font><br/>
		<font size="5" color="#EAB766" face="魏宇轩,黑体1,隶书"> 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</font><br/>
	
		<hr/>
	
	</body>
	
</html>

结果图：
JavaWeb_HTML（2）_HTML的概念和标签
如有错误，欢迎指正！

JavaWeb_HTML（2）_HTML的概念和标签

HTML的概念

常见的 HTML 标签

HTML 的字体标签

相关推荐