HTML入门教程
2017-11-30 本文已影响0人
唐朝洋葱
一、开发网页的准备
- HTML开发工具：记事本、Dreamweaver，Sublime text（任选一个）
- HTML文件的扩展名：.htm 、.html
- 浏览器：谷歌浏览器、360浏览器（任选一个）
二、HTML的标签
- HTML标签是用来标记HTML元素的。
- HTML标签被 < 和 > 符号包围的。
- 这些包围的符号叫做尖括号
- 位于起始标签和终止标签之间的文本是元素的内容
- HTML标签对大小写不敏感，<b> 和 <B> 的作用是相同的（建议小写）
三、 HTML的基本结构
HTML的基本结构
<html> ...</html>、<head> ... </head>、<body> ... </body>
上面都是HMTL语言的基本部分。元素总是成对出现的，每一对元素一般都有一个开始标签（如<body>），也有一个结束标签(如</body>)。始终要记住这样规定的结构文档写法。
<!-- 复制以下代码 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
</head>
<body >
Hello World！
</body>
</html>
四、HTML的注释
- 注释标签用于在HTML源码中插入注释。注释之后会被浏览器忽略。
- 注释作用：增加代码的可读性，对日后的修改有很大的帮助
注释代码如下：
<html>
...省略代码
<!-- 注释的内容 -->
...省略代码
</html>
五、HTML的声明
- <!DOCTYPE html> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
- <!DOCTYPE html> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
- 声明没有结束标签。
- 提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
声明类型的区别
六、HTML的head部分包含的主要元素
- <title>内容</title> 文档标题，将内容显示在浏览器标题栏上。还有利于浏览器解析和搜索引擎收录。
- <meta name="xxx" content="xxx"> 用于设置一些头信息，描述HTML的元信息。
- <link src="xxxx"> 用于加载外部一些文档和其它脚本。
- <style>....</style> 用于定义内联css样式。
- <script> ...</script> 用于定义脚本javascript。
代码如下示例
<! -- 下面是声明文档类型 -->
<!DOCTYPE html>
<html>
<head>
<!-- 描述文档类型和字符编码，用来标记解码方式 -->
<meta charset="utf-8" />
<!-- 用来标记文档的作者 -->
<mate name="author" content="sunyang">
<!-- 提供搜索关键字，方便搜索引擎的搜索 -->
<meta name="keywords" content="关键字" />
<!- 提供内容描述，方便搜索引擎的搜索 -->
<meta name="description" content="...描述内容..." />
<title>我的第一个网页</title>
</head>
<body >
Hello World！
</body>
</html>
七、HTML的body标签的属性
- bgcolor 设定页面背景颜色
- background 设定页面背景图像
- leftmargin 设定页面的左边距（单位默认是像素）
- topmargin 设定页面的上边距
- text 设定页面文字的颜色
代码如下：
.....代码省略
<body bgcolor=“#006633” text=“#ffffff”>
hello word!
</body>
......代码省略
颜色代码大全安全颜色（共216种）
安全颜色列表
