AI 助理
文档备案控制台
开发者社区 云原生 文章 正文

HTML基础标签及案例

2023-06-09 176
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Hyper Text Markup Language（超文本标记语言）；是一门用户创建网页文档的标记语言，网页本身是一种文本文件，在文本文件中添加标记符。HTML是用来创建网页的标记语言，HTML标记的内容是用浏览器来解析的；所见即所得！

HTML

HTML概述

HTML：Hyper Text Markup Language（超文本标记语言）；是一门用户创建网页文档的标记语言，网页本身是一种文本文件，在文本文件中添加标记符。HTML是用来创建网页的标记语言，HTML标记的内容是用浏览器来解析的；所见即所得！

HTML特点

1、简易性：超文本标记语言的版本升级采用的超集方式，更加方便灵活；

2、可扩展性：超文本标记语言采取的子类元素的方式，为系统扩展带来保证；

3、平台无关性：只要有浏览器就行；

4、通用性：HTML是网络的通用语言，一种简单、通用的标记语言；

HTML基本结构

<!-- 文档声明：文档的类型 -->
<!DOCTYPE html>
<html>
    <!--网页的头部 -->
    <head>
        <!--字符集编码 -->
        <meta charset="utf-8" />
        <!-- 页面的标题 -->
        <title>卡卡之家</title>
    </head>
    <!-- 网页的主题，显示的部分-->
    <body>
        展示的内容
    </body>
</html>

  • HTML标签通常是成对出现的，有开始标签，有结束标签，称为对标签。没有结束标签的为空标签；

  • HTML标签都长都有属性，格式：属性名 = "属性值" 属性名 = "属性值"。多个属性用空格间隔；

  • HTML标签不区分大小写，建议小写；

  • HTML文件后缀名为html或htm；

HTML基本标签

结构标签

<html></html>:根标签
<head> ：头标签
    <title></title>页面的标题
</head>
<body>：主体标签：显示网页内容

</body>

属性：

  • color:文本的颜色

  • bgColor:背景色

  • background：背景图片

颜色的表示方式：

  • 颜色名称 red blue green yellow orange

  • RGB模式 #000000 #ffffff #325687

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>卡卡</title>
    </head>
    <!--背景色 bgcolor="aqua"-->

    <body background="img/timg.jpg">
        <!--文本标签 -->
        <!--RGB赋值模式-->
        <font color="red">卡卡之家</font>
    </body>
</html>

排版标签


- 注释标签：<!-- 注释 -->

- 换行标签：<br/>

- 段落标签：<p>文本文字</p>

​        特点：段落与段落之间有行高（行间距）自带换行

​        属性：文本对齐方式 align （left、center 、right）

- 水平线标签：<hr/>

​ 属性：

​ width：水平线的长度(两种：像素表示。第二种：百分比显示)

​ size：水平线的粗细（一般给个位数如 6px）

​ color：水平线的颜色

​ align：水平线的对齐方式(left、center、right)

标题标签

共有6级从h1到h6，数字越小标题越大，默认加粗占一行；

容器标签

  • 块级标签div ： 独占一行，自带换行；
  • 行级标签span ： 所有内容都在同一行；

作用：

  • 块级标签div主要是结合css做页面分块布局；
  • 行级标签span主要进行友好提示信息的显示；

列表标签

无序列表

ul(unorder list)

ul是无序列表，默认标识为实心圆 disc
​ circle 空心圆
​ square 黑色方块

        <ul type="circle">
            <li>兰博基尼</li>
            <li>法拉利</li>
            <li>宾利</li>
        </ul>

有序列表

ol(order list)

ol是有序列表，默认标识为阿拉伯数字 1
​ a A 字母字典顺序
​ i I 罗马数字

        <ol type="I">
            <li>兰博基尼</li>
            <li>法拉利</li>
            <li>宾利</li>
        </ol>

定义列表

dl(defination list)定义列表

dt(defination title)定义标题

