HTML基础入门

最新推荐文章于 2024-10-27 12:31:53 发布

原创最新推荐文章于 2024-10-27 12:31:53 发布 · 566 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

前端学习专栏收录该内容

3 篇文章

订阅专栏

本文介绍了HTML的基础，包括head的组成：title、meta、link、style、script，以及body的内容，如块标签div、h1~h6、p、ul&ol，行标签span、a、i、b、sub/sup，行块标签img，详细讲解了每个标签的用途和特性。

HTML基础入门

HTML网页主题由两大部分组成：1.head 2.body，head定义网页的整体信息，如：网页标题，信息的引入，关键词引入，网页是否可缩放之类，而body中，又由各种标签组成，构成网页的整体。

head组成

head主要由5部分组成

1.title

title标签设置网页的标题，即浏览器最上方显示的网页标题。

2.meta

meta标签主要用于信息引入以及说明，如：

定义网页keyword：

<meta name="keyword" content="优快云, LightWolf, html">

定义网页描述：

<meta name="description" content="学习html基础入门">

定义网页作者：

<meta name="auther" content="LightWolf">

定义网页viewport引入：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

width:视口宽度，height：视口高度，initial-scale初始缩放比例，maximum-scale最大缩放比例，minimum-scale最小缩放比例，user-scalable是否允许用户缩放。

3.link

link标签主要用于引入外部资源，如：

<link rel="stylesheet" href="css/1.css">

herf：链接文件路径，rel：当前文档与链接文档的关系，type：目标文件类型。

4.style

style标签用于对当前页面的css样式进行编辑。

5.script

script标签用于引入js文件。

body组成

body内有许多标签，标签又分为许多类，有块标签、行标签和行块标签，如下展示了常见的各种标签：

块标签

块标签的特点是： 独占一行，默认宽度占满父级，高度为0，子级内容撑开高度

1.div

div标签就是简单的文本显示，常用于包纳整体。

2.h1~h6

h1~h6是标题标签，级别由1-6,1最高，6最低，h1为大标题，一个页面只允许写一次，h2是副标题，一般不要超过8个，h3是小标题，h1-h3在网页中具有搜索权重，可引起搜索引擎，或网络爬虫反应。

3.p

p标签是一个段落标签，标识一个段落

4.ul&ol

ul和ol标签标识一个列表，常和li标签连用与构成列表，其中 ul 代表无序列表，即显示出来的列表不带有序号，而ol带有序号，用法：

<ul>
    <li>久旱逢甘霖</li>
    <li>他乡遇故知</li>
    <li>洞房花烛夜</li>
    <li>金榜题名时</li>
</ul>

<ol>
    <li>久旱逢甘霖 一滴</li>
    <li>他乡遇故知 前期</li>
    <li>洞房花烛夜 不举</li>
    <li>金榜题名时 重名</li>
</ol>

5.之后便是H5新增块标签，让标签更具语义

<article>
    <nav>这里是导航栏</nav>
    <header>这里是头部信息</header>
    <aside>这里是侧边栏</aside>
    <section>区域的意思</section>
    <footer>这里是底部信息</footer>
</article>

行标签

行标签的特点：同排序和显示，遇到父级边界换行。不支持宽高，内容撑开宽高。不支持上下外边距。不正常显示上下内边距。换行被解析。

1.span

普通的文本框

2.a

a标签用于表超链接，一共有四个作用：1.跳转网页 2.网页锚点 3.发邮件 4.下载。作用主要通过herf属性指向链接，target属性规定链接在何处打开：

<a href="www.baidu.com" target="_black">百度页面</a>

锚点用法：

<a name="top"></a>
<a href="#top"></a>

在点击下面的a标签链接后，即会跳转到上面 name=“top”的a标签处。

3.i

i标签用于将字体倾斜

4.b

b标签用于将字体加粗

5.sub,sup

这两个标签常用于配合p标签实现富文本，如：

<p>O<sub>2</sub></p>

上面的代码，在html中，便会展现出氧气的化学式的效果，即sub是右下角的角标，而sup是右上角的角标。

6.em，strong

这两个标签是h5新增标签，具有一定搜索权重，em标签相当于倾斜，strong相当于加粗

行块标签

行块标签的特点：同排序和显示，遇到父级边界换行。没有宽高的时候内容撑开宽高。换行被解析，即行块标签同时具有了行标签和块标签的“优良特性”。

img

img标签，就是显示一张图片，一般有三个属性，1.src：资源路径 2.title：鼠标悬停时的提示文本 3.alt：图片不能正常显示的提示文本。特点：只给高度或者宽度时，会等比例变化。

<img src="" title="" alt="">