HTML——标签

immnature

于 2024-08-05 01:05:52 发布

阅读量713

点赞数 24

分类专栏： HTML前端 Java 文章标签： html 前端

本文链接：https://blog.csdn.net/immnature/article/details/140913218

版权

HTML前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

Java

2 篇文章 0 订阅

订阅专栏

什么是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>
    <!-- 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>

运行：

immnature

关注

24
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML——标签

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

扫一扫