Web安全——HTML基础

HTML

  • 一、对于前端以及后端的认识以及分析
  • 二、HTML认知
    • 1、网页的组成
    • 2、浏览器
    • 3、Web标准
  • 三、简单的HTML页面架构
  • 四、HTML常见标签
    • 1、meta标签
    • 2、标题标签
    • 3、文本属性
    • 4、form表单
    • 5、a 标签
    • 6、锚文本
    • 7、img 标签
    • 8、table 表格
    • 9、列表标签
      • 9.1、无序列表
      • 9.2、有序列表
    • 10、框架的使用

一、对于前端以及后端的认识以及分析

1、前端与后端的认识

  • 前端: 客户端开发
  • 后端: 服务器端开发

2、前端后端区别

  • 技能
    前端:Web开发者余姚掌握HTML,CSSJavaScript
    后端:开发者需要懂数据库,服务器,API等等
  • 职责
    前端:开发者负责设计网站的外观
    后端:开发者负责构建数据库架构,为前端提供支持
  • 独立性
    前端:不能作为单独的服务提供,除非它是一个静态的网站
    后端:可以作为BaaS(后端即服务,Backend as a Service)提供
  • 目标
    前端:开发者的目标是确保所有用户都可以访问网站或App
    后端:开发者的目标是围绕前端开发应用程序,并为前端提供支持,并确保整个网站或App正常运行
  • 编程语言
    前端:HTML,CSS,JavaScript
    后端:PHP,Python,SQL,Java,Ruby,NET,Perl
  • 开发框架
    前端:Angular.JS、React.JS、Backbone.JS、Vue.JS、Sass、Ember.JS、NPM
    后端:Laravel、CakePHP、Epress、Codelgnier、Ruby on Rails、Pylon、ASP.NET
  • 数据库
    前端:本地存储、核心数据、SQLite、Cookie、会话
    后端:MySQL、Casandra、PostgreSQL、MongoDB、Oracle、Sybase、SQL Server
  • 服务器
    后端:Ubuntu、Apache、Nginx、Linux、Windows

二、HTML认知

1、网页的组成

网页由文字,图片,音频,视频,超链接组成
网页背后的本质为前端程序员写的代码,通过浏览器进行译处理,浏览器转化(解析以及渲染)

2、浏览器

1、浏览器的定义
	浏览器:是网页显示以及运行的平台,是前端开发的必备利器
2、五大浏览器:IE、火狐、谷歌、Safari浏览器、Opera浏览器
3、浏览器市场份额为谷歌占由率高,60-70%
4、渲染引擎(了解)
	(1)、渲染引擎(浏览器内核):浏览器中专门对代码进行解析渲染的部分
	(2)、浏览器以及其内核
		浏览器IE,内核Trident,IE、猎豹安全、360极速浏览器、百度浏览器
		浏览器FireFox、内核Gecko、火狐浏览器内核
		浏览器Safari、内核Webkit、苹果浏览器内核
		浏览器Chrome、内核Blink、Blink其实是Webkit的分支
	(3)、渲染引擎不同,导致解析相同代码时的速度、性能、效果也不同

3、Web标准

1、构成以及标准
	(1)、结构
		HTML
			页面元素和内容
	(2)、表现
		CSS
			页面元素的外观和位置等页面样式(如:颜色、大小等)
	(3)、行为
		JavaScript
			页面模型的定义与页面交互
2、要求页面实现
	结构、表现、行为三层分离

三、简单的HTML页面架构

HTML超文本标记语言)模板框架是用于构建网页的标准模板。
全称:Hyper Text Markup Language

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
	body>
html>

charset 编码 gbk gbk2312 utf-8

保存内容的快捷方式为 ctrl+s
同时,我这里使用的开发工具HBuilder
开发工具有:
Visual Studio Code、Webstorm、Sublime、Dreamweaver、Hbuilder
新建HTML文件即可加载出模板,或者输入h然后输出8回车。
Web安全——HTML基础_第1张图片
网页的整体

  • html标签

网页的头部

  • head标签

网页的身体

  • body标签

网页的标题

  • title标签

对HTML模板的解读:
文档类型声明DOCTYPE):HTML文件始于文档类型声明,它指示浏览器当前页面使用的HTML版本。例如,HTML5版本的声明为:。
html 标签: 此标签是HTML文档的根元素,包含整个HTML文件的内容。

  • head 标签:在html标签内,head标签包含关于页面的元信息,如文档标题、字符编码、样式表链接等。对于浏览器显示页面时的非主要内容。
    • meta 标签: 用于定义字符集(<meta charset="UTF-8">),SEO优化关键字(<meta name="keywords" content="your_keywords">),以及描述文本(<meta name="description" content="your_description">)
    • title 标签:定义文档的标题,显示在浏览器标签页上。
    • link 标签:用于引入外部资源,如样式表(<link rel="stylesheet" href="styles.css">)
    • script 标签:用于引入外部的JavaScript文件(<script src="myscripts.js"></script>)或直接插入JavaScript代码
  • body 标签:html标签内,body标签是主要内容部分,包含页面上可见的所有元素,如文本、图像、链接、表格等。
    • 结构性标签div、header、nav、section、article、aside、footer等):这些标签用于组织文档内容的结构,方便开发者和浏览器理解网页的布局。
    • 文本标签h1-h6、p、strong、em、ul、li等):这些标签用于格式化文本内容,增强页面的可读性。
    • 超链接a 标签):超链接用于导航到其他页面、文件或电子邮件地址。
    • 表单元素form、input、textarea、button等):这些标签用于创建用户输入表单,收集和发送用户数据。
    • 多媒体元素img、video、audio):这些标签可用于嵌入图像、视频、音频等内容,提升页面的交互性和多媒体体验。
    • 表格元素table、tr、td、th):用于显示数据表格。

为了获得更好的页面样式和布局,通常还需要引入CSS层叠样式表)和JavaScript技术。

四、HTML常见标签

1、HTML标签的构成

  • 标签由<、>、/、英文单词或字母组成,并且把标签中<>包括起来的英文单词或字母称为标签名。
  • 常见标签由两部分组成,我们称之为:双标签,前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容。
  • 少数标签由一部分组成,我们称之为:单标签,自成一体,无法包裹内容。

2、HTML标签的关系

  • 嵌套关系
  • 并列关系

1、meta标签

元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

设置网站关键字
meta name="keywords" content="网络安全,WEB渗透,数据安全,渗透测试,安全培训" />
标签定义文档与外部资源的关系。

你可能感兴趣的:(Web安全,web安全,html,安全,网络,前端)