HTML 标签

最新推荐文章于 2024-08-14 10:15:39 发布
最新推荐文章于 2024-08-14 10:15:39 发布
阅读量84 收藏
点赞数
文章标签： html html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nooneescape/article/details/120318537
版权

目录

1 源码 

2 效果图

 

1 源码 

<!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>Document</title> -->
</head>

<body>
    <a href="https://www.baidu.com/">百度</a>

    <p>这是<abbr title="超文本标记语言">HTML</abbr></p>

    <address>
        <a href="https://www.baidu.com/">请联系百度</a>
    </address>
    
    <!-- 只能在 map 里边使用，用于选取某个区域并且能够点击跳转 -->
    <area shape="" coords="" href="" alt="">

    <!-- 独立分配 可以复用的结构 比如多个评论块  -->
    <article>
        <article style=" margin: .5rem;padding: .3rem;font-size: 1.2rem;">这是 1</article>
        <article style=" margin: .5rem;padding: .3rem;font-size: 1.2rem;">这是 2</article>
        <article style=" margin: .5rem;padding: .3rem;font-size: 1.2rem;">这是 3</article>
    </article>

    <!-- 与主体文章无关的内容，通常为侧边栏内容 -->
        <p>这是文章的主体这是文章的主体这是文章的主体这是文章的主体这是文章的主体这是文章的主体</p>
        <aside style="width: 40%;
        padding-left: .5rem;
        margin-left: .5rem;
        float: right;
        box-shadow: inset 5px 0 5px -5px #29627e;
        font-style: italic;
        color: #29627e">这不是文章主体内容</aside>

    <!-- 添加音频组件，src 添加音频来源，也可以用 source -->
    <audio src=""></audio>

    <b>粗体</b>

    <!-- 用于指定根 url 的值，一个文档中只能有一个 base ，如果有多个则只有第一个生效 -->
    <base href="">

    <!-- 双向隔离元素，用于与周围的文本隔离 -->
    <bdi>这是 1</bdi>
    <bdi>这是 2</bdi>
    <bdi>这是 3</bdi>

    <!-- 双向文本替代元素，用于覆盖原文本 -->
    <bdo dir="ltr">这是双向文本替代元素</bdo>
    <bdo dir="rtl">这是双向文本替代元素</bdo>

    <!-- 块级引用程序，如果信息有出处可以用 cite 来储存 -->
    <blockquote cite="https://www.baidu.com/">这是一个块级引用程序</blockquote>
    <cite>来源百度</cite>

    <!-- 文档主题元素，表示文档的内容 -->
    <body></body>

    <!-- 换行 -->
    <br>

    <!-- 按钮，可用于表单提交元素或者其他使用按钮的地方 -->
    <button>按钮</button>

    <!-- 通过 js 可以在 canvas 上进行画图 注意需要将 js 放在 canva 之后 -->
    <canvas id="mycanvas" width="300px" height="300px">
        这些内容在渲染不成功的时候出现。
    </canvas>

    <!-- 通常为 table 的第一个子元素，作为 table 的标题 -->
    <caption>
        表格标题元素
    </caption>

    <!-- 表示作品的引用 -->
    <cite>
        <a href="https://www.baidu.com/">作品引用</a>
    </cite>

    <!-- 表示计算机代码 显示默认是与浏览器等宽的字体 -->
    <code>计算机代码</code>

    <!-- col 可以将同一列的数据进行处理 只能在 table 和 colgroup -->
    <table width = "100%">
        <col style="background-color: brown;" />
        <col style="background-color: burlywood;">
        <col style="background-color: chartreuse;">
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        <tr>
            <th>4</th>
            <th>5</th>
            <th>6</th>
        </tr>
        <tr>
            <th>7</th>
            <th>8</th>
            <th>9</th>
        </tr>
    </table>

    <!-- 用来储存列表 -->
    <colgroup></colgroup>

    <!-- 将数据（ value 内绑定的内容，也被叫做机器可读的翻译，能够被机器所识别）绑定给内容 -->
    <data value = "123">内容</data>

    <!-- datalist 可用来作为一个储存数据的列表，与 option 一起成为表单控件的选项 -->
    <input list="data" />
    <datalist id="data">
        <option value="1">
        <option value="2">
        <option value="3">
    </datalist>

    <!-- dd 作为概率的阐述，并且必须和 dt 一起使用 -->
    <dt>概念名</dt>
    <dd>概念解释</dd>

    <!-- del 表示删除的内容，与 ins 的作用相反，ins 表示添加的内容 -->
    <del>表示删除的内容</del>

    <!-- details 表示隐藏的详细信息，summary 表示标题 -->
    <details>
        <summary>标题</summary>
        这里是被隐藏的内容
    </details>

    <!-- dfn 表示摘要，是一个定义 -->
    <p><dfn>术语</dfn>术语的定义</p>

    <!-- 对话框 open 表示对话框激活能够互动 被看见 -->
    <dialog open>
        对话框
    </dialog>

    <!-- 用于将文档内容分区 是通用型的流内容容器 -->
    <div>这里是 div </div>

    <!-- dl 表示一个列表，dt 每一列内容，使用 dd 则字体加粗居中 -->
    <dl>
        <dt>1</dt>
        <dt>2</dt>
        <dd>3</dd>
    </dl>

    <!-- 着重元素 用于强调内容 -->
    <em>我是着重元素</em>

    <!-- 嵌入外部内容， type 为选择的 MIME 类型， src 为资源的 url 地址 -->
    <embed type="video/quicktime" src="movie.mov" width="640" height="480">

    <!-- 用于将表单控件分组 -->
    <fieldset>用于表单控件的分组</fieldset>

    <!-- figure 表示独立的一个元素 经常与 figcaption 一起使用，figcaption 可以用于描述图片的信息 -->
    <figure>
        <img src="/media/cc0-images/elephant-660-480.jpg"
        alt="Elephant at sunset">
        <figcaption>这里是描述的文字</figcaption>
    </figure>

    <!-- 常用于表示文章、作品、作者等的相关信息 -->
    <footer>我是页脚</footer>

    <!-- 表单，交互控件包含在里边 action 表示交互的 url 可以被按钮等的相同属性覆盖 -->
    <form action="">这里是表单控件</form>

    <!-- 标题 h1 最重要，到 h6 递减，注意没有 h7 -->
    <h1>1</h1>
    <h2>2</h2>
    <h3>3</h3>
    <h4>4</h4>
    <h5>5</h5>
    <h6>6</h6>

    <!-- 包含文档的标题 配置等信息 -->
    <head>文档的相关配置</head>

    <!-- 常用于包裹 h1-h7 ，也包含图片等 -->
    <header>我是 header </header>

    <!-- 一条横线 -->
    <hr>

    <!-- 根元素 只能有一个 -->
    <html>我是根元素</html>

    <!-- 斜体 -->
    <i>我是斜体</i>

    <!-- 内联框架，可以引入另外一个 HTML -->
    <iframe src=""></iframe>

    <!-- 引入图片 -->
    <img src="123" alt="src无效显示我">

    <!-- 表单元素，用于接收用户的输入数据 -->
    <input type="text">

    <!-- 与 del 相反，显示插入的元素 -->
    <ins>我是被插入的元素</ins>

    <!-- 键盘输入元素 -->
    <kbd>我是键盘输入元素</kbd>

    <!-- label 为标签元素，常与 input 一起用，for 用来绑定对应的选择框 -->
    <label for="test">我是标签</label>
    <input type="checkbox" id="test">

    <!-- 作为 fieldset（表单控件分组） 的标题 -->
    <fieldset>
        <legend>我是标题</legend>
    </fieldset>

    <!-- li 为列表条目，即每条列表内容，必须在 ol ul menu 中使用 -->
    <!-- ol 为有序列表 -->
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    <!-- ul 为无序列表，主要用于显示项目 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li> 
    </ul>
    <!-- menu 为无序列表，主要用于交互项目 -->
    <menu>
        <li>1</li>
        <li>2</li>
        <li>3</li> 
    </menu>

    <!-- rel 为链接与被链接之间的关系，要使用官方定义的属性 -->
    <link href="/media/examples/link-element-example.css" rel="stylesheet">

    <!-- 包含主要内容，只能有一个 -->
    <main>我是主要内容</main>

    <!-- 用来定义映射（可点击的）区域 name 为地图的名称，方便对其引用 -->
    <map name=""> area 标签的可引用区域</map>

    <!-- 突出、标记元素 -->
    <mark>我是被突出元素</mark>

    <!-- 文档级元数据元素，不能由 base title link script style 表示的任何元数据内容，比如文档的字符编码 charset -->
    <meta charset="">

    <!-- 显示已知范围的标量值或分数值，类似与一个进度条 -->
    <meter min="0" max="500" value="250"></meter>

    <!-- nav 作为一个导航链接 -->
    <nav>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </nav>

    <!-- 当 script 不能够执行的时候的时候执行 noscript 的内容 -->
    <noscript>执行失败时候的内容</noscript>

    <!-- 嵌入对象元素，用于引入资源， data 为一个合法的 url 资源，type 资源表示的 MIME 类型 -->
    <object data="" type=""></object>

    <!-- 使用 optgroup 给选项 option 创建一个分组 -->
    <optgroup>
        <option>选项一</option>
        <option>选项二</option>
        <option>选项三</option>
    </optgroup>

    <!-- option 可作为 select 和 datalist 的选项 -->
    <!-- select 为菜单选项控件 -->
    <select>
        <option>select选项一</option>
        <option>select选项二</option>
        <option>select选项三</option>
    </select>
    
    <datalist>
        <option>datalist选项一</option>
        <option>datalist选项二</option>
        <option>datalist选项三</option>
    </datalist>

    <!-- output 表示计算或者用户操作后的结果，如果没有给 output 指定 form 的 id，则必需是 form 的后代才能使用 -->
    <form oninput="result.value = a.value + b.value">
        0<input type="range" name="a">100
        +<input type="text" name="b">=
        <output name="result"></output>
    </form>

    <form oninput="result.value = a.value + b.value" id="form_output">
        0<input type="range" name="a">100
        +<input type="text" name="b">=
    </form>
    <output form="form_output" name="result"></output>

    <!-- p 是一个块级标签，能够表示一个文本的段落 -->
    <p>我表示文本的一个段落</p>

    <!-- param 为 object 定义元素参数，name 表示参数名字，value 表示参数值 -->
    <object>
        <param name="" value="">
    </object>

    <!-- 通过包含 source 和 img 来提供不同的图像版本，常用于浏览器不能支持特定格式时，提供不同的图像 -->
    <picture>
        <source>
        <img src="" alt="">
    </picture>

    <!-- 预定义格式文本，直接将 pre 的内容按照原来的样子显示 -->
    <pre>
        我是
            预定义
                格式文本
    </pre>

    <!-- 进度条样式 -->
    <progress value="70" max="100"></progress>
    
    <!-- 用于引用短文本，cite 的值是 url ，blockquote 是用于长文本的引用 -->
    <q cite="">引用短文本</q>

    <!-- ruby 用来给展示发音或者注释，rt 里边是发音的内容，当浏览器不支持 rt 时，使用 rp 包裹，rtc 的内容是注释 -->
    <ruby>
        <!-- 单字写法 -->
        汉 <rt>han</rt>
        字 <rt>zi</rt>

        <!-- 词写法 -->
        汉字 <rt>han zi</rt>

        汉 <rp>(</rp><rt>han</rt><rp>)</rp>
        <rtc>我是注释</rtc>
    </ruby>
    
    <!-- 表示删除的文本 与 del 效果差不多 -->
    <s>我有删除线</s>

    <!-- 表示计算机的输出 -->
    <sample>我是计算机程序输出结果</sample>

    <!-- 用于包含标题等内容，比如 nav 用于包含导航菜单 -->
    <section></section>

    <!-- 插槽，类似于占位符，拥有 name 属性就叫具名插槽 -->
    <slot>我是插槽</slot>
    
    <!-- 将字体缩小一号 -->
    <small>我是小一号字体</small>

    <!-- source 是一个空元素，用于给 video picture audio 指定媒体资源 -->
    <video>
        <source>
    </video>

    <!-- 与 div 类似，但它是 行内元素 -->
    <span>我是短语内容</span>

    <!-- 粗体文字，用于强调 -->
    <strong>我是粗体文字</strong>

    <!-- 给 HTML 指定样式 -->
    <style></style>

    <!-- 文本区域，更低更小，记忆方法 b 的 o 在下面，更小-->
    <p>正常<sub>更低</sub><sup>更高</sup></p>

    <!-- table 表示表格，thead 表示表格头，tbody 表示表格身体, tr 表示表格的行， td 表示行里边的内容 -->
    <!-- tfoot 表格的脚，表示汇总行 -->
    <table>
        <thead>
            <td>我是表格头</td>
            <tr>
                <td>1</td>
                <td>2</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>5</td>
                <td>6</td>
            </tr>
        </tfoot>
    </table>

    <!-- 内容模板元素 -->
    <template>
        这里的内容加载不会渲染在页面上，但是可以通过 js 来实例化
    </template>

    <!-- 多行文本控件， -->
    <textarea cols="30" rows="10">

    </textarea>

    <!-- time 表示的时间能够被机器所识别读取 -->
    <time>时间</time>

    <!-- 浏览器标题 -->
    <title>我是浏览器标题</title>

    <!-- 作为 audio video 的子元素来使用，可以表示基于时间的东西，比如字幕 -->
    <track />

    <!-- 表意不清标注元素 -->
    <u>我是表意不清元素</u>

    <var>
        我是数学表达式或者变量名称
    </var>

    <!-- video 是媒体播放器，用于视频播放，也可用于音频播放，但音频播放使用 audio 更好 -->
    <video src=""></video>

    <!-- wbr，使用它可以避免在错误的时机换行 -->
    <p>
        如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
    </p>
