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.hqwc.cn/news/129343.html

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

相关文章

提高工作效率！本地部署Stackedit Markdown编辑器，并实现远程访问

提高工作效率！本地部署Stackedit Markdown编辑器，并实现远程访问

文章目录 1. docker部署Stackedit2. 本地访问3. Linux 安装cpolar4. 配置Stackedit公网访问地址5. 公网远程访问Stackedit6. 固定Stackedit公网地址 StackEdit是一个受欢迎的Markdown编辑器&#xff0c;在GitHub上拥有20.7k Star&#xff01;&#xff0c;它支持将Markdown笔记保…
阅读更多...
三分钟学习一个python小知识8-----------我的对python中pandas的理解--补充,

三分钟学习一个python小知识8-----------我的对python中pandas的理解--补充,

文章目录 一、利用pandas读入excel表&#xff0c;包括csv,xlsx等格式二、利用pandas读取没有表头的表格1.引入库 三、利用pandas读取有表头的表格四、利用pandas读取表格中的第一列五、利用pandas导出为excel数据总结 一、利用pandas读入excel表&#xff0c;包括csv,xlsx等格式…
阅读更多...
312.戳气球

312.戳气球

将戳气球转换到添加气球&#xff0c;记忆搜索slove(i,j)&#xff1a;在开区间(i,j)全部填满气球得到的最多硬币数&#xff0c;两端val[i]、val[j] class Solution { public:vector<vector<int>> ans;vector<int> val;int slove(int left,int right){if(left&…
阅读更多...
请求的转发和重定向

请求的转发和重定向

RequestDispatcher接口实现转发&#xff1a; jsp1上链接到Servlet&#xff0c;Servlet再转发&#xff08;关键在这里怎么实现转发&#xff1f;&#xff1f;&#xff09; 演示index.html页面---->Servlet1(转发到)------>Servlet2 实现转发流程 1.用HttpServletReques…
阅读更多...
【C语言】字符函数和内存操作函数

【C语言】字符函数和内存操作函数

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家了解字符函数和内存操作函数&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 一.字符函数1.1 字符分类函数1.2 字符转换函数 二.内存操作函数2.1 memcpy2.2…
阅读更多...
Vim教程

Vim教程

目录 vim 介绍 常用的四种模式 首先先学会如何正确进入和退出vim&#xff1a; normal模式 insert模式&#xff1a; command模式&#xff1a; v-block模式&#xff1a; vim异常退出 vim配置 vim 介绍 Vim是一款高度可定制的文本编辑器&#xff0c;它的前身是Vi&#xf…
阅读更多...
弹性资源组件elastic-resource设计(四)-任务管理器和资源消费者规范

弹性资源组件elastic-resource设计(四)-任务管理器和资源消费者规范

简介 弹性资源组件提供动态资源能力&#xff0c;是分布式系统关键基础设施&#xff0c;分布式datax&#xff0c;分布式索引&#xff0c;事件引擎都需要集群和资源的弹性资源能力&#xff0c;提高伸缩性和作业处理能力。 本文介绍弹性资源组件的设计&#xff0c;包括架构设计和详…
阅读更多...
VBox启动失败、Genymotion启动失败、Vagrant迁移

VBox启动失败、Genymotion启动失败、Vagrant迁移

VBox启动失败、Genymotion启动失败、Vagrant迁移 2023.10.9 最新版本vbox7.0.10、Genymotion3.5.0 Vbox启动失败 1、查看日志 Error -610 in supR3HardenedMainInitRuntime! (enmWhat4) Failed to locate ‘vcruntime140.dll’ 日志信息查看方法->找到虚拟机所在位置->…
阅读更多...
微信小程序wxs标签 在wxml文件中编写JavaScript逻辑

微信小程序wxs标签 在wxml文件中编写JavaScript逻辑

PC端开发 可以在界面中编写JavaScript脚本 vue/react这些框架更是形成了一种常态 因为模板引擎和jsx语法本身就都是在js中的 我们小程序中其实也有类似的奇妙写法 不过先声明 这东西不是很强大 我们可以先写一个案例代码 wxml代码参考 <view><wxs module"wordSt…
阅读更多...
十一、2023.10.5.计算机网络（end）.11

十一、2023.10.5.计算机网络（end）.11

文章目录 17、说说 TCP 可靠性保证&#xff1f;18、简述 TCP 滑动窗口以及重传机制?19、说说滑动窗口过小怎么办?20、说说如果三次握手时候每次握手信息对方没收到会怎么样&#xff0c;分情况介绍&#xff1f;21、简述 TCP 的 TIME_WAIT&#xff0c;为什么需要有这个状态&…
阅读更多...
git命令笔记

git命令笔记

git命令笔记 前言&#xff1a;git对于软件开发和协作的重要性不言而喻&#xff0c;在企业开发中&#xff0c;git命令和linux命令的使用同样重要。作为开发者&#xff0c;需要牢记并熟练使用常见的git命令 git工作流程图 命令如下&#xff1a; clone&#xff08;克隆&#xf…
阅读更多...
JSP旅游平台管理

JSP旅游平台管理

本系统采用基于JAVA语言实现、架构模式选择B/S架构&#xff0c;Tomcat7.0及以上作为运行服务器支持&#xff0c;基于JAVA、JSP等主要技术和框架设计&#xff0c;idea作为开发环境&#xff0c;数据库采用MYSQL5.7以上。 开发环境&#xff1a; JDK版本&#xff1a;JDK1.8 服务器&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023