dd(defination description) 定义描述

        <dl>
            <dt>定义标题</dt>
            <dd>定义描述</dd>
            <dt>定义标题</dt>
            <dd>定义描述</dd>
        </dl>

图片标签

img 独立标签
属性：

  • src 图片地址
  • ​ width 图片的宽度
  • ​ height 图片的高度
  • ​ border 边框
  • ​ alt 图片的文字说明 当图片未能正确加载时，才显示
  • ​ title 鼠标悬停时，显示的文字
<img src="img/1.jpg"
            width="500px"
            height="900px"
             />
        <img src="img/timg.jpg"
            width="500px"
            height="500px"
            border="5"
            alt="当图片未能正确加载时显示"
            title=" 鼠标悬停时，显示的文字"
             />

链接标签

超链接可以是文本也可以是图片，可以点击链接标签，进入新的文档，或者是当前文档中的某个部分；a标签

属性：

  • href="跳转的地址"跳转外网需要添加协议
  • target:_self(当前文档)

​ _blank(新页面,会一直打开新的)
​ _search 之前打开的页面存在，则不打开新的页面，直接复用

  • name 充当锚点（顶部、底部）需要为标签提供name属性，进行赋值
    需要点击跳转的标签href属性给 #name
<a href="https://www.baidu.com" target="_search">打开百度</a>
        <a name="tops" href="#downs">跳转底部</a>
        <p>广告</p>
        <p>广告</p>
        <p>广告</p>
        <p>广告</p>
        <p>这是最底端</p>
        <a href="#tops" name="downs">回到顶部</a>
    </body>

表格标签

表格由table标签来定义，每个表格均有若干行(由tr标签定义行)，每行由若干个单元格组成(由td标签来定义)；

table属性：

  • 默认没有边框体现
  • border:边框的宽度
  • bordercolor:边框的颜色
  • cellspacing:单元格的间距
  • cellpadding:单元格与内容的间距
  • width:宽度
  • height:高度
  • align:控制表格的对齐方式 left center right

td的属性：

  • align:控制的单元格内容的对齐方式 left center right
  • valign:控制单元格内容的垂直对齐方式 top middle bottom

普通表格

table tr td

        <table border="1" bordercolor="red" cellspacing="10" cellpadding="10"
            width="300px" height="300px" align="center">
            <tr>
                <td align="center">学号</td>
                <td align="center">姓名</td>
                <td align="center">性别</td>
            </tr>
            <tr>
                <td valign="bottom">1001</td>
                <td valign="middle">卡卡</td>
                <td valign="top">男</td>
            </tr>
        </table>

在这里插入图片描述

表格的表头

th：默认居中字体加粗；

<!-- th作为表头，默认居中，加粗 -->
<table border="1">
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>分数</th>
            </tr>
            <tr>
                <td>1002</td>
                <td>糖糖</td>
                <td>100</td>
            </tr>
        </table>

在这里插入图片描述

表格的列合并

colspan

<table border="1" bordercolor="red">
            <tr>
                <td align="center" colspan="4">学生信息表</td>
            </tr>
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td colspan="2">各科成绩</td>
            </tr>
            <tr>
                <td>1</td>
                <td>卡卡</td>
                <td>80</td>
                <td>90</td>
            </tr>
        </table>

在这里插入图片描述

表格的行合并

rowspan

<table border="1" bordercolor="blue">
            <tr>
                <td colspan="4" align="center">学生表</td>
            </tr>
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>java</td>
                <td>html</td>
            </tr>
            <tr>
                <td rowspan="2">1</td>
                <td rowspan="2">卡卡</td>
                <td>80</td>
                <td>90</td>
            </tr>
            <tr>
                <td>100</td>
                <td>99</td>
            </tr>
        </table>

在这里插入图片描述

