HTML 笔记：初识 HTML（HTML文本标签、文本列表、嵌入图片、背景色、网页链接）

1 何为HTML

  • 用来描述网页的一种语言
  • 超文本标记语言(Hyper Text Markup Language)
  • 不是一种编程语言，而是一种标记语言 (markup language)

2 HTML标签

  • HTML 标签是由尖括号包围的关键词，比如 <html>
    • 作用是为了“标记”页面中的内容，使浏览器能够识别设计者的要求，正确的在网页中显示出来
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
    • 开始和结束标签也被称为开放标签和闭合标签

3 HTML文档结构

3.1 文档类型

  • 在HTML中，文档类型（DOCTYPE）是一种指令，它告诉浏览器文档的类型和版本，从而使浏览器能够正确地渲染文档。
  • DOCTYPE处于HTML文档的首行，位于<html>标签之前。
<!DOCTYPE html>

当前最常用的文档类型声明，用于HTML5文档

3.2 开始标签

  • 在HTML文档中，<html> 标签是一个根元素，包围着整个文档的其它所有HTML元素。所有的HTML元素必须被这个标签包裹起来，这也意味着<html>标签是HTML文档的最外层元素
<!DOCTYPE html>
<html><head><!-- head部分的内容 --></head><body><!-- body部分的内容 --></body>
</html>

3.2.1 lang属性

<html>标签也可以包含lang属性，来定义文档的语言。

<html lang="en"><!-- 页面内容 -->
</html>
  • 在这个例子中，lang="en" 属性告诉浏览器这个文档是用英语编写的。
  • 不同的语言代码会表示不同的语言（例如，“es”为西班牙语，“zh”为中文等）。

3.3 头标签 & 头标签对象

  • 在HTML文档中，<head>标签用于包含文档的元数据（metadata）以及链接到脚本和样式表的引用。
  • <head>标签通常包括如下一些子元素：

3.3.1 <title>

<title>标签定义了文档的标题，这个标题会显示在浏览器的标题栏或标签上

<title>这是页面标题</title>

3.3.2 <meta>

<meta>标签用于提供关于文档的元数据，如字符集、页面描述、关键词和作者信息等。

<meta charset="UTF-8">
<meta name="description" content="这是一个示例网页">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Author Name">

3.3.3 <link>

<link>标签用于链接外部资源，通常是链接样式表（CSS文件）

<link rel="stylesheet" type="text/css" href="styles.css">

3.3.4 <script>

<script>标签用于嵌入或引用执行脚本代码，通常是JavaScript。

<script src="script.js"></script>

3.3.5 <style>

<style>标签用于包含文档的内部样式信息（CSS）。

<style>body {background-color: lightblue;}
</style>

3.3.6 <base>

<base>标签用于为页面上所有的相对URL设置一个基础URL。这个标签必须有href或target属性。

<base href="https://www.example.com/" target="_blank">

3.3.7 <noscript>

<noscript>标签用于定义在浏览器不支持脚本时显示的替代内容。

<noscript>您的浏览器不支持JavaScript！</noscript>

4  正文中的HTML标签

4.1 段落 <P>…</P>

左对齐： left；右对齐：right； 中间对齐：center

<!DOCTYPE html>
<html lang="en">
<head><title>这是页面标题</title><style>body {background-color: lightblue;}</style><noscript>您的浏览器不支持JavaScript！</noscript>
</head>
<body><p>这是一个段落</p><p align=right>右对齐的段落</p> <p align=left>右对齐的段落</p> <p align=center>右对齐的段落</p> 
</body>
</html>

（本节下面的内容将隐去head部分的内容） 

4.2 折行 <br/>

<p> This is<br /> a para<br />graph with line breaks </p>

4.3 HTML标题

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

4.4 文字风格

<p><font size=“2” color=“purple”> 这是一个段落。</font></p>

4.4.1 HTML中的颜色

4.4.2 其他文字标签

<b>粗体字
</br><i>斜体字</i>
</br><strong> 粗体字，同b<strong>
</br><em>斜体，表强调</em>
</br><del>文字加横线</del>
</br><sub>下标字(subscript)</sub>
</br><sup>上标字(superscript)</sup>
</br><big> 大字</big>
</br><small> 小字</small>
</br><u>下划线 </u>

4.4.5 特殊字符

< &lt
</br> > &gt
</br> &copy

5 文本列表

5.1  无序列表

无序列表以<ul>标签开始，至</ul>标签结束。

在<ul>标签中，还需要使用<li>标签来定义列表的每一行

<ul><li>……</li><li>……</li><li>……</li>
</ul>

5.2 有序列表

有序列表中的条目按照顺序依次排列。

它和无序列表的唯一的区别体现代码上，即有序列表使用<ol>标签，以<ol>开始，到</ol>结束。

有序列表中同样使用<li>标签来定义列表的每一行

<ol><li>……</li><li>……</li><li>……</li>
</ol>

5.3 自定义列表

使用<dl>来创建自定义列表。在列表中使用<dt>来定义页面中的每一行。

与有序列表和无序列表不同的是，在定义列表中，列表中会添加缩进行来展示这个列表的条目，使用<dd>标签来定义缩进行。
 

<h3>镜头画面的剪辑</h3>
<dl><dt>分剪</dt><dd>一个镜头分成两个镜头或者两个以上的镜头使用。</dd><dt>挖剪</dt><dd>将一个完整镜头中的动作、人和物运动镜头在运动中的某一部位上的多余的部分挖剪去。</dd>
</dl>

5.4 列表嵌套

无论是无序列表嵌套，还是有序列表嵌套，或者是无序列表和有序列表的混合嵌套列表，它们的代码写法都是一个原则，就是遵从HTML代码的使用规则，将一个列表的标签完全放入在另一个标签内。这是一种父子级的关系。这种方法常用来表示复杂的导航，应用广泛。

<ul> <li> <ol><li>1.1<li>1.2</ol><li>2
</ul>

6 嵌入图片

<p align="center"><img src="jiuzhai.jpg" height=200 width=300/>

6.1 图像文本对齐

  • 在编辑图像的时候，图像不同于文本的意义在于，图像都是一个个分开的整体。而编辑图像时，如果设计者想在图片的旁边放入文本内容，就需要考虑如何处理文本和图像对齐方式
style="vertical-align:text-top"使图像的顶部和同一行的文本对齐
style="vertical-align:middle"使图像的中部和同一行的文本对齐
style="vertical-align:text-bottom"使图像的底部和同一行文本对齐
<p align="center"><img src="jiuzhai.jpg" height=200 width=300/ style="vertical-align:text-top">这是一张拍摄于2020年的九寨沟照片。<p align="center"><img src="jiuzhai.jpg" height=200 width=300/ style="vertical-align:middle">这是一张拍摄于2020年的九寨沟照片。<p align="center"><img src="jiuzhai.jpg" height=200 width=300/ style="vertical-align:text-bottom">这是一张拍摄于2020年的九寨沟照片。

 6.2 图像和文本的距离

  • hspace——和左边的距离
  • vspace——和上面的距离
<p align="center"><img src="jiuzhai.jpg" height=200 width=300/ hspace=30>这是一张拍摄于2020年的九寨沟照片。<p align="center"><img src="jiuzhai.jpg" height=200 width=300/ vspace=30>这是一张拍摄于2020年的九寨沟照片。

6.3 添加边框 

border表示边框宽度

<p align="center"><img src="jiuzhai.jpg" height=200 width=300/ border=5>这是一张拍摄于2020年的九寨沟照片。

6.4 嵌入网图

<!DOCTYPE html>
<html lang="en">
<head><title>这是页面标题</title>
</head>
<body> <img src='https://www.sanguosha.cn/storage/uploads/images/8jzgfkyzAOH7lY7QHHtfH3vIkzQ6cVmNuVCmNeEd.jpeg'
width=1000></body>
</html>

7 body 改变背景色

7.0 优先级

<!DOCTYPE html>
<html lang="en">
<head><title>这是页面标题</title><style>body {background-color: lightblue;}</style><noscript>您的浏览器不支持JavaScript！</noscript>
</head>
<body bgcolor="red"> <p align="center"><img src="jiuzhai.jpg" height=200 width=300/ border=5>这是一张拍摄于2020年的九寨沟照片。</body>
</html>

<body>标签的背景色(bgcolor)被设置为红色（red），而在<style>标签中，body的背景色被设置为浅蓝色（lightblue）。通常来说，CSS样式（无论是内联样式、内部样式还是外部样式）会覆盖HTML标签的属性。

所以，如果浏览器按照现代标准解析这段HTML代码，背景色应该是浅蓝色，即lightblue。这是因为CSS样式通常比HTML属性有更高的优先级。

这一小节后续部分中，我们会去掉head中style的部分

7.1 纯色 

背景颜色属性将背景设置为某种颜色。

属性值可以是十六进制数、RGB 值或颜色名。

  •   <body bgcolor="#000000">  
  • <body bgcolor="rgb(0,0,0)">  
  • <body bgcolor="black">
<!DOCTYPE html>
<html lang="en">
<head><title>这是页面标题</title>
</head>
<body bgcolor="lightgreen"> <p align="center"><img src="jiuzhai.jpg" height=200 width=300/ border=5>这是一张拍摄于2020年的九寨沟照片。</body>
</html>

7.2 图像

背景属性将背景设置为图像。属性值为图像的URL。

如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

7.2.1 本地图像

<!DOCTYPE html>
<html lang="en">
<head><title>这是页面标题</title>
</head>
<body background="jiuzhai.jpg"> 这是一张拍摄于2020年的九寨沟照片。</body>
</html>

7.2.2 网络图像

<!DOCTYPE html>
<html lang="en">
<head><title>这是页面标题</title>
</head>
<body background="https://www.sanguosha.cn/storage/uploads/images/jFRfaD6OGALMzUHw4bxO0kN4HN3vNpeaFU2YaTTy.jpeg"> <font color='white'>三国杀 貂蝉-舞惑群心</body>
</html>

7.2.3 调整图像大小

背景图太大了，我们进行调整，此时需要在head中进行调整

<!DOCTYPE html>
<html lang="en">
<head><title>这是页面标题</title><style>body {background-image: url('https://www.sanguosha.cn/storage/uploads/images/jFRfaD6OGALMzUHw4bxO0kN4HN3vNpeaFU2YaTTy.jpeg');background-size: cover; /*控制背景图像的尺寸,cover 保证背景图像覆盖整个元素*/background-position: center;/*center 使背景图像在元素中居中*/background-repeat: no-repeat;/*no-repeat 指定背景图像不要平铺重复*/height: 100vh;  /* 设置body高度为视口的100% */margin: 0;      /* 移除边距 */}</style>
</head>
<body> <font size=30 color='white'>三国杀 貂蝉-舞惑群心</body>
</html>

8 网页链接

8.1 链接到外网

HTML中的链接语法： <a href=“链接对象的路径”>链接锚点对象 </a>

这个路径所指的不仅仅只是一个页面地址，也可能是一个文件地址、一个邮箱地址

<!DOCTYPE html>
<html lang="en">
<head><title>这是页面标题</title>
</head>
<body> <a href='https://www.sanguosha.cn/storage/uploads/images/GX9UMBsFtZChnFngjPNNsVQuJuA3TRjxfzR3k8VE.jpeg'>
三国杀-关银屏-步步生花
</a></body>
</html>

点进去后：

8.2 链接到本网页的其他位置

  • 页面除了和页面之外的文件或者程序链接外，而且也可以和同一页面中的内容进行链接
    • （1）要确定链接的锚点对象，不同于页面和外部文件链接的方式在于，链接的路径由于在同一页面内，这里需要使用“#”来引用同一页面中的内容。代码写为： <a href=#...> </a>
    • （2）需要在页面中设定出链接到的目标。使用的就是“id”属性。 <a id=…></a>
  • 点击href处的内容，跳转到id处的内容
<!DOCTYPE html>
<html lang="en">
<head><title>这是页面标题</title>
</head>
<body> <html>……<a href=#link>链接到网页的其他位置</a><img src='https://www.sanguosha.cn/storage/uploads/images/4Ku8dzet4pub91dMLvuRbfc50TI1qdmlnjAPgMtg.jpeg' width=1400><a id=link></a>从上面链接过来…</html></body>
</html>

点击红色区域，就会跳转到绿色区域

’

8.3 跳转到新网页

在先前的所有链接中，页面都是在同一页面中跳转，有时候设计者希望链接的页面在新的窗口中打开，这时只要在<a>标签中添加“target=_blank”就行了。

<!DOCTYPE html>
<html lang="en">
<head><title>这是页面标题</title>
</head>
<body> <html><a href='https://www.sanguosha.cn/storage/uploads/images/3SPA2wJ5R3IL8nbaZncvtdzFL52XNRndGSIG8YP7.jpeg' target=_blank>诸葛瞻-绵竹之殇</a></html></body>
</html>

‘

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

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

相关文章

抖音手机实景无人直播间怎么搭建?

抖音手机实景无人直播间怎么搭建?

手机无人直播已成为用户直播和商家直播带货的一项热门技术趋势&#xff0c;为消费者提供了全新的观看体验。无人直播&#xff0c;顾名思义&#xff0c;即通过无人直播软件或数字人来进行无人直播。这一技术的广泛应用&#xff0c;不仅为短视频渠道带来了更丰富的玩法&#xff0…
阅读更多...
【排序算法】选择排序

【排序算法】选择排序

文章目录 一&#xff1a;基本介绍1.1 概念1.2 算法思想1.3 思路分析图1.4 思路分析1.5 总结1.5.1 选择排序一共有数组大小-1轮排序1.5.2 每一轮排序&#xff0c;又是一个循环&#xff0c;循环的规则如下&#xff08;在代码中实现&#xff09;&#xff1a; 二&#xff1a;代码实…
阅读更多...
【ComfyUI】MacBook Pro 安装(Intel 集成显卡)

【ComfyUI】MacBook Pro 安装(Intel 集成显卡)

文章目录 环境概述配置pip镜像配置pip代理git配置&#xff08;选配&#xff09;下载comfyUI代码创建、激活虚拟环境下载依赖安装torchvision启动comfyUI为什么Mac不支持CUDA&#xff0c;即英伟达的显卡&#xff1f;安装Intel工具包 环境 显卡&#xff1a;Intel Iris Plus Grap…
阅读更多...
017-第三代软件开发环境搭建

017-第三代软件开发环境搭建

第三代软件开发环境搭建 文章目录 第三代软件开发环境搭建项目介绍实体机安装Ubuntu系统安装Qt安装GCC & G安装 OPen GL安装Git配置用户名和邮箱生成 SSH 安装VS Code安装Chrome安装搜狗输入法安装字体查看字体拷贝字体到目标机拷贝字体到目标机字体目录安装字体重启设备 安…
阅读更多...
【CVPR 2023】 All are Worth Words: A ViT Backbone for Diffusion Models

【CVPR 2023】 All are Worth Words: A ViT Backbone for Diffusion Models

All are Worth Words: A ViT Backbone for Diffusion Models, CVPR 2023 论文&#xff1a;https://arxiv.org/abs/2209.12152 代码&#xff1a;https://github.com/baofff/U-ViT 解读&#xff1a;U-ViT: A ViT Backbone for Diffusion Models - 知乎 (zhihu.com) All are W…
阅读更多...
进阶JAVA篇-Object类与Objects类、包装类的常用API（一）

进阶JAVA篇-Object类与Objects类、包装类的常用API（一）

目录 API 1.0 API概念 2.0 Object类的常用API 2.1 Object 中的 tostring() 方法 表示返回对象的字符串表达形式 2.2 Object 中的 equals(Object o) 方法 &#xff0c;判断两个对象的是否相等 2.2.1深入了解如何重写Object 中的 equals(Object o) 方法 2.2.2 对重写Object 中的…
阅读更多...
C++医院影像科PACS源码：三维重建、检查预约、胶片打印、图像处理、测量分析等

C++医院影像科PACS源码：三维重建、检查预约、胶片打印、图像处理、测量分析等

PACS连接DICOM接口的医疗器械&#xff08;如CT、MRI、CR、DR、DSA、各种窥镜成像系统设备等&#xff09;&#xff0c;实现图像无损传输&#xff0c;实现DICOM胶片打印机回传打印功能&#xff0c;支持各种图像处理&#xff0c;可以进行窗技术调节&#xff0c;与登记台管理系统共…
阅读更多...
差模电感和共模电感的差别

差模电感和共模电感的差别

一、初步了解差模、共模的概念 超链接&#xff0c;点击鼠标打开&#xff1a;X电容和Y电容&#xff1b;差模与共模初认识 二、差模和共模电感的二者区别 共模电感和差模电感&#xff0c;是电路中常用的滤波电感、EMI器件&#xff0c;两者经常以环形电感线圈的方式存在。 首先…
阅读更多...
【蓝桥·算法双周赛】蓝桥杯官方双周赛震撼来袭

【蓝桥·算法双周赛】蓝桥杯官方双周赛震撼来袭

1. 赛事前言 \space\space 大家好&#xff0c;我是执梗。在蓝桥杯中获得过十三届 Java B 组国一以及十四届 C B 组的国一。今天主要为大家带来一个好消息&#xff0c;蓝桥杯将为各位喜爱算法的小伙伴带来全新的算法双周赛。如果你热爱算法竞赛&#xff0c;或者准备参加十五届的…
阅读更多...
firefox的主题文件位置在哪?记录以防遗忘

firefox的主题文件位置在哪?记录以防遗忘

这篇文章写点轻松的 最近找到了一个自己喜欢的firefox主题,很想把主题的背景图片找到,所以找了下主题文件所在位置 我的firefox版本:版本: 118.0.1 (64 位)主题名称: Sora Kawai 我的位置在 C:\Users\mizuhokaga\AppData\Roaming\Mozilla\Firefox\Profiles\w0e4e24v.default…
阅读更多...
【开源电商网站】（2），使用docker-compose和dockerfile进行配置，设置自定义的镜像，安装插件，增加汉化包，支持中文界面汉化。

【开源电商网站】（2），使用docker-compose和dockerfile进行配置，设置自定义的镜像，安装插件，增加汉化包，支持中文界面汉化。

项目相关代代码地址 相关内容&#xff1a; https://blog.csdn.net/freewebsys/category_12461196.html 原文地址&#xff1a; https://blog.csdn.net/freewebsys/article/details/133666433 包括以下运行的详细代码&#xff1a; https://gitee.com/study-demo-all/oscommerc…
阅读更多...
CTF 全讲解：[SWPUCTF 2021 新生赛]Do_you_know_http

CTF 全讲解：[SWPUCTF 2021 新生赛]Do_you_know_http

文章目录 参考环境题目hello.php雾现User-Agent伪造 User-AgentHackBarHackBar 插件的获取修改请求头信息 雾散 a.php雾现本地回环地址与客户端 IP 相关的 HTTP 请求头X-Forwarded-For 雾散 参考 项目描述搜索引擎Bing、GoogleAI 大模型文心一言、通义千问、讯飞星火认知大模型…
阅读更多...
Apache Doris (三十九）：Doris数据导出 - MySQL dump导出

Apache Doris (三十九）：Doris数据导出 - MySQL dump导出

🏡 个人主页：IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 🚩 私聊博主：加入大数据技术讨论群聊，获取更多大数据资料。 🔔 博主个人B栈地址：豹哥教你大数据的个人空间-豹哥教你大数据个人主页-哔哩哔哩视频 目录
阅读更多...
抖音小店创业攻略，快速了解这些适合新手经营的类目

抖音小店创业攻略，快速了解这些适合新手经营的类目

抖音小店是抖音平台上的一种新型电商形态&#xff0c;它允许用户在抖音上开设自己的小店&#xff0c;销售自己的商品。抖音小店的开设门槛低&#xff0c;成本也不高&#xff0c;因此很受新手创业者的青睐。那么&#xff0c;下面不若与众将介绍抖音小店中有哪些适合新手创业者经…
阅读更多...
Factory-Method

Factory-Method

Factory-Method 动机 在软件系统中&#xff0c;经常面临着创建对象的工作&#xff1b;由于需求的变化&#xff0c;需要创建的对象的具体类型经常变化。如何应对这种变化&#xff1f;如何绕过常规的对象创建方法(new)&#xff0c;提供一种“封装机制”来避免客户程序和这种“具…
阅读更多...
智能优化算法常用指标一键导出为EXCEL，CEC2017函数集最优值，平均值，标准差，最差值，中位数，秩和检验，箱线图...

智能优化算法常用指标一键导出为EXCEL，CEC2017函数集最优值，平均值，标准差，最差值，中位数，秩和检验，箱线图...

声明&#xff1a;对于作者的原创代码&#xff0c;禁止转售倒卖&#xff0c;违者必究&#xff01; 之前出了一篇关于CEC2005函数集的智能算法指标一键统计&#xff0c;然而后台有很多小伙伴在询问其他函数集该怎么调用。今天采用CEC2017函数集为例&#xff0c;进行展示。 为了突…
阅读更多...
根据前序遍历结果构造二叉搜索树

根据前序遍历结果构造二叉搜索树

根据前序遍历结果构造二叉搜索树-力扣 1008 题 题目说明&#xff1a; 1.preorder 长度>1 2.preorder 没有重复值 直接插入 解题思路&#xff1a; 数组索引[0]的位置为根节点&#xff0c;与根节点开始比较&#xff0c;比根节点小的就往左边插&#xff0c;比根节点大的就往右…
阅读更多...
TCP/IP(十一)TCP的连接管理(八)socket网络编程

TCP/IP(十一)TCP的连接管理(八)socket网络编程

一 socket网络编程 socket 基本操作函数 bind、listen、connect、accept、recv、send、select、close 说明: 本文需要C语言、syscall系统调用、OS 操作系统支持,如果不了解可以暂时跳过备注&#xff1a; 知道对应库函数的更底层机制思考&#xff1a; socket函数与FIN、ACK等…
阅读更多...
c++ 学习之 强制类型转换运算符 const_cast

c++ 学习之 强制类型转换运算符 const_cast

看例子怎么用 int main() {int a 1;int* p a;// 会发生报错// 如果学着 c的风格类型转换int* pp (int*)a;*pp 1; // 编译不报错&#xff0c;但是运行报错// const_castconst int n 5;const std::string s "lalal";// const cast 只针对指针&#xff0c;引用&…
阅读更多...
.NET 8 中的调试增强功能

.NET 8 中的调试增强功能

作者&#xff1a;James Newton-King 排版&#xff1a;Alan Wang 开发人员喜欢 .NET 强大且用户友好的调试体验。您可以在您选择的 IDE 中设置断点&#xff0c;启动已经附加上调试器的程序&#xff0c;逐步执行代码并查看 .NET 应用程序的状态。 在 .NET 8 中&#xff0c;我们致…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023