HTML笔记

一、HTML简介

1，HTML是什么？

HTML：Hyer Text Markup Language超文本标记（标签）语言由多种标签组成，用来制作网页，告浏览器该如何显示页面

2，HTML语言的作用？

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

3,版本

w3c：World wide wed consortium万维网联盟，制定WEB技术相关标准和规范的组织，HTML就是由w3

c制定的标准

两个版本：HTML4.0和HTML5.0

学习上官网：WWW.w3school.com.cn

4，HTML后缀名—扩展名

HTML文件的扩展名是以html或htm来结尾

二、HTML文档的结构

1,基本结构

1.1简介

• HTML标签是由尖括号括起来的关键,如 ,通常都是成对出现的,如
• 以为根标签,包含: 头部和主体部分
• 头部提供关于网页的相关信息，如标题、字符编码（系统自认gbk，如果输入utf-8则部分浏览器标题显示错误）、文档类型、关键等摘要信息
• 主体部分提供网页的具体内容,真正显示在页面中
• 合理的进行缩进
• 标签名不区分大小写,但一般习惯用小写

1.2开发工具

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

使用步骤:

1·新建文件(ctrl+N),然后保存(ctri+S),指定扩展名为hmtl (若不加html则代码无颜色提示)

2.编写HTML文件

3.在浏览器中打开文件

使用技巧:

• 先保存再编写代码,否则没有颜色提示
• 创建一个文件夹,用于保存所有的网页内容,将文件夹拖拽到sublime中打开,便于管理显示/隐藏侧边栏

方式1 :查看->侧边栏->显示/隐藏侧边栏

方式2: ctrl+K再按B

显示多栏

• 方式1 :查看-布局->列数2列
• 方式2 : alt+shif+2

1.3浏览器

常见浏览器:

• 1E浏览器Chrome谷歌、 firefox火狐、 Safari 苹果
• 器的作用就是来读取html文件,并以网页的形式进行显示
• 浏览器不会直接显示html标签,而是使用标签来解释网页的内容

2,标签

2.1标签的组成

一个完整的html标签的组成：

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

属性值要用引号引起来，一般用双引号

2.2标签的分类

跟据标签是否关闭，分为：关闭型、非关闭型

• 关闭型标签：有开始标签也有结束标签，即标签成对出现
  
  
  

  
  
  
  
  
  
  
  标签的组成
  

  主讲：刘晓勇

  
  
  

• 非关闭型标签：只有开始标签，没有结束标签

  
  

  ---

表示换行

---

表示分割

根据标签中的内容是否独占一行，分为：行级标签、块级标签

• 块级标签：块级标签包起来的内容，独占一行

  ---

• 行级标签：在行内显示，可以与其他内容在同一行显示

2.3注释

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

<!--注释内容-->

2.4实体字符

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

语法：

&实体字符的名称：

常见的实体字符：

1，&lt;		<	小于号		less than
2，&gt；		>	大于号		greate than
3，&nbsp；	  	空格 		space	在html中对于连续的空白字符（包括空格、换行、TAB等），在浏览器中	显示为1个空格
4，&amp		&	与
5，&quot；	“	双引号
6，&copy；	©	版权符号	copyright
7，&red；		®	注册符号	register
8，&times；	×	关闭按钮

2.5文档类型

在html文档的第一行，使用声明HTML文档的类型用来告诉浏览器页面的文档类型，简单来讲，用来指定html版本的规范目前基本上最常用的html5，

三，常用标签

1，基础标签

   标签      	  含义  	             说明             
   br      	 换行标签 	            非关闭型            
    p      	 段落标签 	     关闭型，块级标签，前后有明显的间隔      

h1、h2…、h6 标题标签 按照h1到h6逐渐变小，块级标签、加粗显示
pre 预格式化标签 保留编码时的格式
div 分区标签 常作为容器来使用，一般用来页面布局，块级标签
span 范围标签 默认情况下没有效果，一般用来设置行内的特殊格式，行级标签
oi、li 有序列表 有顺序的项目列表
ul、li 无序列表 无顺序的列表
dl、dt、dd 定义列表 对术语、图片等进行描述定义的列表
hr 水平线的标签 非关闭型标签，块级标签
img 图像标签 非关闭型标签，行级标签

style是一个属性，一个完整的标签，同时由一个起始标签，结束标签组成；在起始标签里面可以包含一些属性，属性的名称不能用双撇号 “” ！属性值一般加双撇号来把他括起来，等号的前后不要加 空格