# HTML 初识

# HTML 介绍

HTML(Hyper Text Markup Language)中文译为“超文本标记语言”,主要是通过 HTML 标签对网页中的文本、图片、声音等内容进行描述。

<strong> 我是加粗的字体 </strong>

# HTML 骨架格式

日常生活的书信,我们要遵循共同的约定。 同理:HTML 也有自己的语法骨架格式。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body></body>
</html>
  • html 标签:

作用:网页的根节点。

  • head 标签:

作用:用于存放title,meta,style,script,link等标签。辅助浏览器解析页面,并不会在页面中展示。

  • title 标签:

作用:让页面拥有一个属于自己的标题。

  • body 标签:

作用:页面的主体部分,用于存放网页要展示的标签 p,h,a,img等。

注意:在<body>中多个空格或者换行符,会被当做一个空格来处理。

那么,如何编辑代码?

# 编辑工具介绍

在以后的工作中,我们可能会用到不同的编辑工具,每种编辑工具都有各自的优缺点,至于使用哪一个看自己喜好,接下来的学习当中,我们会使用vscode编辑代码。

# vscode 基本使用

  • 下载/安装
  • 设置中文语言环境(https://jingyan.baidu.com/article/7e44095377c9d12fc1e2ef5b.html)
  • 扩展插件功能
  • 新建文件
    • 顶部菜单栏=>文件=>打开文件夹=>选择自己的项目文件夹
    • 资源管理器中=>'+'=>输入文件名+文件扩展名=>回车保存(会自动将我们新建的文件保存在当前打开的项目文件夹中)
  • 生成页面骨架结构 !
  • vscode中为我们内置了Emmet插件,可以让我们的代码写起来更方便。

# 认识标签

# HTML 标签分类

在 HTML 页面中,带有“< >”符号的元素被称为 HTML 标签,如上面提到的 <html>、<head>、<body>都是 HTML 标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令,也称为 HTML 标签或 HTML 元素。

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

该语法中<标签名>表示该标签的作用开始,一般称为开始标签</标签名> 表示该标签的作用结束,一般称为结束标签。和开始标签相比,结束标签只是在前面加了一个关闭符/

标签的内容可以是文本,也可以是其他标签。

<body>
	我是文字
</body>
  • 单标签
<标签名 />

单标签也称空标签,是指用一个标签符号即可完整地描述某个功能的标签。

<br />

# HTML 标签关系

标签的相互关系就分为两种:

  • 嵌套关系
<head>
	<title> </title>
</head>

简而言之:父子关系。

  • 并列关系
<head></head>
<body></body>

简而言之:兄弟关系。

如果两个标签之间的关系是嵌套关系,子元素最好缩进一个 tab 键的身位。如果是并列关系,最好上下对齐。

# 标签属性

使用 HTML 制作网页时,如果想让 HTML 标签提供更多的信息,可以使设置标签的属性。其基本语法格式如下:

<标签名 属性1="属性值1" 属性2="属性值2" > 内容 </标签名>

属性 1="属性值 1",这种 key="value" 的格式,我们称之为键值对,在以后的学习中我们还会遇到。

属性就是特性,比如手机的颜色,手机的尺寸,总结就是手机的...

注意:

  • 标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。

  • 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。

  • 任何标签的属性都有默认值,省略该属性则取默认值。

<hr width="400" />

属性名是宽度,属性值是400

# 注释标签

在 HTML 中还有一种特殊的标签——注释标签。如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。其基本语法格式如下:

<!-- 注释语句 -->

注释内容不会显示在浏览器窗口中,但是作为 HTML 文档内容的一部分,也会被下载到用户的计算机上,查看源代码时就可以看到。

注释重要性:

上次更新: 9/2/2019, 5:09:05 PM