文本格式化标签

        <!--粗体文本-->
        <b>卡卡之家</b><br />
        <!--大号字-->
        <big>卡卡之家</big><br />
        <!--着重文字-->
        <em>卡卡之家</em><br />
        <!--斜体字 把字体倾斜-->
        <i>卡卡之家</i><br />
        <!--小号字-->
        <small>卡卡之家</small><br />
        <!--定义加重语气-->
        <strong>卡卡之家</strong><br />
        <!--下标字-->
        卡卡<sub>之家</sub><br />
        <!--上标字-->
        卡卡<sup>之家</sup><br />
        <!--插入字-->
        <ins>卡卡之家</ins><br />
        <!--删除字-->
        <del>卡卡之家</del>

在这里插入图片描述

基本标签的综合案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>综合案例</title>
    </head>
    <body>
    <!--头部-->
        <div>
            <table width="100%" align="center">
                <tr>
                    <td align="left">
                        千锋教育-稀有的坚持全程面授品质的大型IT教育机构
                    </td>
                    <td align="right">
                        <a>好程序员特训营&nbsp;&nbsp;</a>
                        <a>JavaEE分布式开发&nbsp;&nbsp;</a>
                        <a>JavaSE核心基础&nbsp;&nbsp;</a>
                        <a>加入我们</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="img/new_logo.png" />
                    </td>
                    <td align="right">
                        <img src="img/nav_r_ico.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <hr/>
                        <span>首页&nbsp;&nbsp;</span>
                        <span>课程培训&nbsp;&nbsp;</span>
                        <span>教学保障&nbsp;&nbsp;</span>
                        <span>免费视频&nbsp;&nbsp;</span>
                        <span>公开课&nbsp;&nbsp;</span>
                        <span>企业合作&nbsp;&nbsp;</span>
                        <span>就业喜报&nbsp;&nbsp;</span>
                        <span>学员天地&nbsp;&nbsp;</span>
                        <span>关于千锋&nbsp;&nbsp;</span>
                        <span>加入我们</span>
                        <hr />
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="right">
                        首页>课程培训>JavaEE列表
                    </td>
                </tr>
            </table>
        </div>
        <!--中间部分-->
        <div>
            <table>
                <tr>
                    <td>
                        <h3>课程培训</h3>
                        <h4>共108种课程内容</h4>
                    </td>
                </tr>
                <tr>
                    <td>
                        <hr/>
                        <img src="img/001.png" />
                    </td>
                </tr>
            </table>
            <table align="center" width="100%">
                <tr align="center">
                    <td>
                        <img src="img/002.png" /><br />
                        <div align="center">书名：XXX</div>
                        <div align="center">售价：180</div>
                    </td>
                    <td>
                        <img src="img/003.png" /><br />
                        <div align="center">书名：XXX</div>
                        <div align="center">售价：180</div>
                    </td>
                    <td>
                        <img src="img/004.png" /><br />
                        <div align="center">书名：XXX</div>
                        <div align="center">售价：180</div>
                    </td>
                    <td>
                        <img src="img/005.png" /><br />
                        <div align="center">书名：XXX</div>
                        <div align="center">售价：180</div>
                    </td>
                    <td>
                        <img src="img/006.png" /><br />
                        <div align="center">书名：XXX</div>
                        <div align="center">售价：180</div>
                    </td>
                </tr>
                <tr align="center">
                    <td>
                        <img src="img/007.png" /><br />
                        <div align="center">书名：XXX</div>
                        <div align="center">售价：180</div>
                    </td>
                    <td>
                        <img src="img/008.png" /><br />
                        <div align="center">书名：XXX</div>
                        <div align="center">售价：180</div>
                    </td>
                    <td>
                        <img src="img/009.png" /><br />
                        <div align="center">书名：XXX</div>
                        <div align="center">售价：180</div>
                    </td>
                    <td>
                        <img src="img/010.png" /><br />
                        <div align="center">书名：XXX</div>
                        <div align="center">售价：180</div>
                    </td>
                    <td>
                        <img src="img/011.png" /><br />
                        <div align="center">书名：XXX</div>
                        <div align="center">售价：180</div>
                    </td>
                </tr>
            </table>
        </div>
        <!--底部-->
        <div>
            <table width="90%" align="center">
                <tr>
                    <td><img src="img/012.png" /></td>
                </tr>
            </table>    
        </div>
        <address>
