HTML入门知识(1)

一、HTML简介

1.HTML是什么?

HTML:hyper text markup language超文本标记(标签)语言由各种标签组成,用来制作网页,告诉浏览器该如何显示页面

2.作用

  • 制作网页,控制网页和内容的显示
  • 插入图片、音乐、视频、动画等多媒体
  • 通过链接来检索信息
  • 使用表单获取用户的信息,实现交互

3.版本

W3C.world wide web consortium万维网联盟,制定Web技术相关标准和规范的组织,HTML就是由W3C制定的标准

两个版本:HTML 4.0.1、HTML 5.0-----通常H5

官网:http://www.W3shcool.com.cn

4.扩展名

HTML文档是以.html或.htm结尾

二、HTML文档结构

1.基本结构

1.1简介

  • HTML标签是由尖括号括起来的关键词,如<html>,通常是成对出现的,如<html> </html>
  • <html>为根标签,包含:<head>头部和<body>主体部分
  • 头部提供关于网页的相关信息,如标题、文档类型、字符编码、关键字等摘要信息
  • 主体部分提供网页的显示内容,真正显示在页面中的内容
  • 合理地进行缩进
  • 标签名不区分大小写,但是一般要用小写

1.2开发工具

记事本notepad、sublime、Notepad++、Dreamweaver、VScode、Webstorm等

使用步骤:

1.新建文件(ctrl+N),然后保存(ctrl+s),指定扩展名为.html

2.编写HTML代码

3.在浏览器中打开

使用技巧:

  • 先保存再写代码,否则代码无颜色提示
  • 创建一个文件夹,用于保存所有的网页内容,将文件夹拖拽到sublime中,便于管理
  • 显示/隐藏侧边栏
    方式1:查看–>侧边栏–>显示/隐藏侧边栏
    方式2:ctrl+k紧接着按B
  • 显示多栏
    方式1:查看–>布局–>列数:2列
    方式2:Alt+shift+2

1.3浏览器

常见的浏览器:IE浏览器微软、chrome谷歌浏览器、firefox火狐、safari苹果

浏览器的作用是读取html文件,并以网页的形式来显示

浏览器不会直接显示html标签,而是使用标签来解释网页的内容

2.标签

2.1 标签的形成

一个完整的html标签的形成:

<标签名 属性名=“属性值”>内容</标签名>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标签</title>
</head>
<body  bgcolor="red"  text="blue">
	html从入门到精通!
</body>
</html>

属性值要用双撇号括起来,一般用双撇号

2.2 标签的分类

根据标签是否关闭,分为,关闭型和非关闭型

  • 关闭型:有结束标签,即标签成对出现
    <html></html>
    <head></head>
    <title></title>
  • 非关闭型:没有结束标签
    <meta>
    <br>
    <h1><h6>

根据标签是否独占一行,分为块级标签和行级标签

  • 块级标签:显示为块状,独占一行

    <h1>大家好</h1>
    <hr>

  • 行级标签:在行内显示,可与其他内容在同一行显示
    <span></span>
    在这里插入图片描述

2.3 注释

注释在浏览器中是不会显示的,是用来标注解释html语句,但通过查看源代码的方式可以看到

语法:

<!--注释内容-->

2.4 实体字符

也称为特殊字符,用于显示一些特殊符号,如:<> & 空格等

语法:

<&实体字符的名称>;

常见的实体字符:

&lt;        <    小于号    less than
&gt;        >    大于号    great than
&nbsp;        空格     space   在html中对于连续的空白字符(包括空格、换行、TAB等),在浏览器中显示为一个空格
&amp;      &   与
&quot;     "   双引号
&copy;     ©   版权符号   copyright
&reg;      ®   注册符号   register
&times     ×   关闭按钮

2.5 文档类型

在html文档的第一行,使用<!DOCTYPE HTML>声明HTML文档的类型用来告诉浏览器页面的文档类型,简单来说,用来指定html版本的规范

目前基本上最常用的html5,<!DOCTYPE HTML>

发布了2 篇原创文章 · 获赞 0 · 访问量 115

猜你喜欢

转载自blog.csdn.net/lan_baobao/article/details/104433099
今日推荐