HTML基础
文章目录
- HTML
-
- 什么是HTML?
-
- HTML简介及发展史
- HTML5有什么优势 为什么要用HTML5?
- W3C标准
-
- 为什么要遵循W3C标准
- W3C标准的介绍
- HTML5
-
- HTML5的基本结构
- 最基本的语法
- HTML5的基本结构
- 网页的基本信息:
- 网页的基本标签
- 特殊符号
- 图像标签
-
- 常见的图像格式
- 图像标签的基本语法
- 路径
- 超链接标签
-
- 超链接的语法
- 超链接的应用场合
- 行内元素和块元素
HTML
什么是HTML?
网络已经完全融入了大家的生活,在网上获取信息或通过网页查询资料,这些都离不开网页.在这些各式各样的页面中,无论漂亮的,丑的,还是文字的,图片的,视频的,音频的等,都是以HTML文件为基础制作出来的.
HTML简介及发展史
什么是HTML?HTML是用来描述网页的一种语言,它是一种超文本标记语言,也就是说,HTML不是一种编程语言,仅仅是一种标记语言.
既然HTML是标记语言,那么就是由一套标签组成的,在制作网页时,HTML使用标记标签来描述网页.
HTML5有什么优势 为什么要用HTML5?
1.世界的各大浏览器厂商对HTML5的支持:
如:微软,Google,苹果,Opera,Mozilla
2.市场的需求
在H5之前各浏览器之间不统一,仅是修改Web浏览器之间的兼容性就会浪费大量的时间,而H5的目标就是将Web带入一个成熟的应用平台,在H5平台上,视频,音频,图像,动画及同计算机的交互都被标准化
3.跨平台
HTML5可以做到跨平台开发,用户只要打开浏览器即可访问应用,PC,移动端,插件等核心代码不用反复编写,极大地减少了开发人员的工作量
W3C标准
为什么要遵循W3C标准
早期HTML版本的各大厂商为了竞争,在原有的基础上扩展各类标签,浏览器之间互不兼容,导致HTML编码规则混乱,违背了HTML发明的初衷,因此需要一个组织来制定和维护统一的国际化Web开发标准,确保多个浏览器狗兼容,HTML内容结构都是语义化的.
W3C诞生了,因此由W3C组织制定和维护的Web开发标准,也称为W3C标准,它是Web技术领域最权威和最具影响力的国际中立性技术标准机构
W3C标准的介绍
W3C标准不是某一个标准,而是一系列标准的集合,一个网页由三部分组成,即结构,表现和行为
HTML5
HTML5的基本结构
最基本的语法
最基本的语法就是<标记>内容,标签都是成对出现的,有一个开头标记就对应地有一个结束标记,以"<>“开始,以”"结束,要求成对出现,标签之间有缩进,体现层次感,方便阅读和修改
HTML5的基本结构
HTML5的基本机构分为两部分,整个HTML包括头部(head)和主题(body)两部分,头部包括网页标题等基本信息,主体包括网页的内容信息,如图片,文字等;
网页的基本信息:
DOCTYPE声明:文档类型声明,验证是否符号Web标准,同时告诉浏览器,使用哪种规范来解释文档中的代码.DOCTYPE html>
<title>标签:文章的标题,浏览器窗口的标题栏显示网页标题.<title>标题title>
<meta>标签:描述网页的摘要信息.
字符集
gb2312:简体中文,一般用于包含中文和英文的页面
ISO-8859-1:纯英文,一般用于只包含英文的页面
big5:繁体,一般用于带有繁体字的页面
UTF-8:国际性通用的字符编码,同样适用于中文英文的页面,万国码
网页的基本标签
1. 标题标签
<h1>~<h6> HTML共提供了六级标题<h1>~<h6>,所有标题变粗,<h1>字号最大,<h6>字号最小
2. 段落标签
<p> 段落标签<p>...<p>表示一段文字等内容,一段文字中可以包含多行文字,文字内容将随浏览器窗口的大小自动换行
3. 换行标签
<br> 换行标签<br/>表示强制换行显示,没有结束标签,直接用<br/>表示标签的开始和结束
4. 水平线标签
<hr/> 水平线标签<hr/>表示一条水平线,和<hr/>标签一样,没有结束标签
5. 粗体标签
<strong>strong> 粗体标签<strong>让字体表粗,带有语义化的标签,有强调,加强语气的作用
6. 斜体标签
<em>em> 斜体标签<em>让字体倾斜
7. 注释
特殊符号
| 特殊符号 | 字符实体 |
|---|---|
| 空格 | |
| 大于号(>) | > |
| 小于号(<) | < |
| 引号(") | " |
| 版权符号© | © |
图像标签
常见的图像格式
1.JPG格式
2.GIF格式
3.BMP格式
4.PNG格式
图像标签的基本语法
<img src="图片地址" alt="图像的代替文字" title="鼠标悬停文字" width="图片宽度" height="图片高度" />
src:表示图片路径
alt:指定的替代文本,表示图像无法显示时代替的文本
title:提供额外的提示或帮助信息
width:表示图片的宽度
height:表示图片的高度
路径
路径分为绝对路径和相对路径
绝对路径:指目标地址的完整描述,从盘符号开始
相对路径:相对于当前页面的路径,从当前出发
超链接标签
超链接的语法
<a href="链接地址" target="目标窗口位置">链接文本或图像a>
href:表示链接地址的路径;
target:指定链接在哪个窗口打开,常用的值有_self(自身),_blank(新建窗口);
超链接包含两部分内容,一是链接地址,即目标,可以是某个网址或文件的路径,对应为标签的href属性;二是链接文本或图像,点击该文本或图像,将跳转到href指定的链接地址
超链接的应用场合
页面间链接:页面间链接就是从一个页面链接到另外一个页面
锚链接:锚链接常用于目标页内容很多,需定位到目标页内容中的某个具体位置时
功能性链接:功能性链接比较特殊,当单击该链接时不是打开某个页面,而是启动本机自带的某个应用程序
行内元素和块元素
块元素特性:无论内容多少,该元素都独占一行
行内元素特性:内容撑开宽度,左右都是行内元素的可以排在一行