、空标签概念:
没有与之对应的结束标签的标签
2、常见的空标签:
3、注意事项:
虽然HTML中对空标签是否需要加结束符号“ / ”进行强制规定,但是在XHTML(XML规范的HTML版本)或XML中,对空标签进行强制要求,指出空标签必须使用结束标志,大多数人推荐使用规范的编写格式,并且在未来将会对空标签的结束符号进行强制要求。
在html中,在空标签上使用闭标签是无效的,例如:</br>。这样的情况是无效的HTML。
天继续说下HTML第二讲,空元素、小写标签、属性和对应的具体使用。
先说下HTML 空元素:
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。
在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。
在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。
使用HTML小标签:
HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
HTML属性:
属性是 HTML 元素提供的附加信息。
属性都包含:
HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现,比如:name="value"。
接着我们看一个实例:
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定
<a href="http://www.liepin.com">这是一个链接</a>
我们在Sublime Text上试下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210815---测试开发转型</title>
</head>
<body>
<h>空元素</h>
<p>没有内容的 HTML 元素被称为空元素</p>
</body>
<a href ="https://www.baidu.com">这是一个招聘网站</a>
</html>
由于 http://www.liepin.com跳转需要的时间有点长,可能是家里网速不好, 页面一直跳转不成功。就修改为 www.baidu.com 这样就可以了。点击可以跳转到新的网址。
HTML 属性常用引用属性值
属性值应该始终被包括在引号内。
双引号是最常用的,不过使用单引号也没有问题。
提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='John "ShotGun" Nelson'
HTML 提示:使用小写属性
属性和属性值对大小写不敏感。
不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 (X)HTML 要求使用小写属性。
HTML 属性参考手册
下面列出了适用于大多数 HTML 元素的属性:
属性描述
class 为html元素定义一个或多个类名(classname)(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式(inline style)
title 描述了元素的额外信息 (作为工具条使用)
HTML 标题
标题(Heading)是通过 <h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。
接着我们看一个实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210815---测试开发转型</title>
</head>
<body>
<h>空元素</h>
<p>没有内容的 HTML 元素被称为空元素</p>
<h1>我是最大的,你忍一下</h1>
<h2>我是老二,你也要忍一下</h2>
<h3>我是老三,我一般</h3>
<h4>我是老四,我凑合</h4>
<h5>我是老五,我忠于革命</h5>
<h6>我是老六,我是最小的,我啥也不是</h6>
</body>
<a href ="https://www.baidu.com">这是一个招聘网站</a>
</html>
尝试一下 »
注释: 浏览器会自动地在标题的前后添加空行。
可以看出,文字是越来越小的,标题越来越小。说明符合要求
什么学习HTML?
理解HTML代码是制作网页的基本技能。在互联网高度发达的今天,网页制作技术开始变的和修图、处理视频一样重要。
第一,学会制作网页就可以把自己想要展示的信息让其他人使用浏览器观看,无论是文字、照片还是视频都可以通过浏览器观看,甚至是分享自己制作的小游戏。
第二,理解网页运行的基本原理后可以更好的浏览他人的网页,寻找有用信息,更合理的使用第三方工具,简单高效的制作自己的网页。
HTML学习难度与重要性
HTML代码本身非常容易理解,使用也非常简单,但是单纯使用HTML代码写出的网页效果和我们平时看到的网页相差甚远。要想做出一个漂亮的页面,我们还需要CSS和JavaScript的帮助。
HTML、CSS、JavaScript这些不同的代码都有什么作用呢?简单来说,HTML代码可以为网页提供基本内容,比如文字、图片、音乐、视频等。CSS代码可以为页面安排布局,比如标题的位置、字体、颜色、大小等,笼统的说就是为HTML代码添加的内容增加样式信息,例如修改位置、尺寸、颜色等属性。JavaScript代码可以为页面提供交互(互动)功能,例如通过按钮控制页面内容的隐藏、出现,或者为多张图片添加轮播功能等。
对比起来,HTML的学习难度最低,但作用是最重要的,因为一切页面的基础是内容,没有内容,样式与交互都不存在。
认识HTML基本结构
第一行 <!DOCTYPE HTML>
第二行 <html>
第三行 <head>
第四行 </head>
第五行 <body>
第六行 </body>
第七行 </html>
以上七行代码是一个网页文件的HTML代码的基本结构。
大家观察一下可以发现一个规律,每一行的内容都是写在“<>”里面的。原因说来话长,先记住就行。每个写在“<>”里面的内容叫做“标签”。以后“标签”这个词会经常出现。
第一行<!DOCTYPE HTML>标签指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令(这句话可以暂时不必理解)。重要的是这句傲娇的代码只能存在在HTML代码的第一行!
第二行<html>标签与第七行的</html>标签是一对,“<html>”叫做开始标签,“</html>”叫做结束标签。他们之间的区别在于结束标签比开始标签多一个“/”。这是HTML代码的一个重要规律,以后我将要学到的大部分标签都是这样的,可能浏览器有些强迫症吧,如果没有结束标签它会很不舒服,有可能会消极怠工而产生麻烦(不能正常显示)。不过遗憾的是<!DOCTYPE HTML>太傲娇,至今没有另一半。<html> 与 </html> 标签限定了文档的开始点和结束点。
第三行与第四行组成一对,叫做“head”标签。顾名思义,这个“头”标签里的内容统领全局,比如控制布局与样式的CSS代码文件和添加互动功能的JavaScript代码文件在这里添加或导入;搜索页面用的关键词信息在这里添加;页面信息的编码方式也是由此指定;浏览器窗口的标题也在这里显示。
第五行与第六行组成一对,叫做“body”标签。用来显示所有的页面内容信息。
画个图来表示一下这四个标签的层级关系(就是谁包含谁的意思,或者谁在谁的势力范围内出现):
边学边练------写一个最简单的页面
正所谓万丈高楼平地起,下面我们就动手做我们的第一个网页文件。
工具:电脑,安装一个浏览器(IE 火狐 谷歌浏览器都可以),确定“记事本”工具可用。
有了以上工具我们就可以写了。
Step1 新建一个.txt文件。
操作如下:
(1)选择合适的磁盘,比如D盘或F盘新建一个文件夹,命名为“网页”。点击进入。
(2)在空白处点击鼠标右键新建一个文本文件,命名为“第一个页面”。这时我们就有了一个“第一个页面.txt”文件了。
如果你的电脑不显示“.txt”这样的文件后缀,可以在屏幕左上方寻找“查看”菜单,如图2
图 2
点击后,出现如下菜单如图3,点击“选项”。
图 3
点击“查看”,去掉“隐藏已知文件类型的扩展名”选项前的“对号”,如图4所示。这时就能显示或修改文件后缀了。
图 4
Step2 添加内容
(1)双击打开“第一个页面.txt”文件,把HTML基本结构共七行代码输入进去。
(2)保存,关闭文件,在“第一个页面.txt”文件上点击鼠标右键,选择“重命名”,将“.txt”修改为“.html”。这时,系统会提示,如图1,大胆点“是”。
图 1
这时我们的文件就变成了html网页文件了。
我们双击这个文件发现浏览器内一片空白,这就好比我们在桌子上摆了个碟子,里面并没有放美食。浏览器中的一片白就是空碟子的颜色,而HTML基本结构就是这个碟子。
下面我们往碟子里加点东西。
Step3 添加内容
(1)在“第一个页面.html”文件上点击鼠标右键,选择“打开方式”,选择“记事本”,如果没有“记事本”选项,请点击“选择其他应用”,点击选择最下面的“更多应用”,选择“记事本”。下一次选择“打开方式”时,“记事本”就会出现了。
(2)在<head></head>标签之间添加“<title>学习写第一个网页</title>”。在<body></body>之间添加“<h1>第一个网页</h1>”;“<p>随着学的内容越来越多,网页就会越来越漂亮了!</p>”完成如图5
图 5
(3)保存,关闭,双击打开!效果如图6
图6
今天的边学边做就到这里,下一次会详细解释<head>标签、<body>标签中常出现的子标签以及它们各自的作用。
第二篇《边学边做网页篇——<head>标签里装点啥?》http://mp.toutiao.com/preview_article/?pgc_id=6738988870622249479
*请认真填写需求信息,我们会在24小时内与您取得联系。