HTML 学习总结1入门基本概念、格式文字标签图片标签链接标签表格标签注释

最新推荐文章于 2024-09-05 21:31:46 发布

卷儿~

最新推荐文章于 2024-09-05 21:31:46 发布

阅读量809

点赞数 3

分类专栏： JavaWeb 文章标签： html html5

本文链接：https://blog.csdn.net/wayne_lee_lwc/article/details/104806071

版权

JavaWeb 专栏收录该内容

20 篇文章 5 订阅

订阅专栏

今天初学html，来总结一下
第二篇：HTML 学习总结2 框架表单

HTML基本概念

就是先了解了这个语言是个啥，在哪里用的。
HTML是缩写，全拼是 Hyper Text Markup Language。拆开念就是 超文本标记语言
~~啥，你问我怎么拼出来的，问度娘啊。~~

简单点说，就是一种用来编写文本的语言，这种语言它编写了一种超级文本，通过浏览器，不仅可以显示文本，还可以显示图片、音频、视频、连接等元素。

从这个角度说，html倒是有一些像用来写出这篇博客的在线编辑器。不过它更底层，更接近于代码，很多地方都是各种框架结构，内容仅是其中的一部分。

另外，它指出了一个网页其实就是一个文档。

HTML基本格式

了解完基本概念，就开始上手学着写了。
不同于一般编程语言，HTML的各种指令通过标签来实现。标签使用尖括号<>括起来

有些标签成对出现的，称为双标签，一个用来表示开始，一个用来表示结束。中间部分是这个标签的作用域（不知道这个词够准不够准确）。它们这么写：

<标签名> 内容</标签名>

有些标签是单独出现的，称为单标签，写法与双标签有些不同：

<标签名> 或是 <标签名/>

说完了标签，就可以介绍一个HTML文件的基本格式了，通常情况下，一段完整的HTML代码有如下格式：

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

可以看到，基本格式中：

html标签包括着整段代码
整段代码又分为两个部分：
- 包含网页标题的头部区域
- 网页正文区域

被< title>标签标记的区域用来填写网页的标题，显示在网页上，举个例子，是这个位置：
在这里插入图片描述
而被< body>标记的网页正文，也就是我们编辑网页的地方。可以直接书写文本，他们会显示在网页上。

HTML注释、空格、换行

说基本标签之前，先来介绍下编写HTML文本常遇到的需求：注释，空格，换行。

注释的写法如下：

<!--注释内容-->

用尖括号括起来一个感叹号，后面跟上四个减号，然后在前两个减号以后书写注释内容，换行不影响注释标记。
所以，通常也写作：

<!--
	注释内容
-->

这样的书写更加简洁清爽

再说说空格和换行，在HTML中，文本内容中的空格和换行是不会如实的反映在前端的，这样可以方便代码书写。
那么如果想要表示空格和换行，应该怎么做呢？
类似编程语言中的转义字符，在文本中，空格和换行的写法如下：

空格：  &nbsp; 或是 &emsp;
换行：  <br />

对于空格，前者为半角空格，一个英文字符宽度，后者全角空格，占一个中文宽度。
换行标签，不难发现，是一种单标签。

文本标签 font

首先，来认识一下文字标签的基本写法：

<font>
	文本内容
</font>

当然，如果仅是为了书写文本，那就不需要引用这个标签，直接书写即可。
引入这个标签，目的在于对文本内容的文本属性做定义：

关键字

关键字是用来设置标签属性的，标签中给关键字赋值，方式是

关键字 = “值”

由双引号括起来的字符串。
且关键字之间使用空格间隔开

所以关键字的用法应当为：

<标签 关键字1 = "值" 关键字2 = “值”...>

接着认识几个在font标签中使用的关键字：

size 字体的大小，范围1-7变大
color 字体的颜色
face 选用的字体

举个例子：

<html>
	<body>
		<font color="red" size="4" face="宋体">
			文本标签测试
		</font>
	</body>
</html>

网页就是这个亚子：
在这里插入图片描述
其中宋体字体，大小为4，颜色红色

图片标签 image

图片标签是一个单标签，表示插入一个图片。
写法如下：

<img/>

它的常用关键字是src和alt，分别为图像的源属性和替换文本属性。
表示这张图片的位置和找不到图片显示的文本。
例如，有如下代码：

<html>
	<head>
		<title>the example of image</title>
	</head>
	<body>
		<img src="timg.jpg" alt="瀑布很好看，但是现在找不到它了" />
	</body>
</html>

将图像放置在HTML文件的同目录中时，打开网页，可以看到(注意网页标题.);
在这里插入图片描述
而将图片从根目录下删除后，再次打开网页：

需要注意的是，这里并不是一定要删除这张图片，重命名或是改变地址等让网页按照源属性找不到图片的行为都可。
说到找图片，紧接着就来介绍源属性赋值时路径的写法。

