-
【网络安全篇】--HTML基础（预计学习时间：30分钟）从此以后不迷糊~
🏆今日学习目标：
🍀学习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>- 1
- 2
- 3
- 4
<html> <head> <title>贤鱼第一个网页title> head> <body> <h1>贤鱼第一个标题h1> <p>贤鱼第一个段落p> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
对应着图可以看到不同内容对应的东西
想必对于这个部分大家已经掌握
🍁注释
- 1
- 2
- 3
- 4
- 5
- 6
🍁元素
定义：
指的是从开始标签到结束标签的所有代码
空元素在开始标签中进行关闭（开始标签结束就结束）
元素可以拥有属性（大部分）🍁属性
属性在html元素开始标签中规定
属性总是以名称/值对形式出现
属性名称小写，值加引号属性 作用 style 设置标签样式 src 表示外部资源地址 href 标签< a >的指定地址 🍀标签
🍁文本标签
🎉标题
<html> <head> <title>贤鱼第一个网页title> head> <body> <h1 align="right">一级标题h1> <h2 align="left">二级标题h2> <h3 align="center">三级标题h3> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
align用法名字 作用 right 向右对齐 center 居中对齐 left 向左对齐 🎉段落
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
align用法同上
font用法size 设置体积
color设置颜色🎉特殊字体
<b>粗体b> <i>斜体i> <u>下划线u> <sup>上标sup> <sub>下标sub>- 1
- 2
- 3
- 4
- 5
🍁列表
🎉无序/有序列表
有序列表
<html> <head> <title>贤鱼第一个网页title> head> <body> <ul> <li type="none">1li> <li type="disk">2li> <li type="circle">3li> <li type="square">4li> ul> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
ul部分内就是无序列表，type是列表前图标
有序列表
<html> <head> <title>贤鱼第一个网页title> head> <body> <ol start=1> <li type="a">1li> <li type="c">2li> ol> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
type表示列表前方序号
🍁表格
🎉使用
<table border="1" cellpadding="10" cellspacing="10"> <caption>表格标题caption> <tr> <th>表头1th> <th>表头2th> <th> th> tr> <tr> <td >row 1, cell 1td> <td align="center">row 1, cell 2td> <td rowspan="2">row 1, cell 3td> tr> <tr> <td>row 2, cell 1td> <td>row 2, cell 2td> tr> <tr> <td colspan="2">row 3, cell 1td> <td>row 3, cell 2td> tr> table>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
具体讲解一下每个部分的内容
<table> 标签用来定义表格 <caption> 标签用来定义表格的标题 <tr> 标签用来定义表格的行 <td> 标签用来定义表格的单元格 > 显示的就是表头2右边的空格- 1
- 2
- 3
- 4
- 5
🎉边框
如果不定义边框，默认是不显示的
🎉跨行/列单元格
colspan 后面跟的值代码其横跨2列
rowspan 后面跟的值代表其横跨2行🎉单元格内填充和外间距
cellpadding 指定单元格边框到文本内容之间的空白填充距离
cellspacing 指定两个单元格之间的距离🎉单元格内排序内容
align={left,center,right} 指定了单元格内文本的对齐方式
🍁图片
<img src="URL" alt="替换文本" width="n" height="n" />- 1
- 2
只能写致谢
🎉URL
统一资源定位器，用于定位照片地址
可以写互联网上的网址，也可以是自己电脑中的地址
🔥绝对路径/相对路径
绝对路径从当前文件所在盘符为起点到目标图片为终点的路径
相对路径相对路径：是以操作的文件所在的目录为起点的路径🎉超链接
<a href="URL">这是一个超链接a>- 1
<html> <head> <title>我的第一个网页。title> head> <body> <a href="https://www.baidu.com/?tn=02003390_19_hao_pg">这是一个超链接a> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
点击即可跳转到百度，url的部分就是网址🍁标签样式
🎉设置背景颜色
<html> <head> <title>我的第一个网页。title> head> <body> <xx style="background-color: red;">hahahahxx> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
-
相关阅读:
软考重点5 程序设计语言
JavaScript高阶(属性操作｜样式操作｜事件)
10个Reduce函数的使用小技巧
STM32物联网项目-RS485通信(Modbus协议)
图论第9天
从MediaRecord录像中读取H264参数
vite 入门到精通
年末智能车最热擂台，华为、比亚迪、吉利系领衔 | 2023 广州车展
非平稳信号分析和处理、STFT的瞬时频率研究（Matlab代码实现）
提的最多的数据库“索引”，先来简单了解一下
- 原文地址：https://blog.csdn.net/m0_66623111/article/details/127331747