HTML5
一、为什么要学习HTML5？
- 受欢迎
自2012年HTML5正式推出以来，它立刻受到了世界各大浏览器的欢迎和支持 - 跨平台运行
可以在PC端、手机端、ipad端、Mac、linux运行 - 硬件要求低
一台笔记本就可以编写
二、介绍HTML5
- 什么是HTML5？
HTML是一种用来描述网页的一种超文本标记语言，不是编程语言 - 浏览器支持
IE、Firefox、Chrome等
三、环境搭建
-
开发工具
Webstorm 、Eclipse、sublime text3、Intellij IDEA等
笔者使用Webstorm，可以某宝买破解码 -
软件下载
下载链接：https://www.jetbrains.com/webstorm/
Webstorm软件的快捷键
打开file/seting/keymap，在下面可以自己设置和查看 -
创建第一个项目
1、点击File/New/Project/Empty Project
2、创建好了项目Learn后就往Learn里面加文件
法一：右击项目Learn/New/File/File，在弹出的窗口里面给你的文件取名，必须加上文件对应的后缀名，如果是HTML文件就写（文件名+.html）这样建的HTML文件打开是空白的，没有添加HTML的基本格式，完全自己编写
建好后，可以看到HTML文件在Learn下面，而且代码编辑界面是空白的
法二：右击项目Learn/New/HTML File,在弹出的窗口里面给你的文件取名，这里不必加上文件对应的后缀名，因为下面的Kind中指定了文件类型
建好后文件仍然在项目名Learn下，但是代码编辑界面已经给好了默认格式
3、为什么上面新建项目时选择Empty Project而不选择HTML5 Bolierplate,因为HTML5 Bolierplate里面加了太多其他的东西我们初学者用不到
我们来演示一下：
点击File/New/Project/HTML5 Bolierplate
我们比较一下Learn项目和Study项目的左工具栏：
Learn
Study
比较上面两张图可以发现还是第一种的简单，适合初学者，可以马上找到项目下建的HTML文件
-
编写第一个HTML文件
标题写：HTML
显示的内容写：Hello，world!
-
运行第一个HTML文件
点击编辑界面右上方的对应的浏览器图标即可运行
-
运行结果：
四、HTML基础
- 一个HTML文件代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
Hello，world!
</body>
</html>
- HTML标记声明
<!DOCTYPE html>
| 版本 | 年份 |
|---|---|
| HTML | 1991 |
| HTML2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| HTML5 | 2012 |
HTML有多个版本（部分举例），不同版本的标记声明不同，如<!DOCTYPE html>是HTML5的标记声明，用于告诉浏览器要解析的文档使用了哪种HTML规范，这样浏览器才能正确显示HTML界面。
-
HTMl基础标记
1、<head>标记
用于定义文档头部信息
包含文档中文字的显示形式：<html lang="en">,"en"代表英文格式,换成zh代表中文格式
包含文档的编码格式：<meta charset="UTF-8">,这种格式下中文才能正常显示
包含文档的标题：<title>，即浏览器窗口的标题栏2、
<body>标记
用于标记包含文档的所有内容3、
<h>标题标记
用于标记标题的大小，范围为<h1>到<h6>,数字越小字体越大（只可用来设置标题大小，不能用来设置文字的大小）
4、排版标记
<br>标记
用于换行，单个标记
<p>标记
用于构成一个段落，前后自动各留一个空行，成对标记
<center>标记
用于居中内容，成对标记
<address>标记
用于表示地址和签名，前后自动各留一个空行
<!--注释的内容-->标记
用于注释便于阅读和理解程序的说明性文字
<hr>标记
用于画一条水平线，单个标记
<hr>即Horizontal Rule的简称，单独的<hr>表示默认的一条最细的黑线
语句格式1：<hr [ size = "值"] [ width = "值"] [ align = "值"] [ color ="值" ] [noshad="值"]>
语句格式2：<hr size = "值" width ="值" align ="值" color ="值" noshad="值">
语句格式3：<hr size = 值 width =值 align =值 color =值 noshad=值>
在编辑器中，打了=号后会自己加双引号，里面写值，当然也可以不要双引号
属性
size:设置线纵向宽度 （用像素点或百分号）
width:设置线横向长度 （用像素点或百分号）
align:设置对齐方式 （center、left、right）
color：设置线的颜色 （用颜色单词或字符）
noshad:表示阴影 （false、true）
代码示例
5、链接和加载标记
<a>标记
用于设置超链接，可以链接到另一个文件
格式：<a href="链接的地址">文字说明</a>
补充：
把<body>标记改为<body link=blue alink=green vlink=red>
body link=blue表示未被点击前文字显示蓝色
alink=green 表示点击时文字显示绿色
vlink=red 表示点击后文字显示红色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body link=blue alink=green vlink=red>
<a href="https://blog.csdn.net/PioneerFan">欢迎访问</a>
</body>
</html>
<img>标记
用于添加图片
格式:<img src>
124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
