一.HTML快速入门
1.什么是HTML
HTML:超文本标记(标签)语言。HyperText Markup Language。
超文本:文字、图片、动画、音频和视频、超链接和程序等。
特点:
-
简单
-
通用性
-
平台无关
注意:HTML不是一种编程语言。
2.HTML的发展历程
3.编写第一个html网页
它肯定是一个文件,后缀.html或者.htm
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
4.准备工作
浏览器:火狐 谷歌...
编辑器:notepad++,记事本,editplus...
开发者工具:F12
5.HBuilder的安装
ZHOU_VIP习惯使用HBuilder
二.HTML基本结构及语法
1.html结构
有三个部分构成:
- Html根标签
- Head头部
- Body部分
乱码解决方案:
原因:
首先,我们编写的html文件是一个字符集设置,比如utf-8.
其次,在浏览器浏览的时候,浏览器会解析该文件,使用浏览器默认的一种编码。有可能不是utf-8,如果是这样,就会出现乱码。
必须要保证,在html页面中,声明浏览器必须以相应的编码来解析。使用meta标签声明即可,如下:<meta charset="utf-8">
多说一句:在web开发的时候,有三种常见的编码:
ASCII码,没有中文
GBK/GB2312,有中文,在某些地方会以ANSI的方式来显示。
Utf-8,包括世界上所有的文字,是首选。
----------------------------------------------------------------------------------------------------------------------------------------
目前只需要掌握这样的结构就可以了。但是,实际上,还有一个东西,就是文档声明。
使用DOCTYPE来表示,Document Type的缩写。
直接使用H5就可以。优点就是简单:
参考w3cschool:
2.html标签一览表
实际上,常见的核心标签也就20来种:
结构:html、head、body、title、meta
文章:h1~h6、p、br、em、strong
超链接:a
图片:img
布局:div、span
列表:ul、ol、li、dl、dt、dd
表格:table、tr、td、th
表单:form、input、select、option、textarea3.html标签构成
主要有三部分构成:
-
开始标签
-
内容
-
结束标签
上述类似head和body这种写法标签,称之为双标签,成双成对。结束标签中必须有 / 。
还有一类标签,单标签,如下:
单标签只有一对尖括号,而且没有内容。
-------------------------------------------------------------------------------------------------------
在标签中可以使用属性,用来描述其它信息。
--------------------------------------------------------------------------------------------------------------------------------------------------------------
4.html标签语法
问题:我们在写标签的时候,需要注意哪些问题?
HTML的语法比较松散
不区分大小写
对于自结束元素,可以加/,也可以不加/
属性可以不加引号
----------------------------------------------------------------------------------------------------
尽管在H5中,语法非常松散,但不意味着我们在编写的时候,随意书写。
培养良好的HTML代码书写习惯非常重要
-
必须有文档声明 -- <!DOCTYPE html>或<!DOCTYPE HTML>
-
标签全部使用小写
-
为属性值加上引号,单引号和双引号都可以
-
标签可以嵌套,但不能交叉。
-
标签要正确的关闭,只要注意双标签即可。<h1></h1>
关于嵌套和交叉的说明: