HTML-块级、行内元素和基础标签的介绍（第一天笔记）

HTML基本元素的使用

1.块级元素

作用：搭建网页结构

特点：

1、独占一行空间。

2、默认宽度为100%，没有父元素的话，宽度相对于视图区，有父元素的话相对于父元素而言，高度由子元素及其内容撑起

3、高度由子元素或内容决定。4、可以通过css指定其样式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QxKL5aE3-1627960772935)(C:\Users\Lilking\AppData\Roaming\Typora\typora-user-images\image-20210802190123056.png)]$

代码：

<body>
 <div style="border: 1px solid red;  ">
     div块级元素
 </div>
 <div style="border: 1px solid red;  ">
     div块级元素
 </div>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BsFLhRmW-1627960772939)(C:\Users\Lilking\AppData\Roaming\Typora\typora-user-images\image-20210802190613040.png)]$

代码：

<body>
 <div style="border: 1px solid red;  ">
     div块级元素
     <div>我是第1个div</div>
     <div>我是第2个div</div>
     <div>我是第3个div</div>
     <div>我是第4个div</div>
     <div>我是第5个div</div>
     <div>我是第6个div</div>
     <div>我是第7个div</div>
     <div>我是第8个div</div>
     <div>我是第9个div</div>
     <div>我是第10个div</div>
     <div>我是第11个div</div>
     <div>我是第12个div</div>
     <div>我是第13个div</div>
     <div>我是第14个div</div>
     <div>我是第15个div</div>
     <div>我是第16个div</div>
     <div>我是第17个div</div>
     <div>我是第18个div</div>
     <div>我是第19个div</div>
     <div>我是第20个div</div>
 </div>
 <div style="border: 1px solid red; width: 200px; height: 200px; text-align: center;">
     div块级元素
 </div>
</body>

以下是一些块级元素详细信息

建议：不要将块级元素嵌套在性内元素中。

元素	作用	已有CSS效果
div	无意义的块元素
h1~h3	标题标题	margin font-size font-weight
p	段落	margin
ul,li	无序列表	margin padding list-style
ol,li	有序列表	margin padding list-style
dl,dt,dd	定义列表	dl - margin dd - margin
html
body		margin
header	H5新增的语义化标签`<br>`(样式与div类似)	`<div class="header"></div>`
footer		`<div class="footer"></div>`
nav		`<div class="nav"></div>`
article		`<div class="article"></div>`
section		`<div class="section"></div>`
aside		`<div class="aside"></div>`
address		`<div class="address"></div>`

2.行内元素

作用：在结构中填充网页内容

特点：1、与其他行内元素共享一行空间。2、宽高由自身决定，内容多少就多大，无需通过css设置宽度，因为它不需要去搭建网页结构

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mdBO7Cc5-1627960772940)(C:\Users\Lilking\AppData\Roaming\Typora\typora-user-images\image-20210802191839439.png)]$

代码：

<body>
    <!-- 行内元素的基本使用 -->
    <!-- 设置不了宽高，只能由自身内容决定 -->
   <span  style="border: 1px solid red; width: 2000px;height: 2000px;">我是span标签</span>
   <span  style="border: 1px solid red;">我是span标签</span>

</body>

建议不要在行内元素中嵌套块级元素，否则会把网页布局弄乱！

行内元素中，我们常用的是span标签，以下是一些行内元素的详细信息。

3.基本标签的使用

1.h标签

h标签标题标签

在HTML中，一共有六级标题标签 h1~h6
在显示效果上，h1最大，h6最小，但是文字的大小我们并不关心
6级标题中，h1的最总要，表示一个网页中的主要内容，h2~h6重要性依次降低，对于搜索引擎来说，
h1的重要性仅仅次于title，搜索引擎检索完title会立即查看h1中的内容
h1标签非常重要，它会影响到页面在搜索引擎中的排名（百度除外，谁money多谁排名在前），一个页面最好只写一个h1标签
一般的页面中，我们只使用h1 h2 h3，其他的基本不用。

代码：

<body>
    <!-- h标签 -->
    <h1>我是h1</h1>
    <h2>我是h2</h2>
    <h3>我是h3</h3>
    <h4>我是h4</h4>
    <h5>我是h5</h5>
    <h6>我是h6</h6>
</body>

2.p标签，hr标签，br标签

段落标签，段落标签用于表示内容中的一个自然段
使用p标签来表示一个段落
p标签中的文字，会独占一行，并且段与段之间会有一个间距(外边距margin 16px)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ckwOAwo1-1627960772942)(C:\Users\Lilking\AppData\Roaming\Typora\typora-user-images\image-20210802193714080.png)]$

代码：

<body>
      <p>
        段落标签，段落&quot;标签&quot;用于表示内容中的一个自然段,<br><hr>
        使用p标签来表示一个段落,    
        p标签中的文字，会独占一行，并且段与段之间会有一个间距
    </p>
</body>

&quot是字符字体中的一种，它代表‘ " ’ ,一个双引号，更多字符字体如下，这里不作赘述

空格  &nbsp;
  <  &lt;
  >  &gt;
  “  &quot;
  &  &amp;
  ‘  &apos;

3.img标签

