HTML基础标签

最新推荐文章于 2022-09-22 09:51:54 发布

顽固油渍

最新推荐文章于 2022-09-22 09:51:54 发布

阅读量280

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_48051316/article/details/125114813

版权

1.HTML介绍

HTML英文全称是Hyper Text Markup Language，中文译为“超文本标记语言”。是构成网页的基本元素，是一种规范、一种标准。

·超文本：

即超越纯文本，这意味着HTML不仅能包含文本，还能包含图片、表格、列表、链接、按钮、输入框等其他内容

·标记语言：

HTML通过不同的标签来标记不同的内容、格局、布局等标签

·标签：

也称为标记或元素，用于在网页中标记内容。不同标签具有不同的含义，学习HTML其实就是学习各个标签的含义，根据实际场景的需要，选择合适的标签，从而制作出精美的网页。

语法：标签使用<>为标志，标签名不区分大小写，推荐小写表示。

分类：双标签\单标签

标签属性：标签属性书写在开始标签中，使用空格与标签名隔开。由属性名和属性值组成，属性值使用双引号表示。同一个标签中可以添加若干组标签属性，使用空格间隔。

·书写流程：

创建网页文件，使用.htm1作为文件后缀。

添加网页的基本结构。

根据实际场景的需要，选择合适的标签。

<!DOCTYPE html>
<html lang="en">
<head>
<!--  head保存页面的相关配置  -->
    <meta charset="UTF-8">
    <title>JD商城</title>
</head>
<body>
    Hello!
</body>
</html>

2.常用标签

2.1文本标签

·标题标签:HTML中提供了从<h1>到<h6>六个级别的标题标签，与word中的标题类似。使用标题可以使网页的层次结构更加清晰。

h是Head的缩写，头部、开始的意思

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

·段落标签：HTML中可以使用段落标签，来将文本内容分为若干个段落，

<p>段落文本</p>

·文本格式化标签:通过这些文本标签我们可以格式化文本(为文本添加样式)，例如使文本加粗、倾斜或者添加下划线等。

标签	说明
<b></b> <strong></strong>	加粗
<u></u> <ins></ins>	下划线
<i></i> <em></em>	倾斜
<s></s> <del></del>	删除线
<span>行分区标签，用于对特殊文本特殊处理</span>

·换行标签

<br>标签：打断换行，break的意思

<br>是单标签

·字符实体：

在Html中输入某些特殊符号时需要用对应的替代写法（字符实体）

&lt ----> <

&gt ----> >

&nbsp ----> 空格

&copy ----> @

&yen ----> ￥

2.2 容器标签：

常用于页面结构划分，结合CSS实现网页布局

<div id="top">页面顶部区域</div>
<div id="main">页面主体区域</div>
<div id="bottom">页面底部区域</div>

2.3 图片与超链接标签

图片标签：恰当地使用图片可以让网页更加精美。HTML 使用 <img>标签插入图片。<img> 是单标签，只包含属性，没有结束标签。

属性：src、alt、title、width、height

说明：

属性 width/height 用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。

·如果只设置width或height中的一个，另一个没设置的会自动等比例缩放

·如果同时设置了width和height两个，若设置不当此时图片可能会变形

<img src="图片路径" alt="当图片加载失败时，显示的文字" title="这是title文字, 鼠标悬停的时候显示" width="200" height="800">

·超链接标签：超链接是指从一个网页指向另一个目标的连接关系，这个目标可以是另一个网页，也可以是当前网页中的其它位置。链接的两端分别称为源锚点和目标锚点，通过点击源锚点即可以跳转到目标锚点。在HTML中，我们使用<a>标签来表示超链接。

·anchor 锚

属性：_self、_blank

<!--1. 外部链接-->
<a href="https://www.baidu.com/">点击跳转百度</a>
<!--2. 内部链接-->
<a href="./01-标题标签.html">首页</a>
<!--3. 空链接-->
<br>
<a href="#">跳转网页的顶部</a>
<!--4. 下载链接-->
<a href="./typora.zip">点击下载</a>
<!-- 5. 网页元素链接-->
<a href="https://www.baidu.com/">
    <img src="./1.webp" width="100" alt="">
</a>

<!-- 6. 锚点链接 用于当前页面的跳转 -->
<!-- 6.2 在链接的href属性中设置属性值为"#名字" -->
<a href="#to">点击跳转</a> 
<!-- 6.1 找到目标位置标签 里面添加一个id属性=自己取一个名字 -->
<h3 id="to">到我这里来了</h3>

<a>标签的显示特点:

a标签默认文字下有下划线
a标签没有点击过的话文字的颜色默认是蓝色
a标签点击过了文字显示的就是紫色

2.4 结构标签：

列表标签：在网页中按照行展示关联性的内容

种类：无序列表、有序列表、自定义列表
无序列表：在网页中表示一组无顺序之分的列表

标签组成
- ul标签：表示无序列表的整体
- li标签：表示无序列表的每一项

<ul>

<li>第一行</li>

<li>第二行</li>

</ul>

有序列表：在网页中表示一组有顺序之分的列表
- 标签组成：
  - ol标签：表示有序列表的整体
  - li标签：表示无序列表的每一项

<ol>

<li>打开冰箱门</li>

<li>将大象放进冰箱</li>

<li>关上冰箱门</li>

</ol>

自定义列表：在网页的底部导航中通常会使用自定义列表实现

标签组成
- dl标签：表示自定义列表的整体
- dd标签：表示对于主题的每一项内容
- dt标签：表示自定义列表的主题

<dl>

<dt>帮助中心</dt>

<dd>账户管理</dd>

<dd>购物指南</dd>

</dl>

2.5 表格标签：可以要数据显示的非常规整

<table>
    <tr>
        <td>姓名</td>
        <td>成绩</td>
        <td>评语</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>100分</td>
        <td>真棒啊</td>
    </tr>
    <tr>
        <td>小姐姐</td>
        <td>150分</td>
        <td>优秀啊</td>
    </tr>
</table>