#WEB安全基础 : HTML/CSS | 0x4HTML模块化

想让你的网页变得整洁吗?找我就对了,当然你会认识几个新元素,和它们交朋友吧! 我帮你联系一下这几个新元素,这样交朋友就变得简单了 images里放着图片以下是index.html的代码 <html> <head> <title>Sagway'n USA</title> </head> <style> q{  color: green; <!-…

#WEB安全基础 : HTML/CSS | 文章索引

#WEB安全基础 : HTML/CSS | 0x11 浅谈GET和POST

HTTP中的GET和POST请求方法我上次提到了GET和POST,现在就让你来认识一下这些新朋友请看图 POST和GET都是将用户输入到浏览器的数据发送给服务器,不过采用了两种不同的方式,POST会打包表单变量,在后台把它们发送到服务器,GET也会打包表单变量,但会把这些数据追加到URL上,然后向服务器发送一个请求要了解GET请求就要使用它试着把上次课的代码中的表单请求方法改成GET 这里我举一个例子以下是代码 <!DOCTYPE html> <html> <hea…

#WEB安全基础 : HTML/CSS | 0x10实现交互_表单

先看看表单如何工作吧请求响应简要工作流程: 浏览器加载页面用户输入数据用户提交表单服务器响应概念都清楚了,我们来写表单吧只有一个html文件这是显示你可以向空白框框里写一些东西,然后点击提交数据会发到web服务器的contest.php里,当然了,你也可以自己写一个php文件下面是index.htm的l代码 <!DOCTYPE html> <html> <head> <meta charset = "utf-8&q…

#WEB安全基础 : HTML/CSS | 0x9美丽的饮料店

我带着你,你带着钱,咱们去喝点饮料吧. 老板久仰你的大名,请你帮忙设计一个网站宣传他的饮料店你要制定一个完美的方案还需要多学点东西我先帮你设计一下这是存放网站的文件夹这是根目录这是about文件夹这是beverages文件夹存放CSS文件的文件夹(这是外部调用所以需要一个CSS文件,我们以前写的网页都是内部调用) 存放图片的images文件夹首先,我要展示我写的index.html 以下是代码 <!DOCTYPE html> <html> &…

#WEB安全基础 : HTML/CSS | 0x8CSS进阶

