freeBuf
主站

分类

漏洞 工具 极客 Web安全 系统安全 网络安全 无线安全 设备/客户端安全 数据安全 安全管理 企业安全 工控安全

特色

头条 人物志 活动 视频 观点 招聘 报告 资讯 区块链安全 标准与合规 容器安全 公开课

官方公众号企业安全新浪微博

FreeBuf.COM网络安全行业门户,每日发布专业的安全资讯、技术剖析。

FreeBuf+小程序

FreeBuf+小程序

web入门(一)html
2022-01-15 15:54:31

什么是html?

html是一种标签语言,指的是超文本标记语言 (Hyper Text Markup Language)。

属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现,比如:name="value"。

属性总是在 HTML 元素的开始标签中规定。

引用

HTML <q> 元素定义短的引用。

浏览器通常会为 <q> 元素包围引号。

注释

注释标签 <!-- 与 --> 用于在 HTML 插入注释。

颜色

颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。

每种颜色的最小值是 0(十六进制:#00)。最大值是 255(十六进制:#FF)。

链接

<a href="url">Link text</a>

在a标签中写一个href,然后=“链接的目标”

如果把链接的 target 属性设置为 "_blank",该链接会在新窗口中打开。

<a href="http://www.w3school.com.cn/" target="_blank">在新窗口打开</a>

书签链接:当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

<a name="label">锚(显示在页面上的文本)</a>

图像

图像由img标签定义。

<img> 是空标签,它只包含属性,并且没有闭合标签。

要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。

url是统一资源定位符,对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。一般格式为协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志。

<img src="url" />

表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

列表

无序列表始于 <ul> 标签。每个列表项始于 <li>。前面会出现经典的小黑圆圈。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。前面是数字。

<h4>字母列表:</h4>
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>

<h4>小写字母列表:</h4>
<ol type="a">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>

块和类

HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。(对文档中的一部分进行统一设置)

<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素是内联元素,可用作文本的容器。

<span> 元素也没有特定的含义。

当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

总结起来就是:

<div>定义文档中的分区或节,<span>用来组合文档内的行内元素。

类就是,在<style>标签里面统一规定样式,然后在<div>里面写个class属性引用这个样式。

<style> .cities { background-color:black; color:white; margin:20px; padding:20px; } </style>

<div class="cities"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div>

至于生成大概的框架,可以打一个!然后按tab键。

内联框架

在网页中显示网页可以用iframe标签:URl指向该网页的地址。

<iframe src="URL"></iframe>

height 和 width 属性用于规定 iframe 的高度和宽度。

属性值的默认单位是像素,但也可以用百分比来设定(比如 "80%")。

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

JavaScript

HTML <script>标签用于定义客户端脚本(JavaScript)。

<script>元素即可包含脚本语句,也可通过 src属性指向外部脚本文件。

主要是用来写与客户交互的时候需要的脚本

HTML <noscript>标签定义了替代内容,这些内容将显示给在浏览器中禁用了脚本或浏览器不支持脚本的用户。

相对路径

相对路径指向了相对于当前页面的文件。

在本例中,文件路径指向了位于当前网站根目录中 images 文件夹里的一个文件:

<img src="/images/picture.jpg" alt="flower">

头部元素

<head>用于定义文档的信息

<title>文档标题

<base>定义链接上所有默认地址或默认目标

<link>定义文档与外部资源之间的关系

<meta>

<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。

典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

<meta> 标签始终位于 head 元素中。

元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

布局

<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。

响应式web设计

  • RWD 指的是响应式 Web 设计(Responsive Web Design)

  • RWD 能够以可变尺寸传递网页

  • RWD 对于平板和移动设备是必需的


Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。

Bootstrap 帮助您开发在任何尺寸都外观出众的站点:显示器、笔记本电脑、平板电脑或手机

语义元素:

1642217938_61e241d214dc2887eb22c.png!small?1642217938522

1642221438_61e24f7e1aa10304e1843.png!small?1642221438689


小写约定:用小写字母写html会更加好看o

字符实体

个人理解是像ASCII码一样的存在,还有支持的一些数学符号和其他符号,甚至还有表情符号(UTF-8yyds!)

它们是来自 UTF-8 (Unicode) 字符集的字母(字符)。

提示:UTF-8 几乎涵盖世界上所有字符和符号。

表情符号也是来自 UTF-8 字母的字符:例如:

1642224818_61e25cb245b18ec4e41ec.png!small?1642224818861

1642221780_61e250d46c8b04208686b.png!small?1642221781092

URL

URL 的英文全称是 Uniform Resource Locator,中文也译为“统一资源定位符”。

最常见的一种形式:scheme://host.domin:port/path/filename

注释:

  • scheme:定义因特网服务的类型,最常见的就是http;
  • host:定义域主机,http的主机默认是www;
  • domain:定义因特网域名;
  • :port:定义主机上的端口号;
  • path:定义服务器上的路径;
  • filename:定义文档、资源的名称。

1642224362_61e25aeacabba39ea192b.png!small?1642224363391

背景

用background属性就可以了


本文作者:, 转载请注明来自FreeBuf.COM

# 黑客 # web安全 # CTF
被以下专辑收录,发现更多精彩内容
+ 收入我的专辑
评论 按热度排序

登录/注册后在FreeBuf发布内容哦

相关推荐
\
  • 0 文章数
  • 0 评论数
  • 0 关注者
文章目录
登录 / 注册后在FreeBuf发布内容哦
收入专辑