🏆今日学习目标：
🍀学习HTML基础
✅创作者：贤鱼
⏰预计时间：30分钟
🎉个人主页：贤鱼的个人主页
🔥专栏系列：网络安全
🍁贤鱼的个人社区，欢迎你的加入 贤鱼摆烂团
HTML基础
🍀概念
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元素开始标签中规定
属性总是以名称/值对形式出现
属性名称小写，值加引号
属性作用style设置标签样式src表示外部资源地址href标签< a >的指定地址
🍀标签
🍁文本标签
🎉标题
<html><head><title>贤鱼第一个网页</title></head><body><h1align="right">一级标题</h1><h2align="left">二级标题</h2><h3align="center">三级标题</h3></html>
align用法
名字作用right向右对齐center居中对齐left向左对齐
🎉段落
p标签中的内容就是段落
<html><head><title>贤鱼第一个网页</title></head><body><h1align="right">一级标题</h1><h2align="left">二级标题</h2><h3align="center">三级标题</h3><pstyle="font-size: 40px;color:rgb(255, 0, 140);"align="right">段落</p><pstyle="font-size: 40px;color:rgb(208, 255, 0);"align="left">段落</p><pstyle="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><litype="none">1</li><litype="disk">2</li><litype="circle">3</li><litype="square">4</li></ul></body></html>
ul部分内就是无序列表，type是列表前图标
有序列表
<html><head><title>贤鱼第一个网页</title></head><body><olstart=1><litype="a">1</li><litype="c">2</li></ol></body></html>
type表示列表前方序号
🍁表格
🎉使用
<tableborder="1"cellpadding="10"cellspacing="10"><caption>表格标题</caption><tr><th>表头1</th><th>表头2</th><th> </th></tr><tr><td>row 1, cell 1</td><tdalign="center">row 1, cell 2</td><tdrowspan="2">row 1, cell 3</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr><tr><tdcolspan="2">row 3, cell 1</td><td>row 3, cell 2</td></tr></table>
具体讲解一下每个部分的内容
<table> 标签用来定义表格
<caption> 标签用来定义表格的标题
<tr> 标签用来定义表格的行
<td> 标签用来定义表格的单元格
> 显示的就是表头2右边的空格
🎉边框
如果不定义边框，默认是不显示的
🎉跨行/列单元格
colspan 后面跟的值代码其横跨2列
rowspan 后面跟的值代表其横跨2行
🎉单元格内填充和外间距
cellpadding 指定单元格边框到文本内容之间的空白填充距离
cellspacing 指定两个单元格之间的距离
🎉单元格内排序内容
align={left,center,right} 指定了单元格内文本的对齐方式
🍁图片
<imgsrc="URL"alt="替换文本"width="n"height="n"/>
只能写致谢
🎉URL
统一资源定位器，用于定位照片地址
可以写互联网上的网址，也可以是自己电脑中的地址
🔥绝对路径/相对路径
绝对路径从当前文件所在盘符为起点到目标图片为终点的路径
相对路径相对路径：是以操作的文件所在的目录为起点的路径
🎉超链接
<ahref="URL">这是一个超链接</a>
<html><head><title>我的第一个网页。</title></head><body><ahref="https://www.baidu.com/?tn=02003390_19_hao_pg">这是一个超链接</a></body></html>
点击即可跳转到百度，url的部分就是网址
🍁标签样式
🎉设置背景颜色
<html><head><title>我的第一个网页。</title></head><body><xxstyle="background-color: red;">hahahah</xx></body></html>
版权归原作者 贤鱼不闲 所有， 如有侵权，请联系我们删除。