小伙伴们,这一周菜鸟小白工作很忙,所以没有每天更新学习内容,但是菜鸟小白的学习是没有停下来的,只是没有时间来整理学习笔记了。现在就将菜鸟小白这两天学习的HTML基础和大家分享,其中还会拿一些标签进行举例,显示效果。
HTML概述
HTML语言是一种标签语言,它不需要编译,可以直接由浏览器执行。在标准网页设计中HTML负责填充网页的内容,HTML编写的超文本文档(文件)称之为HTML文档(网页),它包含了一些html元素,使用html或者htm为文件名后缀,能独立于各种操作系统平台,如Unix、Windows等
HTML文档结构
标准的html文档是由标签和要显示在网页上的内容组成。HTML用于描述功能的符号成为“标签”,如、、
等。HTML标签规定HTML文档的逻辑结构,并且控制文档的显示格式,然后由浏览器来负责解释并显示页面。通过使用标签可以区分文本文件的各个组成部分,对页面上的文字、表格、图片等多媒体数据所出现的未知、形式、顺序及网页间的超链接关系进行设定。HTML标签
标签都是封装在一对尖括号“<……>”之中。标签只改变网页的显示方式,本身不会显示在窗口中。HTML文档中最先出现的标签是标签。标签是文档标识符,它是成对出现的,首标签和尾标签分别位于文档的最前面和最后面,明确地表示文档是以超文本标识语言(HTML)编写的。该标签不带任何属性
……之间有如下标签:头部标签……
head是英文“头”的意思。习惯上用户把HTML文档分为文档头和文档主体两部分。文档主体部分就是在web浏览器窗口的用户区内看到的内容,而文档头部分用来规定该文档的标题(出现在web浏览器窗口的标题栏中)和文档的一些属性。标签对的作用就是控制文档的头部信息。中间可以使用
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
菜鸟小白的学习分享
</head>
</html>
保存为HTML文件后显示如下:
标题标签……
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
</html>
修改后显示如下:
主体标签……
标签也是成对出现的。在……之间的内容将显示在web浏览器窗口的用户区内,它是HTML文档的主体部分。可以把HTML文档的主体区域简单地理解成标题以外的所有部分,该部分可以包含、 、、- “bgcolor”:指定html文档的背景色
- “text”:指定html文档中文字的颜色
- “link”:指定html文档中待连接超链接对象的颜色
- “alink”:指定html文档中连接中超链接对象的颜色
- “vlink”:指定html文档中已连接超链接对象的颜色
- “background”:指定html文档的背景文件
我们验证了前两个属性
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
测试内容
</body>
</html>
显示效果如下:
特殊字符
在html中有许多特殊字符需要处理,例如:“<”、">"这两个符号本身是用来表示标签的开始和结束的,是没有办法通过直接打出来的,必须输入编码表示法:“<”和“>”。
通常情况下html会自动截取多余的空格。不管你加多少个空格,都被看做一个空格。如果要显示多个空格,可以使用 表示空格
我们看看实现代码
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<测试内容> 空格在中间 看到了吧
</body>
</html>
显示效果:
格式标签
在浏览器中控制文本对象的显示,包括段落、换行、水平线等标签,下面介绍几个常用的html格式标签。所有的格式标签全部都是在嵌套在……标签对之间的
段落标签
全称paragraph。
……
标签对用于创建一个段落,支持align属性来设置对齐方式,语法如下:-
段落内容
-
align:设定水平对齐方式,常见设置:
-
置左:align=“left”
-
置中:align=“center”
-
置右:align=“right”
我们验证一个居中的对齐方式吧
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<p align="center"><测试内容> 空格在中间 看到了吧</p>
</body>
</html>
显示效果:
换行标签
在不另起一段的情况下将当前文本强制换行,
标签属于单独出现的标签,禁止出现结束标签。
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<p align="center"><测试内容></br> 空格在中间 看到了吧</p>
</body>
</html>
显示效果:
预格式化标签
可以完整保留设计者在源文件中所定义的格式,包含各种空格,缩进,以及其他特殊字符,全部都原封不动的展示在浏览器页面上。
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<p align="center"><测试内容></br> 空格在中间 看到了吧</p>
<pre>
我是菜鸟小白
你们的好朋友
让我们一起学习吧!!!
</pre>
</body>
</html>
显示效果:
列表标签
主要分为无序列表、排序列表、目录列表、菜单列表和描述性列表五中类型
-
无序列表
- ……
-
排序列表
- ……
-
目录列表
-
菜单列表
-
描述性列表
-
列表头
- 列表内容
我们就验证一个无序列表和一个描述性列表吧
无序列表:
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<ul>
<li>我是菜鸟小白</li>
<li>你们的好朋友</li>
<li> 让我们一起学习吧!!!</li>
</ul>
</body>
</html>
效果如下:
描述性列表:
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<dl>
<dt>菜鸟小白测试表头</dt>
<dd>我是菜鸟小白</dd>
<dd>你们的好朋友</dd>
<dd> 让我们一起学习吧!!!</dd>
<dt>菜鸟小白测试表头2</dt>
<dd>我是菜鸟小白</dd>
<dd>你们的好朋友</dd>
<dd> 让我们一起学习吧!!!</dd>
</dl>
</body>
</html>
显示效果如下:
最后
为了帮助大家更好的学习网络安全,小编给大家准备了一份网络安全入门/进阶学习资料,里面的内容都是适合零基础小白的笔记和资料,不懂编程也能听懂、看懂,所有资料共282G,朋友们如果有需要全套网络安全入门+进阶学习资源包,可以点击免费领取(如遇扫码问题,可以在评论区留言领取哦)~
😝有需要的小伙伴,可以点击下方链接免费领取或者V扫描下方二维码免费领取🆓
1️⃣零基础入门
① 学习路线
对于从来没有接触过网络安全的同学,我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线,大家跟着这个大的方向学习准没问题。
② 路线对应学习视频
同时每个成长路线对应的板块都有配套的视频提供:
因篇幅有限,仅展示部分资料
2️⃣视频配套资料&国内外网安书籍、文档
① 文档和书籍资料
② 黑客技术
因篇幅有限,仅展示部分资料
3️⃣网络安全源码合集+工具包
4️⃣网络安全面试题
5️⃣汇总
所有资料 ⚡️ ,朋友们如果有需要全套 《网络安全入门+进阶学习资源包》,扫码获取~