一、HTML介绍
- HTML:超文本标记语言(hyper text markup language)
超文本:指页面内可以包含图片、链接、音乐、视频等非文字元素
标记:一种标记符,告诉浏览器如何显示其中的内容
注意:html不是编程语言(没有变量与流程控制)是一个标记语言
- 静态网页:html代码和内容书写完毕后,页面显示内容和显示效果基本上不会发生变化了----除非修改页面代码
动态网页:页面代码不变,但是显示内容却是可以随着时间、环境或数据库操作的结果而发生改变。
注意:网页中幻灯片效果,文字滚动效果,如果内容本身没有变化也属于静态网页。
- Html发展历史:
HTML4.01——1999.12.24,w3c推荐标准
XHTML1.0——2000.1.26,w3c推荐标准
HTML5——201410.29,保留HTML4所有功能增加很多新功能。
W3c:万维网联盟
- Html5(h5):指hmtl中最新的版本,也是使用做多的版本
- 开发工具:VS code 、webstorm
- 开发标准浏览器:Firefox、chrome
都有强大的开发者工具
二、HTML入门
- HTML语法
- 文件格式:.html,.htm(以前后缀名不超过三个)
- 标签格式:用于表现结构的内容,是网页组成重要部分(骨架)
- 大部分标签由开始标签和结束标签组成
- 开始标签:是被尖括号包围的元素名。
- 结束标签:是被尖括号包围的斜杠和元素名。
- 标签分类
- 单标签与双标签
- 双标签:是由开始标签和结束标签组成 如:<b> </b>
- 单标签:是指没有结束标签的标签 如:<br/>
- 单标签与双标签
- 标签属性:属性描述标签更多细节
- 基本语法()
- 标签属性必须写在开始标签上
- 属性写法格式:
- 单个属性:属性名1=”属性的值1”
- 多个属性:使用英文空格进行分隔
- 属性值,可以使用单引号、双引号或不加引号,推荐使用双引号
- 基本语法()
- 大部分标签由开始标签和结束标签组成
- HTML基本结构
<!DOCTYPE html> <html> <head> <meta> </head> <body></body> </html> | DOCTYPE: 文档声明 html: 标签告知浏览器其自身是一个 HTML 文档 head: 标签用于定义文档的头部(文档的描述信息) body: 标签用于定义文档的主体(文档的主体内容) |
VS code中 元素名+tab 针对双标签进行补全
<meta>标签:设置文件编码,meta:表示元信息标签,如文件源码,关键字,网页的描述等
chartset:设置编码格式。国际通用编码:utf-8(默认设置)中文编码:gbk/gbk212(国标)
<!-- 提供给搜索引擎的关键字信息 -->
<meta name="keywords" content="学习html"/>
<meta name="description" content="学习html"/>
<title>标签:表示显示在浏览器选项卡上的名字
<body>标签:表示文档的主要内容,所需要展示的内容都必须要放在body里面
- 编码问题
- 文件编码是指HTML文件保存到硬盘中的编码格式,一般在保存的时候设置,常见的开发工具都可以在编辑的时候设置。
注意:2个地方必须保持一致(文件编码+HTML编码声明)
- HTML规范
- HTML标签的尖括号必须是英文输入法中的符号
- HTML标签通常是成对出现的
- 不区分大小写(建议小写)
- 可以嵌套,但是不允许交叉嵌套
三、HTML基本标签
- 基础标签
- hn标签(双标签):是一系列标签n表示1-6
- 作用:定义标题
- 默认效果:文字加粗,有大小
- 注意:
- h1和h2一般在同一个页面只能使用一次(SEO权重)
- h标签具有明确的语义,建议在同一行中不能使用h标签来控制文字大小
- p标签:定义段落
- 注意:默认p标签自动在前后加入间距
- br标签:插入一个简单的换行符(类似于回车)
- hr标签:标签在HTML页面中一条水平分割线
- 说明:早期用来制作标题下面的下划线,现在基本不使用,后期使用border(边框样式代替)
- hn标签(双标签):是一系列标签n表示1-6
- 文本标签:对文字内容进行修饰
- b标签和strong标签(双标签):对文字进行加粗
- 注意:两个标签都有加粗效果,在H5中建议使用strong标签
- i标签和em标签(双标签):让文字倾斜
- 注意两个标签都有斜体效果,在H5中建议使用em标签
- small标签和big标签
- small标签:让文字呈现相对小号字体效果
- big标签:让文字呈现相对大号字体效果
- 注意:相对性(神对当前文字进行缩小、放大)、small标签有下限值、big标签没有上限值
- pre标签:预格式化文本(会保留空格和回车)
- 作用:一般用于保留计算机代码格式使用
- u标签:下划线文本
- 一般不建议在文字中使用u标签,会混淆超链接
- del标签:文本中已被删除的的文本(文字上加删除线)
- sub标签:定义文档中的下标文本
- sup标签:定义文档中的上标文本
- b标签和strong标签(双标签):对文字进行加粗
- 布局标签:网页的排版布局(块级标签和行内标签)
- span标签(行内标签):用来组合文档中的行内元素
- 作用:主要用于修饰指定内容的细节,如新闻列表中的日期,对文字加颜色时
- 行内标签特点:宽度为内容的大小,可以多个行内标签放在一行中
- div标签(块级标签):定义文档中的分区和节
- 作用:主要用于网站中大型板块或片段的制作
- 块级标签特点:默认宽度为100%,会独占一行
- span标签(行内标签):用来组合文档中的行内元素
- 特殊符号
- 作用:主要用于替代HTML中的一些特殊符号或实现效果
- 语法:&符号名;
- 常见的特殊符号:
- 空格(小空格)
-   空格(大空格,占一个中文位置)
- > 大于 > gt:great than
- < 小于 < lt:less than
- © 版权所有
- ¥ 人民币
- 提示:特殊符号制作:通过查HTML符号或通过某些输入法输入