</body>

<!-- script 用于嵌入或者指向 js 代码 -->
<script type="text/javascript">
    var canvas = document.getElementById('mycanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'green';
    ctx.fillRect(10, 10, 100, 100);
</script>
</html>

2 效果图

 

 

 

 

 

 

 

GraceY2
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移除HTML标签的正则表达式
10-29
在处理HTML内容时，有时我们需要去除其中的HTML标签，以便得到纯文本内容。标题提到的"移除HTML标签的正则表达式"就是解决这类问题的一个方法。以下将详细解释这个ASP版本的正则表达式及其工作原理。 首先，我们来...
【HTML 标签详解】
热门推荐
书生-w的博客
04-28 2万+
HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。
HTML标签属性
m0_66081324的博客
06-27 4135
1.标签由标签名、标签属性和文本内容三部分组成（注意：单标签没有文本内容）。 2.标签属性是对标签的一种描述方式。 3.标签属性分通用属性、自有属性和自定义属性。 4.通用属性:所有标签都具有的属性（除标签外）。 通用属性有： id：用来给标签取一个唯一的名称。id名称在一个网页必须是唯一的。 class：用来给标签取一个类名。 style：用来设置该标签的行内样式。 title：当鼠标移到该标签，所显示的提示内容。 5.自...
常用html标签及其属性
weixin_53988377的博客
07-16 1万+
网页的基本结构文档类型声明标签文档标记标签文档的头部标签文档的主体标签。
HTML基础-html标签、标签属性及核心功能
student66666666的博客
04-11 3777
html标签 html标签一般是成对出现的，叫做双标签，其中第一个标签叫做开始标签（开放标签），第二个标签叫做结束标签（闭合标签），结束标签的标签名前是有/标注。 单标签 <标签名 /> 标签关系：嵌套关系（父子关系） 并列关系（兄弟关系） <p>1234324 <span>与第一个<p>是嵌套关系（父子关系) <span> </p> <p> 与第一个<p>是并列关系（兄弟关系） </p&g
HTML 基本开发方式，学会常用的 HTML 标签
1226
04-28 1万+
一、HTML 基本开发方式 1、如何编写 HTML 代码 本身的语法比较简单，语法风格和 Java 之类的差别很大，(并不能表达一些逻辑，而只是能表达 “有哪些东西" 一种信息)， 使用记事本创建一个文件，后缀名改成 .html 即可，运行 html 也不需要额外的编译器，直接有浏览器就行 hello world! 虽然这个代码能运行，但是其实并不算是一个合法的 HTML 语法，那为什么浏览器还能正常运行呢?? 鲁棒性：“容错能力” 强 <html> <head> &
javascript 去掉html标签,js怎么去掉html标签
weixin_26886855的博客
06-15 7524
js去掉html标签的方法：首先新建一个html文件；然后使用p标签创建多段文字；接着使用button标签创建一个“删除html”的按钮；最后创建delhtml()函数，并在函数内实现对指定的p标签进行删除即可。本文操作环境：Windows7系统、javascript1.8.5&&html5版，DELL G3电脑新建一个html文件，命名为test.html，用于讲解如何使用js删...
html基本标签
weixin_44992737的博客
06-04 4572
html基本标签
html 学习 常用的html标签及使用
weixin_46673625的博客
04-30 6631
html 常用的标签及使用 表格标签 from input select label textarea 标签
html文本标签
Alkali!的博客
07-11 3367
文本标签虽然很多，但大部分可看成是预定好样式的和。元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。 其他块级标签例如：, , , , , 。 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。 与 元素很相似，但 是一个 块元素 而 则是 行内元素,其他内联标签例如：, , , , ,
Java中替换HTML标签的方法代码
09-04
在Java编程语言中，处理HTML标签是常见的需求，特别是在数据清洗、文本提取或者邮件处理等场景。本篇文章将深入探讨如何使用Java中的`String`类提供的`replaceAll()`方法来替换HTML标签。 首先，我们来看一下给出的...
正则表达式匹配闭合HTML标签(支持嵌套)
10-15
在处理HTML文本时，我们经常需要匹配特定的HTML标签，尤其是在标签内有特定属性如id时。HTML标签可以嵌套使用，因此，编写能够匹配闭合标签的正则表达式具有一定的难度。 首先，要匹配闭合的HTML标签，我们需要理解...
html标签、html语义化
12-19
HTML 标签和 HTML 语义化 HTML 标签是构建网站的基本元素，它们被用来定义网页的结构和内容。在 HTML 5 中，HTML 标签被分为两类：结构性标签和语义化标签。结构性标签用来定义网页的基本结构，如 `<html>`、`...
Java 语言实现清除带 html 标签的内容方法
08-31
在Java编程中，有时我们需要处理含有HTML标签的文本，例如从网页抓取的数据或用户输入包含HTML格式的内容。为了进一步处理这些数据，我们可能需要清除HTML标签，仅保留纯文本内容。以下是一个简单的Java方法，用于...
前端案例：极速问诊项目（移动端自适应）（HTML+CSS+JS）
li3123537691的博客
08-13 323
一个简单的移动端案例，模拟不同设备下逻辑分辨率不同，宽高自适应正常打开整体布局打开 f12 （ctrl + shift + M）或者点击左上角图标,将其模拟为移动端设备在移动设备iPhone6/7/8，逻辑分辨率375的整体布局其banner图尺寸现在切换设备为iPad，逻辑分辨率为768，此设备下banner图尺寸自适应再切换设备为iPhone 14 Pro Max，逻辑分辨率为430，此设备下banner图尺寸自适应。
移动端的知识 以及 排静态网页的步骤
最新发布
x15514104477的博客
08-14 915
移动端的知识（基础知识） 以及 排静态网页的示例步骤
html+css+js网页设计 电商戴欧妮珠宝网3个页面 有轮播图，折叠面板，一键置顶等功能
qq_42431718的博客
08-13 288
html+css+js网页设计 电商戴欧妮珠宝网3个页面 有轮播图，折叠面板，一键置顶等功能 网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
HTML知识点二——表单
qq_62859013的博客
08-13 948
该文章讲解了java的表单知识点
HTML标签属性完全指南
"HTML标签属性大全" HTML（HyperText Markup Language）是用于创建网页的标准标记语言。这个摘要提供了HTML标签的一些基本知识，包括文档结构、文本样式、链接创建、格式排版以及图形元素的使用。 首先，HTML文档...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值