前端静态资源HTML 搭建基础网页，展示页面内容CSS 美化页面JavaScript动态资源JSP/ServletHTML(Hyper Text Markup Language)超文本：用超链接连接网络资源标记语言：由标签构成的语言 html xml<标签名 a="5"> 标签体 </标签名>标签对大小写不敏感，建议小写<head><meta charset="UTF-8"/> -- 告诉浏览器用什么方式解码</head><body/>里面写什么？文本标签(排版类标签)注释 <!-- 注释内容 --><br/><hr/><h1></h1>标题标签 一共6个级别，自动换行<p></p> 段落标签常用属性color：可以用red 、green表示推荐用#ffffff表示width：width='20' 默认代表像素width="50%" 占比，相对于父元素的比例html怎样显示特殊字符图片标签<img src="xxx.jpg" align="" alt="古镇" />相对路径以.开头./代表当前目录 如果什么都不写，默认就是./../代表上级目录列表标签有序列表<ol type="A" start="5"> order list <li>默认显示数字编号type属性设置按什么序号排列，默认是数字无序列表<ul type="circle"> <li>默认小圆点，依然有序，但是没编号type属性设置小圆点的样式超链接标签<a > 这是一个超链接 </a><a href="./hello.html" target="_self"> 这是一个超链接 </a>本页面跳转<a href="mailto:xxx@qq.com" target="_blank"> 这是一个超链接 </a>新页面跳转<a href="xxx"><img src="" /></a>块标签：将多个标签设为一个整体，搭配css使用<span></span> 行内标签 内联标签 在行内使用<div></div> 每一个div占满一整行 块级标签语义化标签（H5）了解即可<header></header><div></div><footer></footer>使用起来和div一样表格标签<table border="" width="80%" cellpadding="" cellspacing="" bgcolor="" align="">width占页面宽度的百分比<tr><td><th> (<th>是代替<td>的，不是代替<tr>的)表格其他标签 了解即可<caption> 表格标题一下三个只为增加可读性，类似语义化标签<thead><tbody><tfoot>合并单元格的操作<td rowspan="2"><td colspan="2">善于使用表格嵌套而不是合并单元格完成复杂样式的表格，可读性强Ctrl+F快捷键批量修改表单标签 <form></form>在html页面中，那些可以被点击、选中、填写的元素都可以称之为表单标签采集用户输入数据用来和服务器进行交互。 表单标签 ——划分一个范围，在范围之内的表单项可以被提交给服务器 <form action="xxx" method="get">...</form> 属性： action="url" 指定提交数据的url method="get/post" 指定提交方式 (默认是get，一共有7种方式，只有2种常用) get:请求参数会在地址栏中显示，会封装在请求行中 url的长度是有限制的 不安全 post:请求参数不会在地址栏中显示，会封装在请求体中 url长度没有限制 安全 表单项标签 表单项必须指定name属性才能被提交 <input> 例如：用户名：<input name="username" /> <input type="submit" value="登录" /> //登录按钮 属性 type="text" (默认是text) placeholder="请输入用户名": 指定输入框的提示信息 type="password" 密码输入框，密文显示 type="radio" 单选框 注：①想让多个单选框实现效果，多个单选框name必须一致 ②value属性用来指定参数的值，如果不写value默认如果勾选默认值是on ③使用checked="checked"指定默认值 type="checkbox" 注意事项同上，要指定参数的name和value， <label>用户名：</label>标签 for属性和<input>标签的id属性对应，点击文字获得输入框焦点 type="file" type="hidden" type="submit" type="button" 配合JS使用 type="image" src="url" 也是一个按钮，用来提交表单H5新特性： type="color" 取色器 type="date" type="datetime-local" type="email" type="number" <select> <select name="xxx"> <option value="1">aaa</option> <optionvalue="2">bbb</option> </select> 注意，如果不指定value，会提交<option>标签中文字的值 同样可以使用selected指定默认选择的值 <textarea> <textarea cols="1" rows="2" name="xxx"></textarea> CSS (Cascading Style sheets)多个样式可以作用在同一个html元素上，同时生效好处： 功能强大 将内容的展示和样式控制分离 降低耦合度(解耦)，让分工协作更容易，提高开发效率使用：如何与html结合
1. 内联样式（不推荐）
在标签内使用style属性使用css代码 2. 内部样式
在head标签内，定义style标签，标签体内就是CSS代码<style> div{ color:green; }</style> 3. 外部样式
1. 定义css资源文件
2. 在head标签内，定义link标签引入css文件
<link rel="stylesheet" href="xxx.css">
三种样式的权重内联样式>内部样式=外部样式 （内部和外部按代码的执行先后顺序确定优先级）CSS语法选择器{ 属性名1：属性值1； 属性名2：属性值2； ...}什么是选择器？1、基础选择器
1. id选择器：选择具体的id属性值的元素 #id属性值{...} 建议id值唯一
2. 元素选择器：选择具有相同标签名称的元素 标签名{...}
3. 类选择器：选择具有相同class属性值的元素 .class属性值{...}
优先级：id选择器>类选择器>元素选择器
2、扩展选择器
1. 选择所有元素：*{...}
2. 并集选择器：选择器1，选择器2{...}
3. 后代选择器：选择器1 选择器2{...} 所有只要2是1的后代就会有作用
4. 子选择器：选择器1>选择器2{...} 只有2是1的子元素才会有作用
5. 属性选择器：input[type="text"]{...}
6. 伪类选择器：选择同样状态的元素（了解）元素:状态{...}
样式属性：(了解) font-size:30px; color:#FF0000; text-align:center; line-height:100px; border: 1px solid red; height: width: background: 盒子模型：控制布局 margin:外边距 padding:内边距 内外边距是相对的概念 内边距会影响整个盒子的大小 解决方法box-sizing:border-box; float:浮动 浮动，意味着脱离当前文档流，上升一层，班长飘到天花板上 clear:both清理浮动JavaScript JavaScript = ECMAScript+BOM+DOMECMAScript 基本语法BOM 浏览器对象模型DOM 文档对象模型
后两者是JS定义好的对象，直接使用即可
URL编码
在文字编码后的每一个字节前加一个%，一个字节用两位16进制表示
URL编码=GBK/UTF-8 + %
URL编码只是将已有的编码方式得到的字节码加上%而已，具体编码由页面指定的编码方式决定，GBK一个汉字占2字节，UTF-8一个汉字占3字节
|
|
