小伙伴们，好几天不见了，这一周菜鸟小白工作很忙，所以没有每天更新学习内容，但是菜鸟小白的学习是没有停下来的，只是没有时间来整理学习笔记了。现在就将菜鸟小白这两天学习的HTML基础和大家分享，其中还会拿一些标签进行举例，显示效果。

HTML概述

HTML语言是一种标签语言，它不需要编译，可以直接由浏览器执行。在标准网页设计中HTML负责填充网页的内容，HTML编写的超文本文档（文件）称之为HTML文档（网页），它包含了一些html元素，使用html或者htm为文件名后缀，能独立于各种操作系统平台，如Unix、Windows等

HTML文档结构

标准的html文档是由标签和要显示在网页上的内容组成。HTML用于描述功能的符号成为“标签”，如<html>、<body>、<table>等。HTML标签规定HTML文档的逻辑结构，并且控制文档的显示格式，然后由浏览器来负责解释并显示页面。通过使用标签可以区分文本文件的各个组成部分，对页面上的文字、表格、图片等多媒体数据所出现的未知、形式、顺序及网页间的超链接关系进行设定。

HTML标签

标签都是封装在一对尖括号“<……>”之中。标签只改变网页的显示方式，本身不会显示在窗口中。HTML文档中最先出现的标签是<html>标签。<html>标签是文档标识符，它是成对出现的，首标签<html>和尾标签</html>分别位于文档的最前面和最后面，明确地表示文档是以超文本标识语言（HTML）编写的。该标签不带任何属性

<html>……</html>之间有如下标签：

头部标签<head>……</head>

head是英文“头”的意思。习惯上用户把HTML文档分为文档头和文档主体两部分。文档主体部分就是在web浏览器窗口的用户区内看到的内容，而文档头部分用来规定该文档的标题（出现在web浏览器窗口的标题栏中）和文档的一些属性。<head>标签对的作用就是控制文档的头部信息。中间可以使用<title>……</title>、<script>……</script>标签对，在此标签中间可以HTML文档的标签是可以嵌套的，即在一对标签中可以嵌入另外一对子标签，用来规定母标签所含范围的属性或其中某一部分内容，嵌套在<head>……</head>标签对中使用的主要有<title>标签

<html lang="zh-cn">

<head>

<meta content="text/html;charset=utf-8">

菜鸟小白的学习分享

</head>

</html>

保存为HTML文件后显示如下：

 

标题标签<title>……</title>

<title>标签是成对出现的，用以规定HTML文档的标题。在<title>……</title>之间的内容将显示在web浏览器窗口的标题栏中。另外，<title>……</title>标签对只能放在<head>……</head>标签对之间，而且其内部不能包含其它标签。

<html lang="zh-cn">

<head>

<meta content="text/html;charset=utf-8">

<title>菜鸟小白的学习分享</title>

</head>

</html>

修改后显示如下：

 

主体标签<body>……</body>

<body>标签也是成对出现的。在<body>……</body>之间的内容将显示在web浏览器窗口的用户区内，它是HTML文档的主体部分。可以把HTML文档的主体区域简单地理解成标题以外的所有部分，该部分可以包含<table>、<font>、<img>、<div>等标签。结束标签</body>指明主体区域的结尾，在<body>中可以规定整个文档的一些基本属性：

  • “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会自动截取多余的空格。不管你加多少个空格，都被看做一个空格。如果要显示多个空格，可以使用&nbsp;表示空格

我们看看实现代码

<html lang="zh-cn">

<head>

<meta content="text/html;charset=utf-8">

<title>菜鸟小白的学习分享</title>

</head>

​

<body bgcolor="11ffff" text="000000">

  &lt;测试内容&gt;  空格在中间&nbsp;看到了吧

​

</body>

</html>

显示效果：

格式标签

在浏览器中控制文本对象的显示，包括段落、换行、水平线等标签，下面介绍几个常用的html格式标签。所有的格式标签全部都是在嵌套在<body>……</body>标签对之间的

