HTML的使用（上）

news2024/12/25 9:02:31

文章目录

  • 前言
  • 一、HTML是什么？
  • 二、使用内容
    • （1）换行标记<br>
    • （2）加粗标记<b> </b>
    • （3）段落标记<p> </p>
    • （4）标题标记<h1>~<h6>    </h1>~</h6>
    • （5）居中标记<center> </center>
    • （6）文字列表标记<ul> <li> </ul>        <ol> <li> </ol>
    • （7）表格标记<table> </table>
  • 总结

前言

        当我们从网络上获取信息时，在浏览器的地址栏中输入一个网址，就会展示出相应的页面内容。页面中有文字，图片，视频，音频，动画等。对于网页设计不得不提到HTML标记语言。

一、HTML是什么？

        HTML（HyperText Markup Language）是一种标记语言，用于创建和组织网页的结构和内容。HTML可以在不同的操作系统和设备上被解释和显示，从而构建出各种互联网页面。

        HTML文档组成结构：

        1.<html>标记：该标记是HTML文件的开头，</html>是HTML文件的结尾。两个标记没有实质性作用，但是对于HTML必不可缺。

        2.<head>标记：该标记是HTML的头标记，以</head>结尾。

        3.<title>标记：该标记可用于定义网页的标题，以</title>结尾，写于头标记里。

        4.<body>标记：该标记是HTML主页的主体标记。HTML页面的所有内容都在<body>标记中，并且<body>标记本身也具备控制页面的属性，如页面背景图片，颜色等。以</body>结尾。

        实操展示：

<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
    你好，世界。
    </body>
</html>

        运行展示： 

        主页题目为"Demo"，网址为HTML的绝对路径，主页内容也相对应，这就是一个HTML的基础框架。 

二、使用内容

        （1）换行标记<br>

        在页面中想让文字换行，在<body>标记中输入回车、空格、换行符，都是无效的。只有使用<br>换行符才可。

        实操展示：

<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
    你好，<br>
    世界。
    </body>
</html>

        运行结果：

 

        实现换行。

        （2）加粗标记<b> </b>

        加粗标记顾名思义，加粗文本字体。 

        实操展示：

<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
    <b>
    你好，</b><br>
    世界。
    </body>
</html>

        运行结果： 

        （3）段落标记<p> </p>

         段落标记在段前和段后各添加一个空行，在段落标记中的内容不受影响。

        实操展示：

<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
        顺顺利利
        <p>寻寻觅觅，冷冷清清，跌跌撞撞，走走停停。</p>
        世界。
    </body>
</html>

        运行结果：

        （4）标题标记<h1>~<h6>    </h1>~</h6> 

        在HTML标记中，设定了6个标题标记，分别为<h1>~<h6>，六个等级。数字越大，标题的字数越小。通常在<body>标记中使用。

        实操展示：

<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
        <h1>Java开发的三个方向</h1>
        <h2>Java SE</h2>
        <p>主要用于桌面程序的开发。它是学习Java EE和javaME的基础</p>
        <h2>Java EE</h2>
        <p>主要用于页面程序的开发。</p>
        <h2>Java ME</h2>
        <p>主要用于嵌入式系统程序的开发。</p>    
    </body>
</html>

        运行结果： 

        （5）居中标记<center> </center>

        通过<center>标记，可以将文字居中显示。 

        实操展示：

<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
        <center><h1>Java开发的三个方向</h1>
        <h2>Java SE</h2>
        <p>主要用于桌面程序的开发。它是学习Java EE和javaME的基础</p>
        <h2>Java EE</h2>
        <p>主要用于页面程序的开发。</p>
        <h2>Java ME</h2>
        <p>主要用于嵌入式系统程序的开发。</p>    
        </center>
    </body>
</html>

        运行结果：

        如图所示，<center> </center>内的文本都居中了。

        （6）文字列表标记<ul> <li> </ul>        <ol> <li> </ol>

        文字列表标记可以将文字以列表的形式依次排列，以此方便访问者浏览。HTML中文字列表标记分为无序列表和有序列表两种，区别在于有无给出这些列表项顺序。

        无序列表<ul> <li> </ul>

        每个列表项的前面都添加一个原点符号，每一个列表项以<li>表示。

        实操展示：

<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
        成绩单    
        <ul>
            <li>语文101    
            <li>数学72
            <li>英语106
        </ul>
    </body>
</html>

        运行结果：

              

        以上为无序列表

        有序列表<ol> <li> </ol>

        每个列表项的前面都添加一个原点符号，每一个列表项以<li>表示。

        实操展示：

<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
        成绩单    
        <ol>
            <li>语文101    
            <li>数学72
            <li>英语106
            </ol>
    </body>
</html>

        运行结果：         

        如图所示，给每个列表项都进行了排序。 

        （7）表格标记<table> </table>

        表格是网页的重要组成部分，用于储存数据。表格包含标题、表头、行、和单元格。

        <table>标记有很多属性，例如width属性设置表格宽度，border属性设置表格边框，align属性设置用来设置表格对齐方式，bgcolor属性表示表格背景颜色。

        <caption>标题标记

        标题标记，开头为<caption>,结尾为</caption>。标题标记也有一些属性，例如align、valign等。

        <th>表头标记

        表头标记以<th>开头，以</th>为结尾。也有属性，例如align、background、colspan、valign等。

        <tr>表格行标记

        表格行标记，以<tr>开头，以</th>为结尾。一组<tr>标记代表该表格中的一行。<tr>标记一定要嵌套于<table>标记中使用。该标记也具有align、background等属性。

        <td>单元格标记

        单元个标记，以<td>开头，以</td>为结尾。一组<tr>标记中可以嵌套若干个<td>标记。该标记也具有align、background、valign等属性。

        实操展示：

<html>
    <head>
        <title>网站</title>
    </head>
    <body>
        你好，世界
        <table width="600" height = "300" border="1" align="center">
            <caption>学生成绩单</caption>
        <tr>
            <td align="center" valign="middle">姓名</td>
            <td align="center" valign="middle">语文</td>
            <td align="center" valign="midlle">数学</td>
            <td align="center" valign="middle">英语</td>
        </tr>
        <tr>
            <td align="center" valign="middle">张三</td>
            <td align="center" valign="middle">112</td>
            <td align="center" valign="midlle">103</td>
            <td align="center" valign="middle">78</td>
        </tr>
        <tr>
            <td align="center" valign="middle">李四</td>
            <td align="center" valign="middle">110</td>
            <td align="center" valign="midlle">78</td>
            <td align="center" valign="middle">112</td>
        </tr>
        <tr>
            <td align="center" valign="middle">王五</td>
            <td align="center" valign="middle">102</td>
            <td align="center" valign="midlle">99</td>
            <td align="center" valign="middle">104</td>
        </tr>
        </table>
    </body>
</html>

        运行结果：

 总结

        以上就是HTML的部分内容要讲的，本文仅仅简单介绍了HTML的使用，而HTML提供了大量基础的能使我们快速便捷建立网页的方法，这只是学习Web迈进的一小步。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1673157.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Autosar架构

Autosar架构

蓝框那种叫component&#xff0c;绿框的叫function cluster。 接口 有三种接口&#xff0c;RTE跟SWC之间链接的叫Autosar Interface&#xff0c;RTE跟BSW的Components链接是Standardized Interface&#xff0c;RTE跟BSW的services链接的是Standardized Autosar Interface。 St…
阅读更多...
P6397 [COI2008] GLASNICI

P6397 [COI2008] GLASNICI

题目描述 一条直线上有 &#x1d45b; 个信使&#xff0c;将他们按照从左至右的顺序以 1 至 &#x1d45b; 编号。换句话说&#xff0c;设 &#x1d456; 号信使的的坐标为 &#x1d451;&#x1d456;​&#xff0c;则对于 1≤&#x1d456;<&#x1d45b;&#xff0c; &am…
阅读更多...
Vue 中动态与静态处理 Element UI/Element Plus 组件禁用状态样式

Vue 中动态与静态处理 Element UI/Element Plus 组件禁用状态样式

