HTML语法(一)

最新推荐文章于 2023-04-01 22:39:38 发布

Zero. J

最新推荐文章于 2023-04-01 22:39:38 发布

阅读量150

点赞数 2

分类专栏： Java EE 文章标签： html

本文链接：https://blog.csdn.net/weixin_44161038/article/details/103922047

版权

Java EE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.HTML简介

Hyper Test Markup Language 超文本标记语言
1）超文本是什么意思？
	用超链接的方式，将各种不同空间的文字信息组织在一起的网状文本。
2）标记语言是什么语言？
	它是一种由各种各样标签组成的语言，而不是一种编程语言。

基础语法：
	1）HTML文件的后缀是 .html或.htm
	2）HTML的语法是不区分大小写的，一般使用小写
	3）标签大致分为两种：围堵标签和自闭和标签
		围堵标签<html></html>
		自闭和标签<br/>
		##现在先不要纠结这些标签的含义，后面会提到##     
	4）这些标签可以嵌套，但是不能出现像<a><b></a></b>这样你中有我我中有你的形式，这是错误的
	5）开始标签中可以定义属性，属性是以键值对的形式出现的，所有的键值需要用引号括起来（单双引号都可以）
	6）注释 <!-- 注释 -->

HTML代码示例：

<!DOCTYPE html>
<html>
	<head>标题</head>
	<body>主体</body>     <!-- 注释 -->
</html>

2.HTML标签

1）文件标签：构成HTML最基本的标签

<!DOCTYPE html>：html5中定义该文档是html文档。
html：html文档的根标签。
head：头标签，用于指定html文档的一些属性，引入外部资源。
title：标题标签，可以和head嵌套使用。
body:体标签。

2）文本标签：和文本有关的标签

<br>：作用是换行。
<h1> ··· <h6>：标题标签，从1到6字号逐渐减小。
<p>：段落标签。
<hr>：水平线，显示出一条水平线，可以添加属性，设置水平线的颜色color、宽度width、高度size、对齐方式align等。
<b>：字体加粗。
<i>：斜体字体。
<font>：字体标签，可以设置属性，颜色color、字号size、字体face等。

属性的设置：
	color：
		第一种  用颜色的英文单词设置，rad红色，yellow黄色等；
		第二种	采用三原色调配，rgb(值1，值2，值3)，值的范围0~255，例如 rgb(255,0,0)；
		第三种	#值1值2值3 ，例如 #0000FF  这里的值采用十六进制。
	width：
		第一种	像素数值，单位px，例如 width=“20” ；
		第二种	百分比数值，相当于占父元素的百分比。

3）图片标签

<img/>：自闭和标签，作用是显示图片。
属性：
	width	显示的宽度。	width="200"
	hight	显示的高度。	hight="100"	
	align	对齐方式，属性的值right右对齐，left左对齐，center居中对齐。
	alt	图片显示失败后，出现在原本图片位置处的信息，例如：alt='CSDN博客'，就是当图片加载失败后，会出现 “CSDN博客” 的字样。
	src	图片的路径位置。相对路径，以 .开头的路径
		           ./：代表当前目录  ./image/1.jpg
		           ../:代表上一级目录

图片标签的代码示例：

<img src="./city.jpg" alt="城市" width="100" hight="200" align="center"/>

4）列表标签

有序列表：
	 ol:有序
	 li:列表项
无序列表：
	 ul:无序
	 li:列表项
属性：
	type：样式，有序标签ol，type值有三种 1、A、I
			   无序标签ul，type值有三种 disc实心圆点、square实心方块、circle空心圆点
	一般不使用列表标签属性控制样式，大多数情况使用CSS控制样式

5）链接标签

<a>:显示链接。
属性：
	href：指定所访问资源的URL（统一资源定位符），可以指定网络资源，也可以指定当前项目中的资源。
	target：打开方式，_self:默认值，在当前页面打开；_blank：在空白页面打开。

链接标签程序示例：

<a href="./5_列表标签.html">列表标签</a><br>
<a href="https://www.csdn.net/">CSDN-专业技术社区</a><br>
<a href="https://blog.csdn.net/weixin_44161038"><img src="image/jiangwai_1.jpg"></a>