首先需要明确的是，路径可以是相对路径也可以是绝对路径。但通常都是相对的，考虑到各种资源将会同HTML一并打包上传至服务器，所以在操作系统下的绝对路径其实是没有意义的。

对于相对路径，同一文件夹下的文件直接表示为其名称（带上后缀！），若文件位于HTML文件的下级文件夹中，则用斜杠/来表示进入一个文件夹，若文件位于HTML文件的上层文件夹中，则可使用…/来回到上一层文件夹。倒是和控制台操作地址的方式很相似。

超链接标签 a

超链接标签是一种表示链接的双标签，写法如下：

<a>
	内容
</a>

内容部分可以是文字也可以是图片等，链接内容也不仅仅是网页，也可以是文本，图片，视频等。
超链接标签有两个常用的属性href和target分别表示链接地址和打开链接的方式。

链接地址的填写，没有http协议的开头，默认为file。需要注意的是，填写地址时应使用反斜杠“\”。
target属性有五种：
1._blank : 打开一个新标签页进行跳转
2. _self : 当前标签页进行跳转(默认的方式)
3. _parent : 会在父框架(frame)中打开
4. _top : 会在顶级框架(frame)打开
5. 某个frame的name :

对于还没学框架的我来说，熟悉的就只有前两个了。。。。。

表格标签 table

这是一个不简单的标签，因为东西很多。。。
首先，表格标签是一种双标签，这点毫无疑问，因为要编辑表格内容。写法如下：

<table>
	<tr>
		<td></td>...
	</tr>
	.
	.
	.
</table>

其中，双标签tr表示插入行，双标签td表示插入列（当然还有双标签th表示插入表头，我们先不谈）

还是来说一下表格标签常用到的属性

边框

首先，给表格加边框，border，写在table标签里，数值为自然数。
举个例子，如下代码：

<html>
	<head></head>
	<body>
		<table border="1">
			<tr>
				<td>有边框</td>
			</tr>
		</table>
		<br /><br /><br />
		<table>
			<tr>
				<td>无边框</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述
如果把1改的很大，比如100.。。

就很吃藕了

单元格尺寸

说完了边框问题，接着就是设置单元格大小的属性width 和 height
这两个属性可以设置插入单元格的宽度和高度，值的单位为像素。或者，也可以用占据页面百分比（这个不常用）。
需要注意的是，当改变一个单元格时，同一行或同一列的单元格也会跟着改变。
举个例子，如下代码：

<html>
	<head></head>
	<body>
		<table border="1">
			<tr>
				<td>一行一列</td><td>一行二列</td>
			</tr>
			<tr>
				<td>二行一列</td><td>二行二列</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述
不加限定的时候，长宽是由文本大小限定的，当然，可以使用font标签进行修饰（你还记得吗？）
限定长宽后：

<html>
	<head></head>
	<body>
		<table border="1">
			<tr>
				<td width="200px">一行一列</td><td>一行二列</td>
			</tr>
			<tr>
				<td height="100px">二行一列</td><td>二行二列</td>
			</tr>
		</table>
	</body>
</html>

可以看到，第一列的宽度被改变了，第二行的高度也被改变了。

单元格扩展

在操纵单元格时，我们常会用到合并单元格的操作让单元格交错排布。在HTML中，我们通过属性rowspan 和 colspan来实现。
将上文代码稍作修改，得到一下例子：

<html>
	<head></head>
	<body>
		<table border="1">
			<tr>
				<td width="200px" colspan="2">一行一列</td><td>一行二列</td>
			</tr>
			<tr>
				<td height="100px">二行一列</td><td>二行二列</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述
发现一行一列这个位置占据了两个单元格的宽度，但是发现了一行二列又单独占据了一列。所以，对行列span语句的正确理解应该是扩展而非合并，这点同span的含义应该是相同的。也符合单元格单个插入的特点。

文本位置

最后，是有关文本在单元格中的相对位置，有两个属性align和valign，分别代表水平位置和竖直位置。
这两个属性各有三个值，分别为：

align的 left right center 表示居左、居右和剧中
valign的 top bottom middle 表示居上、居下和居中

初学HTML的一点想法

HTML这个很不一样的上手体验，让我思考了一个有关HTML为什么会将代码设计成标记编程而非语句编程的问题。
个人认为在于HTML本质上还是一种文本，作为所谓的超文本，和普通的文本没有质的区别，只不过是一种被结构化了的文本、加了框架的文本，是以文本内容为核心的。
而标记只是用于为解释方提供文本内容的解释使用方式，作用相当于路牌，正如其标签的名称，是起指引作用的。所以不能通过语句来进行编程。
而像C语言Java语言这样的编程语言，是以代码为核心的，代码文件中没有用于编辑的文本，只有语句和注释，这点是不同于HTML的。

笔者刚入门，若有不妥之处欢迎指正。