复习html的第一章

news2024/11/25 20:31:23

HTML（英语：Hyper Text Markup Language，简称：HTML ）也叫作超文本标记语言，是一种使用结构化 Web 网页及其内容的标记语言，您可以使用 HTML 来建立自己的 WEB 站点。

通过学习本教程，您可以使用 HTML 来创建站点。

HTML 是非常容易学习的！相信您可以很快学会它！ 

1.现在您可以通过如下的一个 HTML 实例来建立一个简单的 HTML 页面，以此来简单了解一下 HTML 的结构。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p>我的第一个段落。</p>
    </body>
</html>
  • DOCTYPE声明了文档的类型
  • <html>标签是 HTML 页面的根元素，该标签的结束标志为</html>
  • <head>标签包含了文档的元数据（meta），如<meta charset="utf-8">定义网页编码格式为utf-8。
  • <title>标签定义文档的标题
  • <body>标签定义文档的主体，即网页可见的页面内容，该标签的结束标志为</body>
  • <h1>标签作为一个标题使用，该标签的结束标志为</h1>，--　HTML标题
  • <p>标签作为一个段落显示，该标签的结束标志为</p>-- p标签用法

2.html标题

HTML 标题（Heading）是通过 <h1> - <h6> 标签来定义的.

h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT 等。

这里有六个标题元素标签 —— <h1>、<h2> 、<h3>、<h4>、<h5>、<h6>，每个元素代表文档中不同级别的内容：

 <h1> 表示主标题（ the main heading ），<h2> 表示二级子标题（ subheadings ），<h3>表示三级子标题（ sub-subheadings ），<h4>、<h5>、<h6>字体的大小依次递减。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

    <h1>这是标题1</h1>
    <h2>这是标题2</h2>
    <h3>这是标题3</h3>
    <h4>这是标题4</h4>
    <h5>这是标题5</h5>
    <h6>这是标题6</h6>

</body>
</html>

 3.html段落

HTML 段落是通过标签<p>来定义的，P是英文paragraph段落的缩写，经常被用来创建一个段落。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

    <p>路漫漫其修远兮</p> 
    <p>吾将上下而求索</p>

</body>
</html>

下面这个实例讲述了标题和段落的结构层次

首先，您应该只对每个页面使用一次<h1>，这是主标题，所有其他标题位于层次结构中的下方。

其次，请确保在层次结构中以正确的顺序使用标题。不要使用<h3>来表示副标题，后面跟<h2>来表示副副标题，这是没有意义的，会导致奇怪的结果。

最后，在可用的六个标题级别中，您应该保证每个页面中标题级别的使用不超过三个，除非您认为有必要使用更多。具有许多标题级别的文档会变得难以操作并且难以导航。在这种情况下，如果可能，建议将内容分散在多个页面上。 

 

4.html链接

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

    <a href="https://m.baidu.com/">这是一个链接</a>

</body>
</html>

HTML 链接是通过标签<a>来定义的。a标签，也叫anchor（锚点）元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。

5.html 图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

    <img src="5402.png"  width="206"  height="36" >

</body>
</html>

HTML 图像是通过标签<img>来定义的。使用img元素来为你的网站添加图片，使用src 属性指向一个图片的具体地址。

举例如下：<img src="https://www.your-image-source.com/your-image.jpg">

请注意：img元素是自关闭元素，不需要结束标记。

6.斜体和粗体

斜体:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
 
    <p>我 <em>很高兴</em>你不 <em>讨厌我</em>.</p>
 
</body>
</html>

粗体: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
 
    <p>这种液体是<strong>高毒性的</strong>.</p>

    <p>我就指望你<strong>不会</strong> 迟到!</p>

</body>
</html>

7.HTML 列表

HTML 支持有序、无序和定义列表:

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表适合成员之间无级别顺序关系的情况。

无序列表使用 <ul> 标签：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
</head>
<body>
    <ul>
        <li>Coffee</li>
        <li>Milk</li>
    </ul>
</body>
</html>

 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

有序列表适合各项目之间存在顺序关系的情况。

列表项项使用数字来标记。您可以通过本站的编程测试来练习创建有序列表。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
</head>
<body>
    <ol>
        <li>咖啡</li>
        <li>牛奶</li>
    </ol>
</body>
</html>

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。  

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

自定义列表中的一个术语名可以对应多重定义或者多个术语名对应同一个定义，如果只有术语名或者只有定义也是可行的，也就是说 <dt> 与 <dd> 在其中数量不限、对应关系不限。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
</head>
<body>
    <dl>
        <dt>咖啡</dt>
        <dd>- black hot drink</dd>
        <dt>牛奶</dt>
        <dd>- white cold drink</dd>
    </dl>
</body>
</html>

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

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

相关文章

Vue_00001

Vue_00001

contents 介绍初始Vue入门程序 介绍 官网地址&#xff1a;https://cn.vuejs.org/ 在官网地址可以下载vue.js文件&#xff0c;可以查看Vue文档。 初始Vue <!DOCTYPE html><html><head><meta charset"utf-8"/><title>初始Vue</tit…
阅读更多...
【客户案例】云联壹云帮助华北电力大学搭建 AI 训练平台

【客户案例】云联壹云帮助华北电力大学搭建 AI 训练平台

客户介绍 华北电力大学是教育部直属全国重点大学&#xff0c;是国家“211 工程”和“985 工程优势学科创新平台”重点建设大学。2017 年&#xff0c;学校进入国家“双一流”建设高校行列&#xff0c;重点建设能源电力科学与工程学科群&#xff0c;全面开启了建设世界一流学科和…
阅读更多...
WWDC 23 之后的 SwiftUI 有哪些新功能

WWDC 23 之后的 SwiftUI 有哪些新功能

文章目录 前言数据流动画ScrollView搜索新手势新增的小功能总结 前言 WWDC 23 已经到来&#xff0c;SwiftUI 框架中有很多改变和新增的功能。在本文中将主要介绍 SwiftUI 中数据流、动画、ScrollView、搜索、新手势等功能的新变化。 数据流 Swift 5.9 引入了宏功能&#xff…
阅读更多...
【数字基座·智慧物联】AIRIOT新品发布会在京举办

【数字基座·智慧物联】AIRIOT新品发布会在京举办

2023年6月6日&#xff0c;由航天科技控股集团股份有限公司主办的“数字基座智慧物联”AIRIOT新品发布会在北京成功举办&#xff0c;重磅发布了AIRIOT 4.0物联网平台的五大核心能力引擎&#xff0c;并邀请行业嘉宾分享了智能制造、智慧环保、油气油田、车联网等垂直行业的应用案…
阅读更多...
信创办公–基于WPS的EXCEL最佳实践系列 （创建表格）

信创办公–基于WPS的EXCEL最佳实践系列 （创建表格）

信创办公–基于WPS的EXCEL最佳实践系列 &#xff08;创建表格&#xff09; 目录 应用背景操作步骤1、新建空白工作簿并命名为“奖牌榜”2、使用模板新建工作簿3、新增一张工作表&#xff0c;并将工作簿的标签更改为红色4、复制与隐藏工作表5、添加工作簿属性值6、更改工作簿主题…
阅读更多...
STM32单片机（三）第四节：GPIO输入练习（按键控制LED、光敏传感器控制蜂鸣器）

STM32单片机（三）第四节：GPIO输入练习（按键控制LED、光敏传感器控制蜂鸣器）

❤️ 专栏简介&#xff1a;本专栏记录了从零学习单片机的过程&#xff0c;其中包括51单片机和STM32单片机两部分&#xff1b;建议先学习51单片机&#xff0c;其是STM32等高级单片机的基础&#xff1b;这样再学习STM32时才能融会贯通。 ☀️ 专栏适用人群 &#xff1a;适用于想要…
阅读更多...
基于SSM的校园二手C2C购物商城

基于SSM的校园二手C2C购物商城

基于SSM的校园二手交易平台 零、源码获取&#xff1a; 链接点击直达&#xff1a;下载链接 一、设计概要 本次设计的是一个校园二手交易平台&#xff08;C2C&#xff09;&#xff0c;C2C指个人与个人之间的电子商务&#xff0c;买家可以查看所有卖家发布的商品&#xff0c;并…
阅读更多...
开源 API 网关-访问策略（二）

开源 API 网关-访问策略（二）

在上篇文章API网关&#xff1a;开源 API 网关-访问策略(一)中&#xff0c;我们简单演示了如何在IP维度中对请求路径设置黑白名单&#xff0c;以此来限制客户端请求的权限和范围。 此外&#xff0c;Apinto网关为客户端提供了一种统一的、基于访问密钥的认证机制&#xff0c;让客…
阅读更多...
java的逻辑运算符与短路逻辑运算符

java的逻辑运算符与短路逻辑运算符

一、逻辑运算符 示例&#xff1a; 二、短路逻辑运算符 &&与&的区别是&#xff0c;再短路逻辑运算符&&所连接的表达式中&#xff0c;如果左边为假&#xff0c;则右边不进行运算&#xff0c;直接得出结果。在逻辑运算符&所连接的表达式中&#xff0c;…
阅读更多...
Revit中如何将构件载入自己创建的楼中

Revit中如何将构件载入自己创建的楼中

当我们做一个楼群时&#xff0c;一般会有一个模板楼给我们参考&#xff0c;而楼群为了统一风格&#xff0c;装饰都是一样的&#xff0c;那么我们为了节省时间&#xff0c;该如何将模板楼上的构件载入到我们自己创建的楼中呢?下面请看步骤。 1、 打开模板楼“1号楼” 2、 双击样…
阅读更多...
2023年前端面试题总结

2023年前端面试题总结

某多多 1.Promise实现原理 2.vue组件间通信 3.性能优化 4.vuex数据流动过程 5.谈谈css预处理器机制 6.算法: Promise串行 某眼电影 1.vue组件间通信 2.react和vue更新机制的区别 3.Vue3 proxy的优劣 4.性能优化 5.symbol应用 6.深拷贝 问题 Promise实现原理 解决异步编程回…
阅读更多...
RHEL7同步ntp时间

RHEL7同步ntp时间

RHEL7同步ntp时间 RHEL7同步ntp时间测试ntp服务器是否可用抓包分析ntp 查看NTP同步情况ntp服务器配置文件将ntp配置迁移到chronytimedatectl设置时区和时间设置UTC或RTC时间查看所有可用时区查看当前时区设置系统时区启用夏令时timedatectl时间同步timedatectl修改当前日期时间…
阅读更多...
（2022，错误严重性）用语义知识处理神经网络中的错误严重性

（2022，错误严重性）用语义知识处理神经网络中的错误严重性

Addressing Mistake Severity in Neural Networks with Semantic Knowledge 公众号&#xff1a;EDPJ 目录 0. 摘要 1. 简介 2. 相关工作 3. 方法 4. 实验 5. 结果 5.1 对抗扰动 5.2 自然损坏&#xff08;Natural Corruptions&#xff09; 6. 讨论与结论 7. 未来工…
阅读更多...
[NIPS 1989] Optimal brain damage (OBD)

[NIPS 1989] Optimal brain damage (OBD)

Contents IntroductionMethodOptimal Brain DamageComputing the second derivativesThe Recipe References Introduction 作者设计了一种模型剪枝策略&#xff0c;能够在尽量不影响模型精度的情况下丢弃模型中不重要的权重 Method Optimal Brain Damage 衡量权重重要性最直…
阅读更多...
0100-35227美国应用材料AMAT

0100-35227美国应用材料AMAT

​ 0100-35227美国应用材料AMAT 0100-35227美国应用材料AMAT 自动化系统所使用的各种类型plc中&#xff0c;有的是集中安装在控制室&#xff0c;有的是安装在生产现场和各电机设备上&#xff0c;它们大多处在强电电路和强电设备所形成的恶劣电磁环境中。要提高PLC控制系统可靠…
阅读更多...
【Mysql】基础命令操作

【Mysql】基础命令操作

本文首发于 慕雪的寒舍 mysql的基础命令 本文所用mariadb版本 mysql Ver 15.1 Distrib 10.3.28-MariaDB, for Linux (x86_64) using readline 5.1sql语句的分类 DDL【data definition language】 数据定义语言&#xff0c;用来维护存储数据的结构。代表指令: create, drop,…
阅读更多...
【QQ聊天界面-计算Frame Objective-C语言】

【QQ聊天界面-计算Frame Objective-C语言】

一、计算frame 1.我还是先把之前的代码保存一份， 我们刚才在第一份代码里面，其实无非就是 1）创建了个模型， 2）懒加载 3）把界面拖了一下 4）创建了一个自定义Cell 是不是就做了这四件事儿 2.那么，接下来，我们是不是要计算坐标了， 好，找到我们这个frame，在这个…
阅读更多...
黑客松必备｜如何快速注册参与Bear Necessities Hackathon

黑客松必备｜如何快速注册参与Bear Necessities Hackathon

由Moonbeam和AWS Startups联合主办的Bear Necessities Hackathon黑客松提供了一个有趣且竞争、同时还有奖励的环境以供构建者们探索Moonbeam的互操作功能和创建跨链应用。本次黑客松由Moonbeam基金会、Chainlink、StellaSwap、SubQuery、Biconomy提供赞助&#xff0c;包含6个挑…
阅读更多...
chatgpt赋能python：Python中Input函数的使用方法

chatgpt赋能python：Python中Input函数的使用方法

Python中Input函数的使用方法 Python中的input()函数是一个内置函数&#xff0c;它可以用来从用户那里获取输入。它可以在编写Python程序时&#xff0c;和常量和变量一起使用。在本文中&#xff0c;我们将介绍Python中input()函数的使用方法。 什么是Input函数&#xff1f; …
阅读更多...
Netty的高性能之道

Netty的高性能之道

1.背景 最近看到gitHub上有一个开源项目&#xff0c;通过使用 Netty4 Thrift 压缩二进制编解码技术&#xff0c;他们实现了 10W TPS&#xff08;1K 的复杂 POJO 对象&#xff09;的跨节点远程服务调用。相比于传统基于 Java 序列化 BIO&#xff08;同步阻塞 IO&#xff09;的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023