00基本语法

最新推荐文章于 2024-09-24 14:34:45 发布

Paramountli

最新推荐文章于 2024-09-24 14:34:45 发布

阅读量178

点赞数

本文链接：https://blog.csdn.net/weixin_43219234/article/details/82817732

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

学习内容

HTMl概念
了解HTML发展史
基础语法
常用标签（段落、图片、链接等）
结合小例子

什么是HTML

HTML(Hypertext Markup Language)即超文本标记语言。

HTML特点

HTML不需要编译，直接由浏览器执行
HTML文件是一个文本文件
HTML文件必须使用html或htm为文件名后缀
HTML大小写不敏感，HTML与html一样

开发工具

只要是能编辑文本文件的都可以，比如说：记事本、Word等。

当然，在实际的开发中，我们还需要一些专业的工具，比如：Dreamweaver、Sublime Text、WebStorm等。

HTML基础语法

课程内容

HTML基本结构
HTML标签
HTML元素
HTML属性
注释

HTML基本结构

在这里插入图片描述

HTML标签

最外层<html>标签是告诉浏览器在这标签内的所有的内容就是html文件。

在<head>标签内存放的是头部信息，比如网页的标题，还有一些关键字等等，同时写在<head>标签内的所有的内容在网页中不会显示出来。

<body>部分也就是网页的主体部分，在浏览器我们能看到的所有的内容都是写在了<body>标签内，也就是说，以后我们只要在网页中能看到的内容都要写在<body>标签内。

下面来动手编写一个html文件：
1.首先，我们打开Sublime Text 3编辑器，选择File — New File或者是使用快捷键Ctrl+N，然后保存成一个html或者htm文件。

2.写入以下代码并保存。

@00基本语法-01
<html>
<head>
<title>hello</title>
</head>
<body>
	<p>hello html!</p>
</body>
</html>

3.打开该文件，显示如下：
在这里插入图片描述在网页中想要展示的内容都要写在<body>标签内，下面我们来看一下标签的规范：
标签是由<标签名>所组成的，标签一般是成对地出现，比如<html>标签，有开始标签和结束标签，结束标签比开始标签多了一个"/"。

当然也有不是成对出现的标签，比如<hr/>标签表示一条水平线，示例如下：

@00基本语法-02
<html>
<head>
<title>hello</title>
</head>
<body>
	<p>hello html!</p>
	<hr/>
</body>
</html>

运行结果如下：
在这里插入图片描述单标记我们可以直接写<hr>，也可以写成<hr/>，这两种写法都是起作用的，但是为了后期更好的规范性，我们往往在单标签的后面加上一个"/"来闭合这个标签。

HTML元素

我们都知道，网页是由各种各样的、许许多多的元素所组成。

元素是由开始标签+内容+结束标签所组成：<开始标签>内容<结束标签>。

@00基本语法-02
<html>
<head>
<title>hello</title>
</head>
<body>
	<p>hello html!</p>
	<hr/>
</body>
</html>

同样我们来看<head>，有开始有内容有结束，也是一个元素。在<head>里面还有一个HTML元素，就是标题<title>的元素，有标题开始有内容有标题结束。

HTML属性

接下来我们给这个网页添加背景颜色，我们需要在<body>标签内添加bgcolor=“red”，即<body bgcolor="red">，示例如下：

@00基本语法-03
<html>
<head>
<title>hello</title>
</head>
<body bgcolor="red">
	<p>hello html!</p>
	<hr>
</body>
</html>

显示效果如下：
在这里插入图片描述我们添加的这个内容叫做HTML的标签属性，这个属性是添加在开始标签名的后面，至少要有一个空格。在标签中可以添加多个属性，在属性与属性之间要用空格来隔开。

语法：<标签名属性名1="属性值" 属性名2="属性值"...>…</标签名>

注释

为了更好地去理解这个代码，我们往往要添加一些注释，这些注释是不会在HTML页面上进行展示的。示例如下：

@00基本语法-04
<html>
<head>
<title>hello</title>
</head>
<body bgcolor="red">
	<p>hello html!</p>
	<hr><!-- hr是水平线-->
</body>
</html>

练习

1.多选题
下列选项中，什么标签里的内容不会在网页中显示（选择两项）
A <p>
B <head>
C <title>
D <body>
选择B、C

编程练习

请动手编写自己的第一个网页。

效果图：
在这里插入图片描述

任务要求：

1.编写html基础结构
2.设置网页标题为"hello"
3.网页中显示一段文字"HELLO,everyone.This is my first page!"
4.网页背景颜色“灰色”

代码如下：

@00编程练习
<!DOCTYPE html>
<html>
<head>
	<title>hello</title>
	<meta charset="utf-8">
</head>
<body bgcolor="grey">
	<p>HELLO,everyone.This is my first page!</p>
</body>
</html>