img标签在浏览器里显示一张图片
img标签格式
<img src="" alt="">
src:设置一个图片的路径（绝对路径和相对路径，最好使用相对路径）
alt:可以用来设置在图片不能显示的时，对图片的描述
img标签的其他属性
width:设置图片的宽度
height:设置图片的高度
title：用于告诉浏览器，鼠标悬停的时候，需要弹出的描述框中显示什么内容。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YEwdkM7X-1627960772944)(C:\Users\Lilking\AppData\Roaming\Typora\typora-user-images\image-20210802195019902.png)]$

代码：
<body>
 
 
 <img src="images/home.jpg" width="200px" alt="网络太慢啦~" >
 
 <img src="https://img0.baidu.com/it/u=2217770388,3475360492&fm=26&fmt=auto&gp=0.jpg" alt="加载失败~" title="基督像">
</body>
注意点：

1.px 单位名称为像素，相对长度单位，像素px是相对于显示器屏幕分辨率而言的。像素的使用性特

别广。

2.如果不设置img标签的宽度和高度，那么图片就会按照默认的样式显示，如果设置了宽高，img就

会按照设置的宽高来显示。

3.有时设置img的宽高会使图片失真，这时只需要设置宽度或者高度中的一个，另外一个会等比例调整。

4.一般除了自适应的页面，不建议设置width和height。

5.和h标签以及p标签不同的是，img标签不会独占一行

6.路径建议使用相对路径！！！（网络图片除外）

4.a标签

a标签的作用用于控制页面与页面之间跳转的
a标签的格式 
<a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>
<a href="https://www.baidu.com" target="_blank" title="百度">百度一下</a>
a标签中还有一个叫做target的属性，这个属性专门用于控制如何跳转
__self:用于当前的选项卡中进行跳转，也就是不新建页面跳转，默认就是_self
_blank:用于在新的选项卡中进行跳转，也就是新建页面跳转
a标签也有一个title属性，效果和img标签的title类似

注意点:
1.a标签不仅可以让文字点击，也可以让图片被点击
2.一个a标签必须有一个href属性，否则a标签不知道要跳转到什么地方
3.如果通过a标签href属性指定一个URL地址，那么必须在地址前面加上http://或者https://
除了URL地址，还可以指定一个本地地址

5.mailto标签

mailto链接是一种html链接，能够设置你电脑中邮件的默认发送信息。但是需要你电脑中安装默认的E-mail软件，类似Microsoft Outlook等等。加入您已经安装了Microsoft Outlook，那么直接点击mailto链接就可以获得默认设置的邮件信息。
使用方式:
<a href="mailto:[email protected]">Email</a>
更多使用方式

参数描述

mailto:[email protected] 电子邮件收件人地址

cc=[email protected] 抄送地址

bcc=[email protected] 密件抄送地址

subject=subject text e-mail的题目

body=body text e-mail的内容

? 和浏览器地址操作一样，第一个参数符合是？

& 其他参数符号是&

参数	描述
mailto:[email protected]	电子邮件收件人地址
cc=[email protected]	抄送地址
bcc=[email protected]	密件抄送地址
subject=subject text	e-mail的题目
body=body text	e-mail的内容
?	和浏览器地址操作一样，第一个参数符合是？
&	其他参数符号是&

6.base标签

base标签就是专门用来统一指定当前页面中所有的a标签需要如何打开

注意点:
1.base标签必须要写在head标签之间
2.如果既在base中指定了target又在a标签中指定了target，那么浏览器会按照a标签中指定的来执行
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <base target="_blank">
</head>
<body>
 <a href="https://www.baidu.com" target="_self">百度</a>
 <a href="https://www.baidu.com">百度</a>
</body>

7.假链接

什么是假链接？
就是点击之后不需要跳转的链接我们称之为假链接

在企业开发初期，其他的界面都没有完成，所以不知道跳转到什么地方，这个时候先用假链接来代替，项目完成后再换成真链接

假链接的格式
1.# 直接回到页面的顶部
2.javascript: 不会自动回到页面的顶部
用法:
<a href="#">回到顶部</a>
<a href="javascript:">点我啊</a>

8.锚点

1.要想通过a标签跳转到指定的位置, 那么必须告诉a标签一个独一无二的身份证号码, 这样a标签才能在当前界面中找到需要跳转到的目标位置

2.如何和HTML中的标签绑定一个独一无二的身份证号码呢?
在HTML中, 每一个标签都有一个名称叫做id的属性, 这个属性就是用来给标签指定一个独一无二的身份证号码的

3.所以要想实现通过a标签跳转到指定的位置分为两步
3.1给目标位置的标签添加一个id属性, 然后指定一个独一无二的值
3.2告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
格式:
<a href="#center">跳转</a>
 
 
 
 
我是center
 
 
 
 
 
注意点:
1.通过我们的a标签跳转到指定的位置, 是没有过度动画的, 是直接一下子就跳转到了指定位置
2.a标签除了可以跳转到当前界面的指定位置以外, 还可以在跳转到其它界面的时候直接跳转到其它界面的指定位置
//a.html
<a href="b.html#bottom" target="_blank">跳转</a>
//b.html
找到我