目录 一、静态样式修改 - 使用 ::v-deep 穿透组件样式二、选择器的优先级和匹配顺序三、动态添加样式 - 使用 Vue 实例属性&#xff08;非推荐&#xff09;四、区别总结五、应用场景总结 本文主要探讨在 Vue.js 项目中&#xff0c;特别是搭配 Element UI 或 Element Plus 组件库…
阅读更多...
多维 HighChart

多维 HighChart

showHighChart.html <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><!-- js脚本都是官方的,后两个是highchart脚本 --><script type"text/javascript" src"jquery1.7.1.min.js"&g…
阅读更多...
10.nginx模板(开启监控取值页面)

10.nginx模板(开启监控取值页面)

nginx模板(开启监控取值页面) 1.开启监控页面 vim nginx.conflocation /nginx_status {stub_status;} systemctl restart nginx.server网页展示 导入模板&#xff0c;nginx监控模板zbx_nginx_template.xml <?xml version"1.0" encoding"UTF-8"?…
阅读更多...
智慧畜牧：RFID技术在现代屠宰场的应用

智慧畜牧：RFID技术在现代屠宰场的应用

智慧畜牧&#xff1a;RFID技术在现代屠宰场的应用 RFID猪肉溯源管理解决方案是一种利用无线射频识别&#xff08;Radio Frequency Identification&#xff0c;简称RFID&#xff09;技术来实现猪肉从养殖、屠宰到销售整个供应链过程中的追踪与追溯的现代化管理手段。这一方案通…
阅读更多...
微服务部署不迷茫：4大部署模式深度解析，轻松驾驭云原生时代

微服务部署不迷茫：4大部署模式深度解析，轻松驾驭云原生时代

微服务部署最全详解(4种常见部署模式) 微服务多实例部署 每个微服务都独立部署在自己的运行环境中&#xff0c;这是微服务架构的核心思想。 一般会采用每个主机多个服务实例&#xff0c;如下所示&#xff1a; 这是一种传统的应用部署方法&#xff0c;每个服务实例在一个或多个…
阅读更多...
万事通，专精部分领域的多功能 Transformer 智能体

万事通，专精部分领域的多功能 Transformer 智能体