了解更多<a href="http://www.mobiletrain.org/" target="_blank">单击进入</a>.<br />
</address>
<p>
<a href="#">返回首页</a> </p>
    </body>
</html>
文章标签：
前端开发
容器
关键词：
HTML标签
HTML案例
HTML标签案例
willing_kak
目录
相关文章
米果粒
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
米果粒
436 5
蓝易云
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签，通过明确标识内容的结构和意义，使得网页结构更加清晰，易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性，还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中，合理使用这些语义化标签，能够显著提升网页的质量和用户体验。
蓝易云
687 49
龙大吉
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容，旨在提升开发效率、网站性能和用户体验。
龙大吉
476 5
德国都芳最好
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签，HTML5 还支持哪些多媒体格式？
【10月更文挑战第19天】HTML5对多种多媒体格式的支持，为网页开发者提供了丰富的选择，能够更好地满足不同类型多媒体内容在网页中的展示和交互需求，提升了网页的用户体验和多媒体应用的多样性。
德国都芳最好
596 1
椰椰椰耶
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
椰椰椰耶
408 2
椰椰椰耶
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
椰椰椰耶
278 1
六卿
|
前端开发
前端基础(二)_HTML常用标签（块级标签、行级标签、行块级标签）
本文详细介绍了HTML中的常用标签，包括块级标签（如`h1`至`h6`、`p`、`div`等）、行级标签（如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等），以及行块级标签（如`img`）。文章解释了这些标签的用途、特点和基本用法，并通过示例代码展示了如何在HTML文档中使用它们。
六卿
1589 1
蓝易云
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力，让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表，可以提升用户体验，同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面，反映了HTML5对开发者和内容创作者需求的响应。
蓝易云
1777 1
德国都芳最好
|
存储 移动开发 前端开发
如何处理HTML5新标签的浏览器兼容问题？
【10月更文挑战第19天】
德国都芳最好
455 0
神明木佑
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
神明木佑
609 0

热门文章

最新文章

  • 1
    Html2canvas - 项目中遇到的那些坑点汇总(更新中...)
  • 2
    <html:select>,<html:option>,<html:optionsCollection>标签使用
  • 3
    html Ajax读取数据
  • 4
    html_列表_图片
  • 5
    Vue 和 HTML FormData配合axios或ajax上传文件，提交表单数据
  • 6
    HTML 5介绍
  • 7
    Html.BeginForm()属性
  • 8
    HTML 5 & CSS 3 的新交互特性
  • 9
    教你用HTML+CSS实现百叶窗动画效果
  • 10
    Vue 结合html2canvas和jsPDF实现html页面转pdf
  • 1
    基于 Cloudflare Workers 构建高性能知识库镜像服务：反向代理与 HTML 动态重写实践
    1425
  • 2
    C#编程实践：解析HTML文档并执行元素匹配
    423
  • 3
    响应式企业网站源码JavaL/PHP带后台管理​：Bootstrap HTML5模板
    1392
  • 4
    精选HTML、JavaScript、ASP代码片段集锦
    411
  • 5
    HTML表单验证：确认input元素输入为具有特定整数和小数位数的数值。
    662
  • 6
    阻止HTML input元素（type='number'）中输入字母'e'的方法。
    435
  • 7
    仿真银行app下载安装， 银行卡虚拟余额制作app，用html+css+js实现逼真娱乐工具
    3298
  • 8
    Vue 项目中动态添加 HTML 元素的方法与实践
    608
  • 9
    Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
    339
  • 10
    Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
    383

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS

    • 相关电子书

    更多
  • 《零基础HTML入门教程》
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！