段落标签<p>

全称paragraph。<p>……</p>标签对用于创建一个段落，支持align属性来设置对齐方式，语法如下：

  • <p align=“属性”>段落内容</p>

  • 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">&lt;测试内容&gt;  空格在中间&nbsp;看到了吧</p>

​

</body>

</html>

显示效果：

 

换行标签

在不另起一段的情况下将当前文本强制换行，<br>标签属于单独出现的标签，禁止出现结束标签。

<html lang="zh-cn">

<head>

<meta content="text/html;charset=utf-8">

<title>菜鸟小白的学习分享</title>

</head>

​

<body bgcolor="11ffff" text="000000">

  <p align="center">&lt;测试内容&gt;</br>  空格在中间&nbsp;看到了吧</p>

​

</body>

</html>

显示效果：

 

预格式化标签<pre>

可以完整保留设计者在源文件中所定义的格式，包含各种空格，缩进，以及其他特殊字符，全部都原封不动的展示在浏览器页面上。

<html lang="zh-cn">

<head>

<meta content="text/html;charset=utf-8">

<title>菜鸟小白的学习分享</title>

</head>

​

<body bgcolor="11ffff" text="000000">

  <p align="center">&lt;测试内容&gt;</br>  空格在中间&nbsp;看到了吧</p>

<pre>

我是菜鸟小白

你们的好朋友

​

  让我们一起学习吧！！！

</pre>

​

</body>

</html>

显示效果：

列表标签

主要分为无序列表、排序列表、目录列表、菜单列表和描述性列表五中类型

  • 无序列表<ul><li>……</li></ul>

  • 排序列表<ol><li>……</li></ol>

  • 目录列表

  • 菜单列表

  • 描述性列表<dl><dt>列表头<dd>列表内容

    ​我们就验证一个无序列表和一个描述性列表吧

    ​无序列表：

<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>

显示效果如下：

​

好了，今天的内容就到这了，我们明天继续学习HTML基础内容，不见不散~

谁来教我渗透测试——黑客必须掌握的HTML基础（一）的更多相关文章

  1. 谁来教我渗透测试——黑客应该掌握的Windows基础

    今天我们看看作为一个黑客对于Windows应该掌握哪些基础知识,主要内容包含以下四个方面: 系统目录.服务.端口和注册表: 黑客常用的DOS命令及批处理文件的编写: 黑客常用的快捷键,以及如何优化系统 ...

  2. 谁来教我渗透测试——黑客必须掌握的Linux基础

    上一篇我们学习了Windows基础,今天我们来看一看作为一名渗透测试工程师都需要掌握哪些Linux知识.今天的笔记一共分为如下三个部分: Linux系统的介绍 Linux系统目录结构.常用命令 Lin ...

  3. 谁来教我渗透测试——黑客必须掌握的HTML基础（二）

    今天我们继续看看html的学习笔记. 文本标签 标题标签<hn> 将文本设置为标题显示的标签对.设定标题字体大小,n=1(大)~6(小),标题大小一共有6种,也就是从<h1>… ...

  4. Firefox渗透测试黑客插件集

    前天看S哥用Firefox的hackbar进行手动注入进行渗透,觉得直接运用浏览器的插件进行渗透测试有很多优点,既可以直接在前端进行注入等操作,也可以省却了寻找各种工具的麻烦.前端还是最直接的!于是这 ...

  5. 谁来教我渗透测试——VMware工具安装和使用

    今天我们继续渗透测试学习系列了,昨天我们看了基础概念,今天我们来学习一下渗透测试必备的功能VMware安装. 首先我们下载好VMware workstation Pro的安装包.可以在百度上直接百度下 ...

  6. 《Python黑帽子：黑客与渗透测试编程之道》 网络基础

    TCP客户端: 示例中socket对象有两个参数,AF_INET参数表明使用IPv4地址或主机名 SOCK_STREAM参数表示是一个TCP客户端.访问的URL是百度. #coding=utf-8 i ...

  7. 谁来教我渗透测试——Windows server 2003上部署动态ASP网站

    安装网站 我们点击开始/管理工具/管理您的服务器 在服务器配置页面点击添加或删除角色 选择应用程序服务器,点击下一步 将两个工具都勾选上,点击下一步 点击下一步进行安装 等待安装 安装完成后点击完成按 ...

  8. 2019-9-24：渗透测试，css样式，js基础学习笔记

    css分组和嵌套:分组:比如有<h1><h4><p>,3个标签,设置css时候可以 h1,h4,p{样式:属性} 这样的语法嵌套:比如.lei{样式:属性},.le ...

  9. Kali Linux Web 渗透测试视频教—第二十课-利用kali linux光盘或者usb启动盘破解windows密码

    Kali Linux Web 渗透测试视频教—第二十课-利用kali linux光盘或者usb启动盘破解windows密码 文/玄魂 目录 Kali Linux Web 渗透测试视频教—第二十课-利用 ...

