一、认识HTML
HTML有自己的语言语法骨架格式:(务必流畅的记下来)
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
1、HTML初识
<!DOCTYPE html>
<!-- DOCTYPE 说明文档的类型为HTML5 -->
<html lang="en">
<!-- 根标签 -->
<head>
<!-- 头部标签内容,主要用来说明,页面时什么的页面 -->
<meta charset="UTF-8">
<!-- 设置当前的编码为UTF-8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 这是告诉浏览器,如果你是IE浏览器,请使用最高级的版本进行渲染 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置移动端浏览器窗口的大小,宽度等于设备宽度,初始缩放比例为1 -->
<title>小米商城</title>
<!-- 标签栏标题改成该文字,例如小米商城 -->
<link rel="shortcut icon" href="img/favicon.ico"/>
<!-- 设置tab标签栏图标 -->
</head>
<body>
<!-- (正文内容)显示在页面上,需要放置在body -->
<h1>hello,mi</h1>
<h2>hello,mi</h2>
<h3>hello,mi</h3>
<h4>hello,mi</h4>
<h5>hello,mi</h5>
<h6>hello,mi</h6>
<!-- (h1-h6)文字大小 -->
</body>
</html>
2、html常用标签
1)标题标签(熟记)
<h1> </h1>
<h1>hello,mi</h1>
<h2>hello,mi</h2>
<h3>hello,mi</h3>
<h4>hello,mi</h4>
<h5>hello,mi</h5>
<h6>hello,mi</h6>
<!-- (h1-h6)文字大小 -->
2)段落标签(熟记)
<p> </p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 直接在网页里换行空格,会把连续的所有换行空格等空白符合并成一个空格 -->
<p>前面课程已经对Arcgis主页面,相关板块进行介绍,相信大家也有了一定的了解,当然这部分内容其实不需要大家死记硬背,有一个初步印象即可,这一节课程可能更需要掌握,之后会慢慢有实例给大家展现,在接触实例的过程中,相信大家会对软件的熟练程度慢慢上升。</p>
<p>数据是我们进行相关分析、数据处理、数据成果制作重要支撑,再用软件进行经济分析时重要前提就是如何在软件中添加数据,这是尤为重要,巧妇难为无米之炊,主要有以下几种方式:</p>
</body>
</html>
3)水平线标签(认识)
<hr> 水平线标签是单标签 <hr>或<hr/>都可以
4)换行标签br(熟记)
<br>或者<br/> 都可以
<body>
<h1>这是标题</h1>
<hr>
<!-- hr是单标签 -->
<p>前面课程已经对Arcgis主页面,相关板块进行介绍,相信大家也有了一定的了解,当然这部分内容其实不需要大家死记硬背,有一个初步印象即可,这一节课程可能更需要掌握,之后会慢慢有实例给大家展现,在接触实例的过程中,相信大家会对软件的熟练程度慢慢上升。</p>
<p>数据是我们进行相关分析、数据处理、数据成果制作重要支撑,再用软件进行经济分析时重要前提就是如何在软件中添加数据,这是尤为重要,巧妇难为无米之炊,主要有以下几种方式:</p>
<!-- 直接在网页里换行空格,会把连续的所有换行空格等空白符合并成一个空格 -->
<p>数据是我们进行相关分析、数据处理、数据成果制作重要支撑,<br>
再用软件进行经济分析时重要前提就是如何在软件中添加数据,<br>
这是尤为重要,巧妇难为无米之炊,主要有以下几种方式:</p>
示例
5)div和span标签(重点)
div与span是没有语义的,是网页布局的主要的两个盒子 想必听过css+div
div是division的缩写, 分割、分区,划分领地的意思 其实有很多div来组合网页
span是 跨度、跨距;范围 的意思
语法格式:
<div>这是头部</div>
<span>今日价格</span>
二者区别:div标签 用来布局,但是现在一行只能放一个div
span标签 用来布局,一行上可以放好多个span
<div>前面课程已经对Arcgis主页面</div>
<div>前面课程已经对Arcgis主页面</div>
<div>前面课程已经对Arcgis主页面</div>
<span>数据是我们进行相关分析、数据处理</span>
<span>数据是我们进行相关分析、数据处理</span>
<span>数据是我们进行相关分析、数据处理</span>
示例
排版标签总结
标签名 | 定义 | 说明 |
<hx></hx> | 标题标签 | 作为标题使用,并且依据重要性递减 |
<p></p> | 段落标签 | 可以把HTML文档分割为若干段落 |
<hr>或<hr/> | 水平线标签 | 没啥可说的,就是一条线 |
<br>或<br/> | 换行标签 | |
<div></div> | div标签 | 用来布局的,但是现在一行只能放一个div |
<span></span> | span标签 | 用来布局的,一行上可以放好多个span |
文本格式化标签
标签 | 显示效果 |
<b></b>和<strong></strong> | 文字以粗体方式显示(XHTML推荐使用strong) |
<i></i>和<em></em> | 文字以斜体方式希纳是(XHTML推荐使用em) |
<s></s>和<del></del> | 文字以加删除线方式显示(XHTML推荐使用del) |
<u></u>和<ins></ins> | 文字以加下划线方式显示(XHTML他不赞成使用u) |
区别:b只是加粗 strong除了可以加粗还有强调的意思,语义更强烈
<!-- --> 表示 注释 Ctrl+/