介绍 我们很高兴分享“万事通”(Jack of All Trades&#xff0c;简称 JAT) 项目&#xff0c;该项目旨在朝着通用智能体的方向发展。该项目最初是作为对 Gato (Reed 等&#xff0c;2022 年) 工作的公开复现启动的&#xff0c;Gato 提出训练一种能够执行视觉与语言以及决策任务的…
阅读更多...
程序员学CFA——经济学

程序员学CFA——经济学

经济学 需求和供给分析消费者需求分析需求的相关概念需求需求定律需求函数需求曲线消费者剩余 需求弹性需求的自身价格弹性需求的交叉价格弹性需求的收入弹性 替代效应与收入效应替代效应收入效应替代效应和收入效应的综合作用 需求定律的例外 生产商供给分析供给分析的基本概念…
阅读更多...
UniGen：用于生成自动驾驶场景的初始智体状态和轨迹的统一建模

UniGen：用于生成自动驾驶场景的初始智体状态和轨迹的统一建模

24年5月谷歌WayMo论文“UniGen: Unified Modeling of Initial Agent States and Trajectories for Generating Autonomous Driving Scenarios”。 本文介绍 UniGen&#xff0c;一种生成交通场景的新方法&#xff0c;用于通过仿真评估和改进自动驾驶软件。 其方法在一个统一的模…
阅读更多...
RabbitMq出现Not management user问题解决

RabbitMq出现Not management user问题解决

在RabbitMq登录的时候突然弹出如下图&#xff1a; 提示“当前用户不是管理员用户”进入mq控制命令台下&#xff1a; windows版本在mq安装路径下的sbin下进入cmd弹出框&#xff1b; Linux版本没有测试&#xff1b; 输入以下命令&#xff1a; rabbitmqctl list_users 查询当…
阅读更多...
python：__new__和__init__

python：__new__和__init__

python&#xff1a;__new__和__init__ 1 前言 在Python中&#xff0c;每个对象都有两个特殊的方法&#xff1a;__new__和__init__。这两个方法在对象的创建和初始化过程中起着重要的作用&#xff0c;但它们的功能和用法有所不同。 1.1 功能上的区别 __new__方法是Python中的…
阅读更多...
【管理咨询宝藏101】普华永道并购尽调内部培训

【管理咨询宝藏101】普华永道并购尽调内部培训

【管理咨询宝藏101】普华永道并购尽调内部培训 【格式】PDF版本 【关键词】普华永道、兼并收购、尽职调查 【核心观点】 - 尽职调查的目的&#xff0c;发现潜在的致命缺陷&#xff0c;判断是否继续交易进程&#xff1b;发现潜在的问题&#xff0c;制定交易前后相应的应对措施。…
阅读更多...
换个暴露又发一区（IF=10.1）！双样本孟德尔随机化+脂质组学发了高分

换个暴露又发一区（IF=10.1）！双样本孟德尔随机化+脂质组学发了高分

孟德尔随机化的热度一直很高&#xff0c;不少想发文的对此肯定又爱又恨。今天我们看的这篇文章就仅用了双样本孟德尔随机化的方法&#xff0c;看似显而易见的关系&#xff0c;竟然结合了脂质组学&#xff0c;立马升华&#xff0c;发表一区&#xff08;IF10.1&#xff09;&#…
阅读更多...
ARIMA预测模型介绍

ARIMA预测模型介绍

ARIMA&#xff08;Autoregressive Integrated Moving Average&#xff09;模型是一种常用的时间序列分析方法&#xff0c;能够对非平稳时间序列进行建模和预测。本文将详细介绍ARIMA模型的建模步骤&#xff0c;包括数据预处理、模型识别、参数估计和模型检验等环节&#xff0c;…
阅读更多...
`unordered_map` 和 `unordered_set`

`unordered_map` 和 `unordered_set`

unordered —— 无序的&#xff0c;从表面上来看&#xff0c;与 map 和 set 不同之处就在于&#xff0c;unordered_map 和 unordered_set 无法保证插入数据是有序的&#xff1b; 尽管如此&#xff0c;由于这两种容器内部封装了“哈希桶”&#xff0c;可以实现快速查找数据 ——…
阅读更多...
白话机器学习5：卷积神经网络(CNN)原理

白话机器学习5：卷积神经网络(CNN)原理

1.神经元 激活函数f(z)的种类&#xff1a; 2.卷积方法种类 https://mp.weixin.qq.com/s/FXzTbMG64jr93Re31Db2EA 标准卷积&#xff08;Standard Convolution&#xff09;: 特点&#xff1a;每个卷积核在输入数据的整个深度上滑动&#xff0c;计算输出特征图的一个元素。应用场…
阅读更多...
STM32有什么高速接口吗？

STM32有什么高速接口吗？

STM32 有一些高速接口&#xff0c;比如 USART、SPI、I2C 等&#xff0c;这些接口可以用于与外部设备进行高速数据传输。我这里有一套stm32入门教程&#xff0c;不仅包含了详细的视频讲解&#xff0c;项目实战。如果你渴望学习stm32&#xff0c;不妨点个关注&#xff0c;给个评论…
阅读更多...
JavaSE——集合框架一（2/7）-Collection集合的遍历方式-迭代器、增强for循环、Lambda、案例

JavaSE——集合框架一（2/7）-Collection集合的遍历方式-迭代器、增强for循环、Lambda、案例

目录 Collection的遍历方式 迭代器 增强for循环&#xff08;foreach&#xff09; Lambda表达式遍历集合 案例 需求与分析 代码部分 运行结果 Collection的遍历方式 迭代器 选代器是用来遍历集合的专用方式&#xff08;数组没有选代器&#xff09;&#xff0c;在Java中…
阅读更多...
【爬虫之scrapy框架——尚硅谷(学习笔记one)--基本步骤和原理+爬取当当网（基本步骤）】

【爬虫之scrapy框架——尚硅谷(学习笔记one)--基本步骤和原理+爬取当当网（基本步骤）】

爬虫之scrapy框架——基本原理和步骤爬取当当网&#xff08;基本步骤&#xff09; 下载scrapy框架创建项目&#xff08;项目文件夹不能使用数字开头&#xff0c;不能包含汉字&#xff09;创建爬虫文件&#xff08;1&#xff09;第一步&#xff1a;先进入到spiders文件中&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023