Javascript 第一章第二节 HTML5 （一）

S u N .

已于 2023-04-03 18:11:07 修改

阅读量59

点赞数

文章标签： javascript html5

于 2023-04-02 16:36:51 首次发布

本文链接：https://blog.csdn.net/weixin_65088924/article/details/129912782

版权

一、认识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>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）段落标签（熟记）

<!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>前面课程已经对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）