一.html：超文本语言
二.作用：制作网页----软件界面
三.常见的html的开发工具
1.记事本
步骤1:在指定的位置下创建一个新的记事本文件
步骤2:打开记事本文件编辑html代码
步骤3:保存，修改记事本文件名称[后缀名{.html / .htm}]
步骤4:在浏览器中运行
效率低下【不建议使用】
2.常用的html编辑工具
Notepad++：http://www.html.cn/tool/edit/2.html
Sublime Text：http://www.html.cn/tool/edit/6.html
WebStorm:https://www.html.cn/tool/edit/8.html
HBuilderX: https://www.dcloud.io/hbuilderx.html
VS Code：https://code.visualstudio.com/
四.html的文件结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HBuilderX</title>
</head>
<body>
<h1>这是HTML</h1>
</body>
</html>
五.html中的常用标记
html是超文本标记语言，所以它提供了制作网页的一组标记
1.标记不能自我发明创建
2.绝大部分的标记都是有三部组成:
<title>HBuilderX</title>
<title>----开始标记
</title>-----结束标记
HBuilderX--位于开始标记与结束标记之间---文本内容
3.也有一些单标记 【只有开头，没有文本内容和结束标记】<br>或者<br/>
<meta charset="utf-8">
1.<!DOCTYPE html>
<!DOCTYPE html>---html声明[html5版本]
【用来告知 Web 浏览器页面使用了哪种 HTML 版本】
<!DOCTYPE html>---是html5版本声明
doctype 声明是不区分大小写的，以下方式均可：
<!DOCTYPE html> / <!DOCTYPE HTML> / <!doctype html> / <!Doctype Html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> ---- 是html4.01版本声明
2.<html></html>-----双标记，整个网页,做大的。其他的标记都要被包含进来
3.<head></head>----双标记，网页头部部分。
为浏览器运行html文件提供附加信息的。
4.<title></title>---设置当前网页的标题
5.<body></body>-----网页身体部分,是我们制作网页的主要操作区域，因为body中的元素是对用户可见的。
6.<h1></h1>----网页中内容的标题标记。
7.<meta>介绍
<!DOCTYPE html>
<html>
<head>
<!-- 1.设置当前网页的字符编码-->
<meta charset="utf-8">
<!-- 2.为搜索引擎定义关键词-->
<!--<meta name="keywords" content="Html" />-->
<!--3.为网页定义描述内容-->
<!--<meta name="description" content="这是一个html网页">-->
<!--4.设置当前网页自动刷新-->
<!--<meta http-equiv="refresh" content="5">-->
<!--5.设置当前在间隔时间以后自动跳转到其他页面-->
<!--<meta http-equiv="refresh" content="5,http://www.baidu.com" />-->
<!--6.设置当前网页的作者-->
<!--<meta name="author" content="网星">-->
<title>meta标记</title>
</head>
<body>
<h3>meta标记---出现在head里面，meta标记为浏览器运行html文件提供附加信息的主要标记</h3>
<h3>meta标记--是一个单标记</h3>
<h3>meta标记中的charset="utf-8"是这个标记的一个属性</h3>
</body>
</html>
8.网页中内容的标题标记
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>h系列的标记</title>
</head>
<body>
<h3>标题的设置--head中的title标记，设置的是当前网页的标题</h3>
<h3>标题的设置--h系列的标记，设置设置内容的标题</h3>
<h3>内容的标题共有6个从h1~h6</h3>
<h3>h1设置的标题字体最大，h6字体最小，自动加粗</h3>
<h3>这类标记会自定换行，自成一行</h3>
<h1>设置内容的标题</h1><h2>设置内容的标题</h2><h3>设置内容的标题</h3>
<h4>设置内容的标题</h4><h5>设置内容的标题</h5><h6>设置内容的标题</h6>
</body>
</html>
9.hr--设置一条水平分割线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hr标记</title>
</head>
<body>
<h1>hr标记---设置一条水平分割线</h1>
<hr color="blue" size="70" width="400" align="left">
<h1>color---设置分割线的颜色</h1>
<h1>size---设置分割线的粗细</h1>
<h1>width---设置分割线的长短</h1>
<h1>align---设置分割线的水平对齐方式【left/center/right】</h1>
</body>
</html>
10.p--表示一个段落标记
主要用来在网页中显示一段文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>p标记</title>
</head>
<body>
<h1>p标记---主要用来在网页中显示一段文本【会自动换行】</h1>
<h1 align="center">峡谷植被管理者</h1>
<h5 align="right">作者:timor茹</h5>
<h5>内容简介</h5>
<hr />
<p>
timo--是居住在峡谷里一种非常可爱的生物,最喜欢做的事情就是为峡谷种蘑菇,他的蘑菇千奇百怪; 有饺子样的,鸡蛋样的,蜂巢样的,而蘑菇的样式则取决于timo今天穿的什么类型的衣服. 但是峡谷里并不太平,而提莫因为擅长种菇这个技能,引得人人都想学一手,所以峡谷里经常发生对timo的各种围追堵截, 果然如果不是互相奔赴,那你对别人的喜爱就是一种负担,为此timo常常苦不堪言,渐渐的提莫学会用伪装来保护自己, 只要他停在原地不动,那么他就可以与周围环境融为一体,有时候他就是用这种方式来躲避各种狐狸,螳螂,熊等等
</p>
<h5>内容简介</h5>
</body>
</html>
11. HTML 注释
注释是用来标注，解释说明html代码的含义。
方便别人/以后的自己阅读，看懂代码。
注释的内容不会被执行。
<!-- 需要被注释的内容 ,被注释的内容可以有多行 -->
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>提莫不参团</title>
</head>
<body>
<h1 align="center">峡谷植被管理者</h1>
<h4 align="right">作者:timor茹</h4>
<hr color="black" size="5" >
<h3> 内容简介 </h3>
<p>
timo--是居住在峡谷里一种非常可爱的生物,最喜欢做的事情就是为峡谷种蘑菇,他的蘑菇千奇百怪;
有饺子样的,鸡蛋样的,蜂巢样的,而蘑菇的样式则取决于timo今天穿的什么类型的衣服.
但是峡谷里并不太平,而提莫因为擅长种菇这个技能,引得人人都想学一手,所以峡谷里经常发生对timo的各种围追堵截,
果然如果不是互相奔赴,那你对别人的喜爱就是一种负担,为此timo常常苦不堪言,渐渐的提莫学会用伪装来保护自己,
只要他停在原地不动,那么他就可以与周围环境融为一体,有时候他就是用这种方式来躲避各种狐狸,螳螂,熊等等
</p>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
