CTF入门学习4->前端HTML基础
Web安全基础
02 前端开发-HTML基础
浏览器对于上网者来说是一种直观、可视化的呈现。服务器发送数据到客户端，客户端需要处理这些数据，互联网就造就了这种数据语言——HTML。
02-00 概述
有一个问题，我们浏览网页时，各种绚丽的页面是如何构成的？要了解的HTML在网页中占多少份额呢？
JS----为网页添加各式各样的动态功能，为用户提供更流畅美观的页面效果。是魔术师
CSS----对HTML的补充，是装修队。
HTML----网页的基本内容与基本信息。是建筑师。
为了直观感受呢，我们可以打开一个目标网址https://dun.163.com
我们在左上角点击小锁->此网站的权限->关闭JavaScript->刷新-----动态效果已经消失，变为纯静态页面。
关闭CSS后（这里使用了一个插件，没有查到），只会显示页面的主要内容，没有图片和其他效果。
02-01 HTML语法
HTML是Hyper Text Markup Language，超文本标记语言，可以加载JS、CSS、图片等非文字的内容，所以叫做超文本。是Web页面的基础。
下面看HTML的结构和语法。
结构
1 <html><这是根结点></这是根结点>
2 <head>
3 <-----这是页面标题></-----这是页面标题>
4 </head>
5 <body>
6 <看到的页面内容></看到的页面内容>
7 </body>
8 </html>
我们来实地看一下网页代码。
还是打开https://www.cnblogs.com/Roboduster/
打开开发者工具，选中“元素”，可以看见主要就是html-head-body三大要素，head和body里有各自的代码内容。
元素
元素结构
HTML的尖括号代表什么意思呢？
HTML里有很多资源需要加载，这些资源称为元素。这些元素，以<p>为开始标签，</p>为闭合标签，两者之间的就是Content，整个一句是一个元素Element；
属性
元素里面会有属性：即元素的额外信息。比如：
标签属性：name\id\class...
事件属性：相当于鼠标点击的一个动作。如：onload,onerror,onclick...
示例
1 注释
如下：
1 <!--这里是注释，页面不会展示-->
html不区分大小写。
2 图像
1 <image>src="http://......"</image>
src属性用于添加网络图片的URL。
3 链接
链接写在一个叫做href的属性里面，用来进入其他的页面。
1 <a href="http://....">点我访问</a>
4 表单
常用于浏览器的表单提交，比如登录框。
1 <form>
2 username:
3 <input type="text" name="username"/>
4 password:
5 <input type="password" name="password"/>
6 <input type="submit" value="Submit">
7 </form>
5 内联框架
1 <iframe src="http://..." frameborder="0" width="480" height="240">
2 </iframe>
02-02 HTML DOM
为了更方便管理HTML源码，出现了HTML DOM。
这里了解DOM的树形结构。
作用是：
可以更直观的了解页面元素
更重要的是可以使用 JavaScript通过DOM对HTML进行任意操作
CTF入门学习4->前端HTML基础的更多相关文章
- 转 iOS Core Animation 动画 入门学习（一）基础
iOS Core Animation 动画 入门学习(一)基础 reference:https://developer.apple.com/library/ios/documentation/Coco ...
- JavaSE入门学习7：Java基础语法之语句(下)
继续接着Java基础语法来:JavaSE入门学习5:Java基础语法(一)和JavaSE入门学习6:Java基础语法(二). 语句 Java经常使用的3种循环:while.do...while,for ...
- JavaSE入门学习6：Java基础语法之运算符和语句(上)
继续接着上篇:JavaSE入门学习5:Java基础语法(一)来看Java的基础语法. 五运算符 运算符是一种"功能"符号,用以通知Java进行相关的运算.比方.我们须要将变量age ...
- Shiro learning - 入门学习 Shiro中的基础知识(1)
Shiro入门学习 一 .什么是Shiro? 看一下官网对于 what is Shiro ? 的解释 Apache Shiro (pronounced “shee-roh”, the Japanese ...
- web前端零基础入门学习！前端真不难！
现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的 ...
- CTF入门学习5-> 前端JavaScript基础
Web安全基础 JavaScript的实现包括以下3个部分: 1)核心语法:描述了JS的语法和基本对象. 2)文档对象模型 (DOM):处理网页内容的方法和接口 3)浏览器对象模型(BOM):与浏览器 ...
- CTF入门学习2->Web基础了解
Web安全基础 00 Web介绍 00-00 Web本意是网,这里多指万维网(World Wide Web),是由许多互相连接的超文本系统组成的,通过互联网访问. Web是非常广泛的互联网应用,每天都 ...
- CTF入门学习3->Web通信基础
Web安全基础 01 Web通信 这个部分重点介绍浏览器与Web服务器的详细通信过程. 01-00 URL协议 只要上网访问服务器,就离不开URL. URL是什么? URL就是我们在浏览器里输入的站点 ...
- iOS Core Animation 动画 入门学习（一）基础
reference:https://developer.apple.com/library/ios/documentation/Cocoa/Conceptual/CoreAnimation_guide ...
随机推荐
- Java实现爬取京东手机数据
Java实现爬取京东手机数据 最近看了某马的Java爬虫视频,看完后自己上手操作了下,基本达到了爬数据的要求,HTML页面源码也刚好复习了下,之前发布两篇关于简单爬虫的文章,也刚好用得上.项目没什么太 ...
- 基于Hexo+Github Pages搭建的博客
概念 Github Pages可以被认为是用户编写的.托管在github上的静态网页.使用Github Pages可以为你提供一个免费的服务器,免去了自己搭建服务器和写数据库的麻烦.此外还可以绑定自己 ...
- docker采用registry部署简易仓库
解释:registry部署简易仓库,实现免密上传拉取镜像(解决不在一个容器里,也能够实现镜像拉取成功) 1.安装启动registry服务 docker pull registry docker run ...
- 熊猫分布密度制图（ArcPy实现）
一.背景 大熊猫是我国国家级珍惜保护动物,熊猫的生存必须满足一定槽域(独占的猎食与活动范围)条件.因此,科学准确的分析熊猫的分布情况,对合理制定保护措施和评价保护成效具有重要意义. 二.目的 通过练习 ...
- 单体应用 适合采用 dapr 构建吗？
缘起今天在微信群里有同学问 "纯.net 项目,有必要上dapr吗?" 当时不假思索的说不是微服务没必要,其他群友也说没必要.下午细想了一下,觉得这个和微服务没有关系,如果我的应用 ...
- bzoj1407,洛谷2421 NOI2002荒岛野人
题目大意: 克里特岛以野人群居而著称.岛上有排列成环行的M个山洞.这些山洞顺时针编号为1,2,-,M.岛上住着N个野人,一开始依次住在山洞C1,C2,-,CN中,以后每年,第i个野人会沿顺时针向前走P ...
- SpringBoot入门03-转发到Thymeleaf
前言 Spring Boot不提倡使用jsp和用View层,而是使用Thymeleaf代替jsp,因为性能可以得到提升. 使用Thymeleaf要加入依赖 Thymeleaf不能直接被访问,它严格遵守 ...
- Java和jmeter环境变量的配置来这就对了！
java环境变量设置 1.新建JAVA_HOME 变量 点击 新建按钮 变量名:JAVA_HOME 变量值:电脑上JDK安装的绝对路径 2.新建/修改 CLASSPATH 变量 如果存在 CLASSP ...
- 【数据结构与算法Python版学习笔记】树——平衡二叉搜索树（AVL树）
定义 能够在key插入时一直保持平衡的二叉查找树: AVL树 利用AVL树实现ADT Map, 基本上与BST的实现相同,不同之处仅在于二叉树的生成与维护过程 平衡因子 AVL树的实现中, 需要对每个 ...
- Convolutional Neural Network-week2编程题1（Keras tutorial - 笑脸识别）
本次我们将: 学习到一个高级的神经网络的框架,能够运行在包括TensorFlow和CNTK的几个较低级别的框架之上的框架. 看看如何在几个小时内建立一个深入的学习算法. 为什么我们要使用Keras框架 ...