零基础必看的Html5+Css3+移动端前端教程(二)

知心宝贝

已于 2022-06-08 19:50:45 修改

阅读量2.8k

点赞数 12

分类专栏：前端文章标签： css javascript css3

于 2021-11-21 15:59:00 首次发布

本文链接：https://blog.csdn.net/qq_53673551/article/details/121454707

版权

前端专栏收录该内容

13 篇文章 25 订阅

订阅专栏

一、标签的分类

HTML标签由尖括号包围的关键词，如<html>
HTML标签中通常是成对出现的，例如<html>和</html>,称为双标签。双标签第一个是开始标签，第二个是结束标签
有些特殊的是单标签（比较少），例如换行标签<br />

二、标签的关系

三、标签的结构

四、常用的标签介绍

1.标题标签

分为h1~h6个，具体代码为


<body>
    <h1>标题标签</h1>
    <h1>标题一共六级选,</h1>
    <h2>文字加粗一行显。</h2>
    <h3>由大到小依次减，</h3>
    <h4>从重到轻随之变。</h4>
    <h5>语法规范书写后，</h5>
    <h6>具体效果刷新见。</h6>

</body>

2.段落和换行标签

<p>一段文字</p>使用段落标签后文章会分段显示并且两段中间有几个空行

<br \>单标签，遇到这个标签就换行


<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
    <p>在中国IT教育行业发展的轨迹中，<br /> 能始终秉承着初心做教育的企业为数不多，而在李开复老师的心中，传智播客就是其中之一。</p>


<p>在中国，李开复老师至少影响了70和80后两代人，然而翻开他的履历，我们并没有看到诸如马云、马化腾那样堪称传奇的成功经历，我们看到的只是一位厚积薄发、深耕在世界IT互联网行业多年的“导师”：</p>
</body>
</html>

3.文本标签

4.div和span标签

<div>和<span>标签没有具体的含义，它们兄弟俩就像一个盒子，用来装内容。

<div>大盒子<div>
<span>小盒子<span>

div是division的缩写，表示分割、分区，span意为跨度。

特点：

1.<div>标签用来布局，但是一行只能放一个<div>

2.<span>标签用来布局，一行可以放多个<span>

5.图像标签

绝对路径：

自己电脑中的图片
网络上的图片


<body>
    <img src="C:\Users\apple\Desktop\前端基础第一天-HTML\案例\img.jpg" />

    <img src="http://www.itcast.cn/2018czgw/images/logo.png" />
</body>

6.链接标签

<!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>超链接标签</title>
</head>
<body>
    <h4>0.锚点链接</h4><!--快速到当前页面锚点处-->
    <a href="#works">个人作品</a>
    <h4>1.外部链接</h4>
    <a href="https://www.qq.com">腾讯</a><!--target="_self为当前页面打开，_blank为新建页面,不写默认当前页面"-->
    <h4>2.内部链接</h4>
    <a href="the first.html" target="_blank">The first</a>
    <h4>3.空链接</h4>
    <a href="#">简介</a>
    <h4>4.下载链接</h4><!--下载一些exe文件或者压缩包-->
    <a href="_img.zip">压缩包</a>
    <h4>5.其它链接</h4><!--图片、视频等也可以作为链接-->
    <a href="https://www.baidu.com"><img  src="_img.jpg"/></a>
    <h4 id="works">xxxxxxxxxxxxxxxx</h4>
</html>