随机推荐

  1. cmake安装使用

    1.安装命令: yum install -y gcc gcc-c++ make automake wget http://www.cmake.org/files/v2.8/cmake-2.8.10.2 ...

  2. 使用Red5-Pro Android官方Demo拆解分析（一）

    一.配置文件 1.导入库文件jniLibs到main文件夹下 2.导入red5streaming.jar 3.在build里到入其他的包,代码如下: dependencies { implementa ...

  3. ztree : 增删改功能demo与自定义DOM功能demo的结合

    最近有个项目要用ztree,需要用ztree自带的功能(增删改),也需要自定义DOM的功能(置顶). ztree的demo里有增删改的demo,也有自定义DOM的demo,但没有两者结合的. 所以我把 ...

  4. CSS：有点难的面试题①

    1 举例说明匿名块框和匿名行内框2 什么是标准文档流?3 inline-block遵循怎样的渲染规则?4 什么是BFC?如何触发BFC?5 什么是Line box?(最好画图说明) 6 <met ...

  5. 设计模式：composite模式

    目的:使容器和内容具备一致性 实现:将对象组合成树形结构以表示“部分-整体”的层次结构 实例:文件夹中可以包含文件夹也可以包含文件 例子: class Item //接口定义 { public: vi ...

  6. 小特跨境电商ERP桌面版 1.不止包括进销存 还能算毛利

    经过近几年跨境电商ERP的开发,加上对跨境电商行业的业务积累,开发出一套适合中小跨境电商公司使用的ERP软件.欢迎选购.支持目前流行的各大电商平台,如速卖通.敦煌网.亚马逊.Shopee.Wish等. ...

  7. From 表单序列化为json对象（代码片段）

    $.fn.serializeJson=function(){ var serializeObj={}; var array=this.serializeArray(); $(array).each(f ...

  8. DNA Consensus String UVA - 1368

    题目链接:https://vjudge.net/problem/UVA-1368 题意:给出一组字符串,求出一组串,使与其他不同的点的和最小 题解:这个题就是一个点一个点求,利用桶排序,求出最多点数目 ...

  9. [leetcode/lintcode 题解] 谷歌面试题：找出有向图中的弱连通分量

    请找出有向图中弱连通分量.图中的每个节点包含 1 个标签和1 个相邻节点列表.(有向图的弱连通分量是任意两点均有有向边相连的极大子图) 将连通分量内的元素升序排列. 在线评测地址:https://ww ...

  10. 说出来也许你不信，我被 Linux 终端嘲笑了……

    人这一辈子,真的是非常不容易:读书时,被老师.同学嘲笑,工作时,被老板.同事嘲笑,就连出去撸个串儿,还可能被朋友嘲笑-- 这些也就算了,毕竟大家还都是同类,都是活生生的人.但是,你如果被 Linux ...