江苏泰州海陵区建设局网站,wordpress调用分类标签,企业门户网站管理制度,青岛建设网站的公司概述
HTML(HyperText Markup Language) 不是一门编程语言#xff0c;而是一种用来告知浏览器如何组织页面的标记语言。
HTML 可复杂、可简单#xff0c;一切取决于开发者。它由一系列的元素组成#xff0c;这些元素可以用来包围不同部分的内容#xff0c;使其以某种方式呈…概述
HTML(HyperText Markup Language) 不是一门编程语言而是一种用来告知浏览器如何组织页面的标记语言。
HTML 可复杂、可简单一切取决于开发者。它由一系列的元素组成这些元素可以用来包围不同部分的内容使其以某种方式呈现或者工作。 一对标签可以为一段文字或者一张图片添加超链接将文字设置为斜体改变字号等等
一个元素 元素的主要部分有
开始标签Opening tag包含元素的名称本例为 p被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。结束标签Closing tag与开始标签相似只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误这可能会产生一些奇怪的结果。内容Content元素的内容本例中就是所输入的文本本身。元素Element开始标签、结束标签与内容相结合便是一个完整的元素。
块级元素
块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中但可以嵌套在其它块级元素中。
p第四/pp第五/pp第六/p
效果 属性
一个属性必须包含如下内容
在元素和属性之间有个空格space (如果已经有一个或多个属性就与前一个属性之间有一个空格.)属性后面紧跟着一个“”符号.有一个属性值,由一对引号“ ”引起来.
href: 这个属性声明超链接的web地址当这个链接被点击浏览器会跳转至href声明的web地址。例如href***/。title: 标题title属性为超链接声明额外的信息比如你将链接至那个页面。例如title***。当鼠标悬浮时将出现一个工具提示。target: 目标target属性用于指定链接如何呈现出来。例如target_blank将在新标签页中显示链接。如果你希望在目前标签页显示链接只需忽略这个属性。
布尔
有时你会看到没有值的属性它是合法的。这些属性被称为布尔属性他们只能有跟它的属性名一样的属性值。
!-- 使用disabled属性来防止终端用户输入文本到输入框中 --
input typetext disabled!-- 下面这个输入框没有disabled属性所以用户可以向其中输入 --
input typetext 单引号或者双引号
在目前为止本章内容所有的属性都是由双引号来包裹。也许在一些HTML中你以前也见过单引号。这只是风格的问题你可以从中选择一个你喜欢的。以下两种情况都可以
a hrefhttp://www.example.com示例站点链接/aa hrefhttp://www.example.com示例站点链接/a
但你应该注意单引号和双引号不能在一个属性值里面混用。下面的语法是错误的
a hrefhttp://www.example.com示例站点链接/a
HTML结构
!DOCTYPE html
htmlheadmeta charsetutf-8title我的测试站点/title/headbodyp这是我的页面/p/body
/html !DOCTYPE html: 声明文档类型. 很久以前早期的HTML(大约1991年2月)文档类型声明类似于链接规定了HTML页面必须遵从的良好规则能自动检测错误和其他有用的东西。使用如下 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 然而现在没有人再这样写需要保证每一个东西都正常工作已成为历史。你只需要知道!DOCTYPE html是最短的有效的文档声明。html/html: html元素。这个元素包裹了整个完整的页面是一个根元素。head/head: head元素. 这个元素是一个容器它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述CSS样式字符集声明等等。以后的章节能学到更多关于head元素的内容。meta charsetutf-8: 这个元素设置文档使用utf-8字符集编码utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它并且它能在以后避免很多其他问题。title/title: 设置页面标题出现在浏览器标签上当你标记/收藏页面时它可用来描述页面。body/body: body元素。 包含了你访问页面时所有显示在页面上的内容文本图片音频游戏等等。空白
代码中包含的空格是没有必要的下面的两个代码片段是等价的
p狗 狗 很 呆 萌。/pp狗 狗 很呆 萌。/p
渲染这些代码的时候HTML解释器会将连续出现的空白字符减少为一个单独的空格符。
那么为什么我们会使用那么多的空白呢? 可读性 —— 如果你的代码被很好地进行格式化那么就很容易理解你的代码。 特殊字符
原义字符等价字符引用lt;gt;quot;apos;amp;注释
为了将一段HTML中的内容置为注释你需要将其用特殊的记号!--和--包括起来 比如
p我在注释外/p!-- p我在注释内/p --
头部
HTML 头部是包含在head 元素里面的内容。不像 body元素的内容会显示在浏览器中head 里面的内容不会在浏览器中显示它的作用是包含一些页面的元数据。
元数据
元数据就是描述数据的数据而HTML有一个“官方的”方式来为一个文档添加元数据—— meta 。有很多不同种类的 meta 可以被包含进你的页面的head元素比如。
指定字符的编码
meta charsetutf-8
这个元素简单的指定了文档的字符编码 —— 在这个文档中被允许使用的字符集。 utf-8 是一个通用的字符集它包含了任何人类语言中的大部分的字符。
添加作者和描述
name 指定了meta 元素的类型 说明该元素包含了什么类型的信息。content 指定了实际的元数据内容。
CSS和JavaScript
如今几乎你使用的所有网站都会使用css让网页更加炫酷使用js让网页有交互功能比如视频播放器地图游戏以及更多功能。这些应用在网页中很常见它们分别使用link元素以及 script 元素。 link元素经常位于文档的头部。这个link元素有2个属性relstylesheet表明这是文档的样式表而 href包含了样式表文件的路径 link relstylesheet hrefmy-css-file.css script部分没必要非要放在文档头部实际上把它放在文档的尾部在 /body标签之前是一个更好的选择这样可以确保在加载脚本之前浏览器已经解析了HTML内容如果脚本加载某个不存在的元素浏览器会报错。
script srcmy-js-file.js/script
标题和段落 在HTML中每个段落是通过p元素标签进行定义的, 比如下面这样
p我是一个段落千真万确。/p
每个标题Heading是通过“标题标签”进行定义的
h1我是文章的标题/h1
这里有六个标题元素标签 —— h1、h2、h3、h4、h5、h6。每个元素代表文档中不同级别的内容; h1 表示主标题the main headingh2 表示二级子标题subheadingsh3 表示三级子标题sub-subheadings等等。
列表
olli先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀调成“腌料”鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀腌渍半小时。/lili用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀调成“综合调味料”。/lili鸡丁腌好以后色拉油下锅烧热先将鸡丁倒入锅内用大火快炸半分钟炸到变色之后捞出来沥干油汁备用。/lili在锅里留下约两大匙油烧热后将切好的干辣椒下锅用小火炒香后再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅用大火快炒片刻后再倒入“综合调味料”继续快炒。ulli如果你采用正宗川菜做法最后只需加入花生米炒拌几下就可以起锅了。/lili如果你在北方可加入黄瓜丁、胡萝卜丁和花生米翻炒后起锅。/li/ul/li
/ol 标记
i 被用来传达传统上用斜体表达的意义外国文字分类名称技术术语一种思想…… b 被用来传达传统上用粗体表达的意义关键字产品名称引导句…… u 被用来传达传统上用下划线表达的意义专有名词拼写错误……
strong强调重要的词
超链接
通过将文本转换为a元素内的链接来创建基本链接 给它一个href属性也称为目标它将包含您希望链接指向的网址。
pIm creating a link to
a hrefhttps://www.***.com/***/a.
/p
使用title属性添加支持信息
pIm creating a link to
a hrefhttps://www.baidu.comtitle这是百度百度/a.
/p Im creating a link to 百度.
块级链接
可以将一些内容转换为链接甚至是块级元素。例如你想要将一个图像转换为链接你只需把图像元素放到a/a标签中间。
文档片段
超链接除了可以链接到文档外也可以链接到HTML文档的特定部分被称为文档片段。要做到这一点你必须首先给要链接到的元素分配一个id属性。例如如果你想链接到一个特定的标题可以这样做
h2 idMailing_addressMailing address/h2
然后链接到那个特定的id可以在URL的结尾使用一个哈希符号#指向它例如
pWant to write us a letter? Use our a hrefcontacts.html#Mailing_addressmailing address/a./p
你甚至可以在同一份文档下通过链接文档片段来链接到同一份文档的另一部分
pThe a href#Mailing_addresscompany mailing address/a can be found at the bottom of this page./p
表单
!DOCTYPE html
html langen
headmeta charsetUTF-8title增加学生/title
/head
bodyform methodpost action/community/alpha/studentp姓名input typetext namename/pp年龄input typetext nameage/ppinput typesubmit value保存/p/form
/body
/html 后台 //postRequestMapping(path /student,method RequestMethod.POST)ResponseBodypublic String saveStudent(String name,int age){System.out.println(name);System.out.println(age);return success;}
大部分用来定义表单小部件的元素都有一些他们自己的属性。然而在所有表单元素中都有一组通用属性它们可以对这些小部件进行控制。下面是这些通用属性的列表: 属性名称默认值描述autofocus(false)这个布尔属性允许您指定当页面加载时元素应该自动具有输入焦点除非用户覆盖它例如通过键入不同的控件。文档中只有一个与表单相关的元素可以指定这个属性。disabled(false) 这个布尔属性表示用户不能与元素交互。如果没有指定这个属性元素将从包含它的元素继承设置例如fieldset;如果没有包含在设定了disabled属性的元素里那么这个元素就是可用的。 form 小部件与之相关联的表单元素。属性值必需是同个文档中的form 元素的 id属性。理论上它允许您在form元素之外设置一个表单小部件。然而在实践中没有任何支持该特性的浏览器。 name 元素的名称;这是跟表单数据一起提交的。value 元素的初始值。
密码框
通过设置type属性值为password来设置该类型框
input typepassword idpwd namepwd 搜索框
通过设置 type属性值为 search 来设置该类型框
input typesearch idsearch namesearch
电话号码栏
通过 type属性的 tel 值设置该类型框
input typetel idtel nametel
URL 栏
通过type属性的url 值设置该类型框
input typeurl idurl nameurl 多行文本框
多行文本框专指使用textarea元素而不是使用input元素。
textarea cols30 rows10/textarea
按钮
在HTML表单中有三种按钮
Submit
将表单数据发送到服务器。对于button元素, 省略 type 属性 (或是一个无效的 type 值) 的结果就是一个提交按钮.
Reset
将所有表单小部件重新设置为它们的默认值。
Anonymous
没有自动生效的按钮但是可以使用JavaScript代码进行定制。 每次向服务器发送数据时都需要考虑安全性。到目前为止HTML表单是最常见的攻击路径(可能发生攻击的地方)。这些问题从来都不是来自HTML表单本身它们来自于服务器如何处理数据。
根据你所做的事情你会遇到一些非常有名的安全问题
XSS 和 CSRF
跨站脚本(XSS)和跨站点请求伪造(CSRF)是常见的攻击类型它们发生在当您将用户发送的数据显示给这个用户或另一个用户时。
XSS允许攻击者将客户端脚本注入到其他用户查看的Web页面中。攻击者可以使用跨站点脚本攻击的漏洞来绕过诸如同源策略之类的访问控制。这些攻击的影响可能从一个小麻烦到一个重大的安全风险。
CSRF攻击类似于XSS攻击因为它们以相同的方式开始攻击——向Web页面中注入客户端脚本——但它们的目标是不同的。CSRF攻击者试图将权限升级到特权用户(比如站点管理员)的级别以执行他们不应该执行的操作(例如将数据发送给一个不受信任的用户)。
XSS攻击利用用户对web站点的信任而CSRF攻击则利用网站对其用户的信任。
为了防止这些攻击您应该始终检查用户发送给服务器的数据(如果需要显示)尽量不要显示用户提供的HTML内容。相反您应该对用户提供的数据进行处理这样您就不会逐字地显示它。当今市场上几乎所有的框架都实现了一个最小的过滤器它可以从任何用户发送的数据中删除HTMLscript、iframe 和object元素。这有助于降低风险但并不一定会消除风险。
SQL注入
SQL 注入是一种试图在目标web站点使用的数据库上执行操作的攻击类型。这通常包括发送一个SQL请求希望服务器能够执行它通常发生在应用服务器试图存储由用户发送的数据时。这实际上是攻击网站的主要途径之一。
其后果可能是可怕的从数据丢失到通过使用特权升级控制整个网站基础设施的攻击。这是一个非常严重的威胁您永远不应该存储用户发送的数据而不执行一些清理工作(例如在php/mysql基础设施上使用mysql_real_escape_string()
HTTP数据头注入和电子邮件注入
这种类型的攻击出现在当您的应用程序基于表单上用户的数据输入构建HTTP头部或电子邮件时。这些不会直接损害您的服务器或影响您的用户但它们会引发一个更深入的问题例如会话劫持或网络钓鱼攻击。
这些攻击大多是无声的并且可以将您的服务器变成僵尸。
偏执:永远不要相信你的用户
那么你如何应对这些威胁呢?这是一个远远超出本指南的主题不过有一些规则需要牢记。最重要的原则是:永远不要相信你的用户包括你自己即使是一个值得信赖的用户也可能被劫持。
所有到达服务器的数据都必须经过检查和消毒。总是这样。没有例外。
远离有潜在危险的字符转义。应该如何谨慎使用的特定字符取决于所使用的数据的上下文和所使用的服务器平台但是所有的服务器端语言都有相应的功能。限制输入的数据量只允许有必要的数据。沙箱上传文件(将它们存储在不同的服务器上只允许通过不同的子域访问文件或者通过完全不同的域名访问文件更好)。