你以为自己学这么点CSS就厉害了? 学点新东西吧,让你的网页更漂亮我们只需要用到图片和网页这是index.html的代码 <html> <head> <title>Head First Lounge</title> </head> <style> body{ margin-left: 15%; margin-right: 15%; font-family: sans-serif; padding: 10px 10px 10px…

#WEB安全基础 : HTML/CSS | 0x7HTML5和W3C验证

标准,标准,什么都有标准你听说过HTML5吗?这是一个新版本,当然也有新标准我只准备了一个index.html文件以下是代码 <!DOCTYPE html>  <html> <head> <meta charset = "utf-8">  <title>TEST</title> <style…

#WEB安全基础 : HTML/CSS | 0x3文件夹管理网站

没有头脑的管理方式会酿成大灾难,应该使用文件夹管理网站这是一个典型的管理方法,现在传授给你,听好了下面是0x3初识a标签里使用的网站的目录,我把它重新配置了一下…

Web前端基础(5):CSS(二)

1. 盒模型在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.我们在这里重点讲标准模型. 1.1 盒模型示意图 1.2 盒模型的属性 width:内容的宽度 height: 内容的高度 padding:内边距,边框到内容的距离,padding的区域是有背景颜色的.并且背景颜色和内容的颜色一样.也就是说background-color这个属性将填充所有的borde…

#WEB安全基础 : HTML/CSS | 0x10.1更多表单

来认识更多的表单吧,增加知识面我只创建了一个index.html帮助你认识它们以下是代码 <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> </head> <body>  <form action = "" method = "POST"> <inpu…

#WEB安全基础 : HTML/CSS | 0x8.1CSS继承

CSS的一大特性——继承,怎么样没听说过吧,没了它我们修饰网页时就变得十足的麻烦这是本节课准备的文件这是others文件夹先看看index.html,代码如下 <!DOCTYPE html> <html lang ="zh"> <head> <meta charset = "utf-8"> <title>TEST</title> <style> p{ color: re…

#WEB安全基础 : HTML/CSS | 0x6嵌套标签(图片链接)

嵌套标签我们已经讲一次了,在0X4.1里,我们把列表嵌套了你觉得文字链接难看得令人作呕,好,你再也不会有这种感觉了一如既往,一个html文件和一个存放图片的文件夹 index.html的代码,很简单 <html> <head> <title>TEST</title> </head> <body> <p> <a href = "http://www.baidu.com/" title = &…

#WEB安全基础 : HTML/CSS | 0x5a标签拓展和class、id属性的使用

a标签不只是能链接到其他网页,也能链接到网页中的元素 class属性让你用CSS对特定的元素进行修饰这些是一个网页设计者的有力武器这节课还是一个index.html文件以下是代码 <html> <head> <title>TEST</title> </head> <style> h1.mh1{ color: green; } </style> <body> <a href = "htt…

#WEB安全基础 : HTML/CSS | 0x4.1嵌套列表

如果你认为列表只有ul和ol那你就错了我要为你展示新的列表这次只有一个index.html文件这是它的效果以下是它的代码 <html> <head> <title>TEST</title> </head> <body>  <p> 嵌套列表 </p> <ol> <!--在<ol>以内并且在<ul>以外的<li>属于有序…

#WEB安全基础 : HTML/CSS | 0x2初识a标签

教你点厉害玩意,尝尝HTML的厉害! 我为了这节课写了一些东西,你来看看…

#WEB安全基础 : HTML/CSS | 0x1初识CSS

"我受够这些难看的网页了,我怎么才能让它变得好看点?"你说. 我答道:"看来你得学点CSS了" 学习这些东西只有一个原则,就是用你的脑袋想,用你的眼睛看,用的你手敲.很简单,对吧? 这次我写了两个网页…

web前端基础——初识CSS

1 CSS概要 CSS(Cascading Style Sheets)称为层叠样式表,用于美化页面(单纯HTML写的页面只是网页框架和内容的组合,相当于赤裸的人,而CSS则是给赤裸的人穿上华丽的外衣),基本上所有的HTML页面都或多或少的使用了CSS. CSS在页面中存在的三种方式:元素内联.页面嵌入和外部引入(语法:style='key1:value1;key2:value2;') (1)标签内联:在HTML标签中使用 style='属性:属性值;' (2)页面嵌入: <st…

Web前端基础(6):CSS(三)

1. 定位定位有三种:相对定位.绝对定位.固定定位 1.1 相对定位现象和使用: 1.如果对当前元素仅仅设置了相对定位,那么与标准流的盒子什么区别. 2.设置相对定位之后,我们才可以使用四个方向的属性: top.bottom.left.right. 特性:1.不脱标 2.形影分离 3.老家留坑所以说相对定位在页面中没有什么太大的作用.影响我们页面的布局.我们不要使用相对定位来做压盖效果用途: 1.微调元素位置 2.做绝对定位的参考(父相子绝)绝对定位会说到此内容. 1.2 绝对定位…

Web前端基础(4):CSS(一)

1. CSS介绍现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. 接下来我们要讲一下为什么要使用CSS. 1.1 HTML的缺陷不能够适应多种设备要求浏览器必须智…

Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没有学习过JavaScript(jQuery),这个学期重新学习了一遍之前学习过的又学了些脚本语言.结合自己平时有点编程基础,学起来也挺快了,作为学期作业(自定任务),我尝试着去实现360极速浏览器的新标签页(刚开始也没有很好的想法,自己一直比较喜欢360极速浏览器'不是下广告',学校机房也没有联网,本来还想做…

#WEB安全基础：HTML/CSS | 0x0 我的第一个网页

#WEB安全基础:HTML/CSS系列,本系列采用第二人称以免你不知道我在对着你说话,以朋友的视角和你交流 HTML的中文名叫做超文本标记语言,CSS叫做层叠样式表用HTML设计你的第一个网页,你需要做的是用你的眼睛看,用你的手敲. 以下就是代码,我已经帮你设计好了 <html> <head>  <title>Head First Lounge</title> <!--浏览器标签上显示的文本--&…

进击的Python【第十三章】：Web前端基础之HTML与CSS样式

进击的Python[第十四章]:Web前端基础之HTML与CSS样式一.web框架的本质众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf-8 import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n")…

前端总结·基础篇·CSS（一）布局

目录这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) & 块元素(block) 1.3 行内块元素(inline-block IE8+ IE6-7/tools) 1.4 flex(IE11+ IE10/-ms-) 1.5 none 二.位置(position) 三.补充 3.1 浮动(float) 3.2 层叠(z-index) 3.3 溢出(overflow…

前端总结·基础篇·CSS（二）视觉

前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充前端总结·基础篇·CSS(四)兼容目录一.动画(animation)(IE10+)(CSS3) 1.1 定义动画 1.2 引用动画 1.3 多个动画 1.4 更多属性二.过渡(transition)(IE10+)(CSS3) 2.1 定义首尾 2.2 应用过渡 2.3 多个过渡 2.4 更多属性三.转换(transform)(IE10+,-ms-,-webkit-,-…

6. web前端开发分享-css,js移动篇

随着移动市场的逐步扩大及相关技术的日趋完善,对前端开发提出了新的岗位要求,在继承前人成果的基础上需要在新的历史条件下有新的创新.移动端的开发,虽然没有IE6众多问题的折磨,但是多平台,多设备的兼容,也是如恶梦般存在.不过话说回来,着重还是考验基础的css 2.x的功底,只要基础扎实了,应付移动端的兼容也是手到擒来.当然css3.x, html5新增加的标签还是需要学习,具体的推荐: 一. css 1). 响应式web设计 http://book.douban.com/subject/203903…

从css谈模块化

模块化是现今我们随处都可以听到的一个名词,什么是模块化?为什么我们需要模块化?这是本系列文章我们要弄明白的一个问题.我们也借这部分内容,顺带回顾一下前端的发展历程. 说实话,模块化这个主题有点大,我一时也不知道从哪里讲起比较合适,通常来说,前端的工作内容主要涉及三个方面:html.css.js(javascript),其他的像as(actionscript,flash的脚本语言).jsp.smarty等等模版类的语法标记我们在此就先略去了,因为不是特别重要.那我们所说的模块化也可以分别当成这三条…