HTML的概念和发展
- HTML指的是超文本标记语言(Hyper Text Markup Language)
- HTML不是一种标准语言,而是一种标记语言(markup language)
- 标记语言是一套标记标签(markup tag)
- HTML使用标记标签来描述网页
- 发展历程:
- 目前已经发布到5.0
- XHTML语法非常严格,HTML的语法则非常随意(即使写错浏览器也可以解析出来)
HTML基本结构
html基本结构
<!DOCTYPE html> <!-- 文件头,5.0版本的文件头 -->
<html> <!-- 根 -->
<head> <!-- 头,主要放标题,编码,语言等属性 -->
<meta http-equiv="Content-Type" content="text/html:charset=gb2312"/>
</head>
<body> <!-- 内容 -->
</body>
</html>
元素:
<标签 属性名='属性值' 属性名='属性值'>内容</标签>
head
<!DOCTYPE html>
<html>
<head>
<title>Hello</title> <!-- 标题 -->
<script></script> <!-- 该元素用于包含JavaScript基本 -->
<link></link> <!-- 该元素用于链接外部CSS资源文件 -->
<style></style> <!-- 该元素用于定义内部CSS样式 -->
<meta http-equiv="Content-Type" content="text/html:charset=gb2312"/> <!-- 主要设定页面的各个属性,比如编码,语言等(用于HTML页面的元数据)
http-equiv指定元信息的名称,该属性指定的名称具有特殊意义,它可以向浏览器传回一些有用的信息,帮助浏览器正确地处理网页内容,
name指定元信息名称,该名称值可以随意指定,
content指定元信息的值
如:<meta name="author" content="frank"/>
<meta name="website" content="www.baidu.com"/>
-->
</head>
<body> <!-- -->
</body>
</html>
HTML环境介绍
HTML常用开发工具
- Dreamweaver (可以直接拖拽)
- Eclipse
- Notepad++
- IntelliJ IDEA
- Webstorm(推荐)
WebStorm:
- 一个一个工程
- 一个界面只能展示一个工程
- 界面如下:
- 在工程下右键添加HTML文件即可
- 调整:
- file-setting
- 直接搜索font修改字体,自行调整(Courier New字体挺好看)
- 快捷键:搜索keymap设置
第一个页面
<!DOCTYPE html>
<html lang="en"> <!-- lang设置语言,可以不设置 -->
<head>
<meta charset="UTF-8"> <!--charset设置编码格式-->
<title>第一个页面</title>
</head>
<body>
正文部分
</body>
</html>
在webstorm的右上方选择一个浏览器,可以看看效果展示: