【网络安全篇】--HTML 基础（预计学习时间：30 分钟）从此以后不迷糊~

2022-10-24
新疆
本文字数：2215 字
阅读完需：约 7 分钟

🏆今日学习目标：🍀学习 HTML 基础✅创作者：贤鱼⏰预计时间：30 分钟

🍀概念

HTML 是超文本标记语言（Hyper Text Markup Language）的缩写。它是一种描述文档结构的语言，使用描述性的标记符来指明文档的不同内容，这些标记用尖括号括起来，使用特定的字符表示特定的含义。可以满足跨平台的需要，使 Web 页面在各种系统上都能浏览。HTML 语言是整个 Web 技术的基础，网页上的音像、图文，后台程序等都要通过 HTML 连接起来。

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是显示其解析后的结果。

🍀基础语法

🍁全局框架标签

全局框架标签是 html 的重点，构成了整个网页的主题部分

具体的全局框架标签有以下几种

html 标签容器head （）这个容器标签中包含了头文件的一系列标签title （）标题标签种的内容会在浏览器标题栏中显示，是 head 唯一必须元素body（） 主体标签，其中的内容会显示在页面上

<html></html><head></head><title></title><body></body>

复制代码

<html>  <head>    <title>贤鱼第一个网页</title>  </head>  <body>    <h1>贤鱼第一个标题</h1>    <p>贤鱼第一个段落</p>  </body></html>

复制代码

对应着图可以看到不同内容对应的东西

想必对于这个部分大家已经掌握

🍁注释

<!--这是单行注释--><!--这是多行注释这是多行注释这是多行注释-->

复制代码

🍁元素

定义：指的是从开始标签到结束标签的所有代码空元素在开始标签中进行关闭（开始标签结束就结束）元素可以拥有属性（大部分）

🍁属性

属性在 html 元素开始标签中规定属性总是以名称/值对形式出现属性名称小写，值加引号

🍀标签

🍁文本标签

🎉标题

<html>  <head>    <title>贤鱼第一个网页</title>  </head>  <body>  <h1 align="right">一级标题</h1>  <h2 align="left">二级标题</h2>  <h3 align="center">三级标题</h3></html>

复制代码

align用法

🎉段落

p 标签中的内容就是段落

<html>  <head>    <title>贤鱼第一个网页</title>  </head>  <body>  <h1 align="right">一级标题</h1>  <h2 align="left">二级标题</h2>  <h3 align="center">三级标题</h3>    <p style="font-size: 40px;color: rgb(255, 0, 140);"align="right" >段落</p>    <p style="font-size: 40px;color: rgb(208, 255, 0);"align="left" >段落</p>    <p style="font-size: 40px;color: rgb(0, 26, 255);"align="center">段落</p>  </body></html>

复制代码

align用法同上font用法

size 设置体积 color 设置颜色

🎉特殊字体

<b>粗体</b><i>斜体</i><u>下划线</u><sup>上标</sup><sub>下标</sub>

复制代码

🍁列表

🎉无序/有序列表

有序列表

<html>  <head>    <title>贤鱼第一个网页</title>  </head>  <body>    <ul>      <li type="none">1</li>      <li type="disk">2</li>      <li type="circle">3</li>      <li type="square">4</li>      </ul>  </body></html>

复制代码

ul 部分内就是无序列表，type 是列表前图标

有序列表

<html>  <head>    <title>贤鱼第一个网页</title>  </head>  <body>    <ol start=1>      <li type="a">1</li>      <li type="c">2</li>      </ol>        </body></html>

复制代码

type 表示列表前方序号

🍁表格

🎉使用

<table border="1" cellpadding="10" cellspacing="10">  <caption>表格标题</caption>    <tr>    <th>表头1</th>    <th>表头2</th>    <th>&nbsp;</th>  </tr>  <tr>    <td >row 1, cell 1</td>    <td align="center">row 1, cell 2</td>    <td rowspan="2">row 1, cell 3</td>  </tr>  <tr>    <td>row 2, cell 1</td>    <td>row 2, cell 2</td>  </tr>  <tr>    <td colspan="2">row 3, cell 1</td>    <td>row 3, cell 2</td>  </tr></table>

复制代码

具体讲解一下每个部分的内容

<table> 标签用来定义表格<caption> 标签用来定义表格的标题<tr> 标签用来定义表格的行<td> 标签用来定义表格的单元格>&nbsp;显示的就是表头2右边的空格

复制代码

🎉边框

如果不定义边框，默认是不显示的

🎉跨行/列单元格

colspan 后面跟的值代码其横跨 2 列 rowspan 后面跟的值代表其横跨 2 行

🎉单元格内填充和外间距

cellpadding 指定单元格边框到文本内容之间的空白填充距离 cellspacing 指定两个单元格之间的距离

🎉单元格内排序内容

align={left,center,right} 指定了单元格内文本的对齐方式

🍁图片

<img src="URL" alt="替换文本" width="n" height="n" />

复制代码

只能写致谢

🎉URL

统一资源定位器，用于定位照片地址

可以写互联网上的网址，也可以是自己电脑中的地址

🔥绝对路径/相对路径

绝对路径从当前文件所在盘符为起点到目标图片为终点的路径相对路径相对路径：是以操作的文件所在的目录为起点的路径

🎉超链接

<a href="URL">这是一个超链接</a>

复制代码

<html>  <head>    <title>我的第一个网页。</title>  </head>  <body>    <a href="https://www.baidu.com/?tn=02003390_19_hao_pg">这是一个超链接</a>
  </body></html>

复制代码

点击即可跳转到百度，url 的部分就是网址

🍁标签样式

🎉设置背景颜色

<html>  <head>    <title>我的第一个网页。</title>  </head>  <body>    <xx style="background-color: red;">hahahah</xx>  </body></html>

复制代码

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/8130aa5916c67dce3deb9cf15】。未经作者许可，禁止转载。

贤鱼很忙

关注

为了未来奋斗中 2022-09-28 加入

主修网络安全和c++方面内容，时常提供题解和网络安全方面知识

发布

暂无评论

创作场景

【网络安全篇】--HTML 基础（预计学习时间：30 分钟）从此以后不迷糊~

🍀概念

🍀基础语法

🍁全局框架标签

🍁注释

🍁元素

🍁属性

🍀标签

🍁文本标签

🎉标题

🎉段落

🎉特殊字体

🍁列表

🎉无序/有序列表

🍁表格

🎉使用

🎉边框

🎉跨行/列单元格

🎉单元格内填充和外间距

🎉单元格内排序内容

🍁图片

🎉URL

🔥绝对路径/相对路径

🎉超链接

🍁标签样式

🎉设置背景颜色

贤鱼很忙

评论