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

今天初学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中,文本内容中的空格和换行是不会如实的反映在前端的,这样可以方便代码书写。
那么如果想要表示空格和换行,应该怎么做呢?
类似编程语言中的转义字符,在文本中,空格和换行的写法如下:

空格:    或是  
换行:  

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


文本标签 font

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


	文本内容

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

关键字

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

关键字 = “值”

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

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

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

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

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

举个例子:

<html>
	<body>
		
			文本标签测试
		font>
	body>
html>

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


图片标签 image

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


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

<html>
	<head>
		<title>the example of imagetitle>
	head>
	<body>
		瀑布很好看,但是现在找不到它了
	body>
html>

将图像放置在HTML文件的同目录中时,打开网页,可以看到(注意网页标题.);

而将图片从根目录下删除后,再次打开网页:
HTML 学习总结1入门 基本概念、格式 文字标签 图片标签 链接标签 表格标签 注释_第1张图片
需要注意的是,这里并不是一定要删除这张图片,重命名或是改变地址等让网页按照源属性找不到图片的行为都可。
说到找图片,紧接着就来介绍源属性赋值时路径的写法。

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

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


超链接标签 a

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


	内容

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

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

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


表格标签 table

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

...
	
	.
	.
	.

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

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

边框

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

<html>
	<head>head>
	<body>
		<tr><td>有边框td>
			tr>
		table>
		<br /><br /><br />
		<table>
			<tr>
				<td>无边框td>
			tr>
		table>
	body>
html>

HTML 学习总结1入门 基本概念、格式 文字标签 图片标签 链接标签 表格标签 注释_第2张图片
如果把1改的很大,比如100.。。
HTML 学习总结1入门 基本概念、格式 文字标签 图片标签 链接标签 表格标签 注释_第3张图片
就很吃藕了

单元格尺寸

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

<html>
	<head>head>
	<body>
		
<tr> <td>一行一列td><td>一行二列td> tr> <tr> <td>二行一列td><td>二行二列td> tr> table> body> html>

HTML 学习总结1入门 基本概念、格式 文字标签 图片标签 链接标签 表格标签 注释_第4张图片
不加限定的时候,长宽是由文本大小限定的,当然,可以使用font标签进行修饰(你还记得吗?)
限定长宽后:

<html>
	<head>head>
	<body>
		
<tr>
一行一列td><td>一行二列td> tr> <tr> 二行一列td><td>二行二列td> tr> table> body> html>

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

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

单元格扩展

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

<html>
	<head>head>
	<body>
		<tr>
一行一列td><td>一行二列td> tr> <tr> 二行一列td><td>二行二列td> tr> table> body> html>

HTML 学习总结1入门 基本概念、格式 文字标签 图片标签 链接标签 表格标签 注释_第6张图片
发现一行一列这个位置占据了两个单元格的宽度,但是发现了一行二列又单独占据了一列。所以,对行列span语句的正确理解应该是扩展而非合并,这点同span的含义应该是相同的。也符合单元格单个插入的特点。

文本位置

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

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


初学HTML的一点想法

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

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

你可能感兴趣的:(JavaWeb)