首页 前端知识 HTML——标签

HTML——标签

2024-08-27 09:08:27 前端知识 前端哥 410 44 我要收藏

什么是HTML?

初始HTML:

        要建立web(网络)页面,需要创建用超文本标记语言(超文本标记语言,简写为HTML)编写的文件,把它们放在一个网站服务器上。根据web页面的超文本标记语言,浏览器可以了解到显示页面所需的全部信息。简单来说,HTML是浏览器显示页面的关键。

        浏览器则通过阅读HTML来翻译文本中的所有标记,标记就是尖括号括起来的词或字符,例如<head>、<p>、<h1>等。标记会告诉浏览器文本的结构和含义,所以并不是交给浏览器一大堆的文本,利用HTML、你可以用标记告诉浏览器哪些文本是标题,哪些文本是段落哪些文本需要强调,或者图像需要放在什么位置。

        如下面的一个简单页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到动物之家</title>
</head>
<body>
    <h1>动物介绍</h1>
    <h2>老虎</h2>
    <img src="img/picture1.jpg" alt="" width="200px">
    
    <p>老虎是典型的山地林栖动物,由南方的热带雨林、常绿阔叶林,以至北方的落叶阔叶林和针阔叶混交林,都能很好的生活。</p>
    <img src="img/picture2.jpg" alt="" width="200px">
    <p>兔,是兔形目兔科 兔属草食性脊椎动物 。</p>
</body>
</html>

运行如下:

HTML的相关定义:

HTML

        (超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其他技术则通常用来描述一个网页的表现与展示效果(如 CSS),或功能与行为(如 JavaScript)。

 “超文本”(hypertext)

        是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。

 “标记”(markup)

        HTML 使用“标记”(markup)来注明文本、图片和其他内容,以便于在 Web 浏览器中显示。HTML 标记包含一些特殊“元素”如 <head>、<title>、<body>、<header>、<footer>、<article>、<section>、<p>、<div>、<span>、<img>、<aside>、<audio>、<canvas>、<datalist>、<details>、<embed>、<nav>、<output>、<progress>、<video>、<ul>、<ol>、<li> 等等。

“标签”(tag)

        HTML 元素通过“标签”(tag)将文本从文档中引出,标签由在“<”和“>”中包裹的元素名组成,HTML 标签里的元素名不区分大小写。也就是说,它们可以用大写,小写或混合形式书写。例如,<title> 标签可以写成 <Title><TITLE> 或以任何其他方式。然而,习惯上与实践上都推荐将标签名全部小写。

创建一个HTML文件

        我们可以在电脑中创建一个文件夹,之后我们所有的操作都会在这个文件中进行,方便查询存储,用Visual Studio Code打开该文件,在这里我们先创建一个名称为 标签.html 的文件

然后在该文档中输入英文字符的 !,选择第一个自动生成模板

而接下来我们重点介绍的就是标签,让我们来一起了解一下在HTML中有哪些标签。

标签

首先我们看一下这个自动生成模板中的标签有哪些含义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html> 

1.html 

<html> 与 </html> 标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。,文档的头部由 <head> 标签定义,而主体由 <body> 标签定义。

2.head 

<head> 元素是元数据(关于数据的数据)的容器,位于 <html> 标签 和 <body> 标签 之间。

元数据是有关 HTML 文档的数据。元数据不会被显示。

元数据通常定义文档标题、字符集、样式、脚本和其他元信息。

以下元素可以放置在 <head> 元素内:

  • <title>(必需)
  • <style>
  • <base>
  • <link>
  • <meta>
  • <script>
  • <noscript>

3.title

<title> 标签定义文档的标题。标题必须是纯文本的,显示在浏览器的标题栏或页面的选项卡中。

<title> 标签在 HTML 文档中是必需的!

如在初始HTML中以“欢迎来到动物之家”为标题的页面

4.body

<body> 标签定义文档的主体。

HTML 文档的元数据和文档信息包装在 head 元素中,文档的内容则包装在 body 元素中。

body 元素总是紧跟在 head 元素之后,它是 html 元素的第二个子元素。

<body> 元素包含 HTML 文档的所有内容,例如标题、段落、图像、超链接、表格、列表等

后面我们将要介绍的标签也主要是body里头的标签。

5.文本标签:span

<!-- 文本标签:span -->
<span>在这里输入文本内容</span>

6.标题标签 : h1~h6

<!-- 标题标签:h1~h6(主要是大小有所区别) -->
<h1>一级标题h1</h1>
<h2>二级标题h2</h2>
<h3>三级标题h3</h3>
<h4>四级标题h4</h4>
<h5>五级标题h5</h5>
<h6>六级标题h6</h6>

运行效果如下图:

7.竖着布局的标签 : div

<!-- 竖着布局的标签   div -->
    <h1>竖着布局的标签   div</h1>
     <div>aaaaa</div>
     <div>bbbbb</div>
     <div>ccccc</div>
     <div>ddddd</div>

运行结果如下:

8.段落标签 : p

<p>段落标签p</p>

9.超链接标签标签 : a

 <a href="https://www.bilibili.com/" target="_blank" >点击跳转到哔哩哔哩</a>

        herf 设置资源路径

        target 设置窗口打开方式 :

                _self  默认在本窗口打开

               _blank           在新窗口打开...

                 窗口名(可以自定义,该方式将与锚点相结合)  

10.锚点标签 :  a

该标签类似于游戏之中的存档点,在点击相应位置后可以跳转到相关位置,为了让该效果明显一些,我们拿如下代码作为例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1.文本标签:span -->
    <a name="aa">锚点--------------------文本标签</a>
    <h1>1.文本标签:span</h1>
    <span >hello </span><span>world</span>
    <span>在这里输入文本内容</span>

    <!-- 2.标题标签:h1~h6(主要是大小有所区别) -->
    <a name="bb">锚点--------------------标题标签</a>
    <h1>2.标题标签:h1~h6(主要是大小有所区别)</h1>
    <h1>一级标题h1</h1>
    <h2>二级标题h2</h2>
    <h3>三级标题h3</h3>
    <h4>四级标题h4</h4>
    <h5>五级标题h5</h5>
    <h6>六级标题h6</h6>
    <h1>一级标题h1</h1>
    <h2>二级标题h2</h2>
    <h3>三级标题h3</h3>
    <h4>四级标题h4</h4>
    <h5>五级标题h5</h5>
    <h6>六级标题h6</h6>


    <!-- 3.竖着布局的标签   div -->
    <a name="cc">锚点--------------------竖着布局的标签</a>
    <h1>3.竖着布局的标签   div</h1>
     <div>竖着布局的标签div</div>
     <div>竖着布局的标签</div>
     <div>竖着布局的标签</div>
     <div>竖着布局的标签</div>
     <div>竖着布局的标签</div>
     <div>竖着布局的标签</div>
     <div>竖着布局的标签</div>
     <div>竖着布局的标签</div>
     <div>竖着布局的标签</div>
     <div>竖着布局的标签</div>
     <div>竖着布局的标签</div>
     <div>竖着布局的标签</div>
     <div>竖着布局的标签</div>
     <div>竖着布局的标签</div>
     <div>竖着布局的标签</div>


    <!-- 4.段落标签   p -->
    <a name="dd">锚点--------------------段落标签</a>
    <h1>4.段落标签   p</h1>
     <p>段落标签p</p>
     <p>段落标签</p>
     <p>段落标签</p>
     <p>段落标签</p>
     <p>段落标签</p>
     <p>段落标签</p>
     <p>段落标签</p>
     <p>段落标签</p>
     <p>段落标签</p>
     <p>段落标签</p>
     <p>段落标签</p>
     <p>段落标签</p>
     <p>段落标签</p>
     <p>段落标签</p>
     <p>段落标签</p>
     <p>段落标签</p>
     <p>段落标签</p>
     <!-- 注意:所有标签共有的属性有三个:id   class   style -->


    <!-- 5.超链接标签标签   a -->
    <a name="ee">锚点--------------------超链接标签标签</a>                           
    <h1>5.超链接标签标签   a </h1>                           
     <a href="https://www.bilibili.com/" target="_blank" >点击跳转到哔哩哔哩</a>


     <!-- 6.锚点标签   a -->
      <a href="#aa">跳转到文本标签</a>
      <a href="#bb" >跳转到标题标签</a>
      <a href="#cc" >跳转到竖着布局的标签</a>
      <a href="#dd" >跳转到段落标签</a>
      <a href="#ee" >跳转到超链接标签标签</a>
   
   
 
    
</body>
</html> 

在代码的底部,我们相当于设置了跳转到本页面中对应位置的超链接

,而这些链接我们也起了不同的名字用于区分,比如我们在页面中点击“跳转到文本标签”,在HTML当中就会跳转到名字叫做aa,即<a name="aa">锚点--------------------文本标签</a>所在的位置

如果我们想要超链接部分在页面的固定位置显示,可以做出如下修改:

<!-- 6.锚点标签   a -->
     <a href="#aa" style="position: fixed;right: 30px;bottom: 200px;">跳转到文本标签</a>
     <a href="#bb" style="position: fixed;right: 30px;bottom: 160px;">跳转到标题标签</a>
     <a href="#cc" style="position: fixed;right: 30px;bottom: 120px;">跳转到竖着布局的标签</a>
     <a href="#dd" style="position: fixed;right: 30px;bottom: 80px;">跳转到段落标签</a>
     <a href="#ee" style="position: fixed;right: 30px;bottom: 40px;">跳转到超链接标签标签</a>

相当于我们更改了其标签样式,位置(position)改为固定,并距页面最右端30像素,最底端xxx像素效果如下图:

11.图片标签  : img

为了方便管理,在插入图片之前,我们可以在我们所创建的HTML文件夹中创建新的文件夹img,用于存放相关资源,同时注意.html文件与图片之间的关系,注意点如下:

src:引用的图片资源

            路径:

                相对路径: 访问资源与被访问资源的关系

                    兄弟关系 src="picture.jpg"

                    叔侄关系 src="picture.jpg"

                    表兄弟关系 src="../img/picture.jpg"

                绝对路径: 资源的绝对位置

        alt:当图片资源不能正常展示时,显示alt里边的内容

例子

<img src="img/picture1.jpg" alt="这是一张老虎的图片">
<img src="img/pic.jpg" alt="这是一张兔子的图片">

运行:

12.列表标签 : li

分为无序列表ul和有序列表ol两种

<!--列表标签 -->

<ul> <!-- 无序列表ul -->
    <li>列表标签</li>
    <li>列表标签</li>
    <li>列表标签</li>
    <li>列表标签</li>
</ul>
<ol> <!-- 有序列表ol -->
   
    <li>列表标签</li>
    <li>列表标签</li>
    <li>列表标签</li>
    <li>列表标签</li>
</ol>

运行:

13.表格标签  : table

<table>放表格的容器

        <tr>行

        <td> 单元格   <th>单元格(加粗居中)

        border表格有边框

        width="500px"设置宽

        height="400px"设置高

        cellpadding="10px" 单元格填充度

        cellspacing="0" 单元格之间的间距 0 表示挨在一起

        thead tbody tfoot 用于调整表格顺序

        rowspan  把行合并

        colspan  把列合并

<!-- border="1"为表格样式 -->
            <table border="1" width="400px" height="300px" cellpadding="10px">

                <tr>
                    <!-- 相比较于td,th会有内容加粗居中的效果 -->
                    <th>id</th>
                    <th>name</th>
                    <th>age</th>
                    <th>sex</th>
                </tr>
        
                <tr>
                    <td>1</td>
                    <td colspan="2">张宇一</td>
                    <!-- 合并几行写几 -->
                    <td>男</td>
                </tr>
                <tr>
                    <td rowspan="2">2</td>
                    <td>李明名</td>
                    <td>20</td>
                    <td>男</td>
                </tr>
        
                <tr>
                    <td>李华</td>
                    <td>20</td>
                    <td>女</td>
                </tr>
        
            </table>

运行:

14.框架标签  iframe嵌套其他页面

src:嵌套的资源

        width设置页面的宽

        height设置页面的高

        frameborder="0":去掉边框,将页面嵌入更加真实

 <iframe src="https://leetcode.cn/" width="1200px" height="600px" frameborder="0" name="aaa"></iframe>
    <br><br>
    <a href="https://www.bilibili.com/" target="aaa" >点击跳转到哔哩哔哩</a> 
    <a href="https://leetcode.cn/" target="aaa" >点击跳转到力扣</a>
    <a href="https://www.baidu.com/" target="aaa" >点击跳转到百度</a>

15.音频标签

     console手动播放,让播放器显示出来

          console的取值true false(html中不用加,有就是true,没有就是false;js中需要添加) 

    autoplay自动播放(播放完后就会停止)

    autoplay loop循环播放

<audio src="img/Men.mp3" controls></audio>

16.视频

视频标签与音频相类似,这里不再做演示

17.收集用户信息的标签

补充:br表示换行

<!-- 收集用户信息的标签  -->
    <form>
        <input type="text">单行文本框<br><br>
        <input type="password">密码框<br><br>
        <input type="radio">单选框<br><br>
     <!-- name相同的之中只能选择一个-->
        <input type="radio" name="1">男生 <input type="radio" name="1">女生 <br><br>
        <br><br>
        <input type="checkbox">复选框<br><br>
        <input type="checkbox" name="sport">足球 <input type="checkbox" name="sport">篮球 <input type="checkbox" name="sport">排球<br><br>
        <br><br>
        <input type="file">文件选择器(可以用来选择文件)
        <input type="color">颜色拾取器<br><br>
        <br><br>
        <input type="date">日期<br><br>
        <input type="datetime-local">日期时间<br><br>
        <input type="week">周选择器<br><br>
        <input type="range" min="0" max="100" value="80" >滑块<br><br>
        <input type="number" min="0" max="100" value="80" step="5" >数字<br><br>

        <select>
            <option value="">数学</option>
            <option value="">英语</option>
            <option value="">语文</option>
            <option value="1">语文</option>
        </select><br><br>

        <textarea  rows="10" cols="50" ></textarea>多行文本域<br><br>

        <input type="button" value="普通按钮">
        <input type="reset" value="重置按钮">
        <input type="submit" value="提交按钮">
        <!-- 若想要这些按钮有用,必须将收集用户信息的标签放到form表单里头 -->
        
    </form>

运行:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17019.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!