前端基础复习之HTML
1.web基础知识
1 1、Web基础知识 2 1、Internet 3 1、简介 4 Internet 实际上就是由计算机所组成的网络结构 5 6 服务： 7 1、Telnet 8 远程登录 9 2、Email 10 电子邮件 11 3、WWW 12 万维网服务，World Wide Web 13 4、BBS 14 电子公告板 (论坛) 15 百度贴吧，天涯论坛，... ... 16 CSDN ... ... 17 5、FTP 18 文件传输协议 19 20 基本实现技术： 21 1、分组交换原理 22 将传递的数据 拆分成若干数据包 23 2、TCP/IP协议 24 2、Web 25 Web ：运行在Internet上的最流行的应用 26 WWW : World Wide Web 27 W3C : World Wide Web Consortium(万维网联盟) 28 29 将 各类信息 以及 服务 进行无缝连接： 30 信息：文字，图像，音频，视频，文件 31 服务：BBS，Telnet，Email 32 3、Web的工作原理 33 WEB是 基于 浏览器 / 服务器 模式的程序(B/S) 34 B : Browser 浏览器 35 S : Server 服务器 36 37 基于 客户端 / 服务器 模式的程序(C/S) 38 C : Client 客户端 39 S : Server 服务器 40 必须通过指定的客户端才能访问服务器数据的一种模式 41 由Web服务器，浏览器 以及 通信协议 来组成 42 服务器：提供服务的机器 43 浏览器：工具 44 通信协议：web中使用的时http通信协议 45 http: Hyper Text Transfer Protocol 46 超级 文本 传输 协议 47 规范了 48 数据是如何打包的 49 数据是如何传递的 50 1、Web服务器 51 功能： 52 1、存储Web上内容信息 53 2、接收客户端请求，并给出响应 54 3、具备一定的安全功能 55 产品： 56 1、Tomcat 57 2、Apache 58 3、IIS 59 ... ... 60 2、WEB浏览器 61 功能: 62 1、代替用户提交请求(User Agent) 63 2、作为HTML/CSS/Javascript 的解析器 64 3、以图像化的方式显示网页文档 65 产品: 66 1、Microsoft IE 67 2、Mozilla FireFox 68 3、Google Chrome 69 4、Apple Safari 70 5、Opera 71 4、Web相关技术 72 1、服务器端技术 73 运行于服务器端，具备访问数据库的能力 74 75 1、PHP 76 2、JSP 77 3、ASP 78 4、ASP.NET 79 5、Python 80 6、NodeJS 81 2、浏览器端技术(客户端) 82 运行在客户端，由浏览器负责解释 83 1、HTML 84 2、CSS 85 3、JavaScript(JS)
2.HTML入门
1 2、HTML入门 2 1、HTML概述 3 Web : 一种应用 4 HTML是开发Web网页程序的一种语言 5 6 1、什么是HTML 7 HTML：Hyper Text Markup Language 8 超级 文本 标签 语言 9 超级文本：具备超能力的文本 10 字符 a ：首字符 11 超文本 a ：链接 12 标签/标记：超文本的组成形式 13 语言：具备不同的语法规范 14 由HTML编写的文本最终是以 .html 或 .htm作为结尾的文件 , 并且由浏览器解释运行 15 2、HTML语法规范(重点) 16 1、标记 17 在HTML中，用于描述功能的符号称之为 "标记" 18 19 语法： 20 标记在书写时，必须用 尖括号 括起来(<>) 21 标记分成 封闭类型的标记 和 非封闭类型的标记 22 1、封闭类型标记 23 必须成对出现 24 <标记> 内容 </标记> 25 注意： 26 1、封闭类型标记必须成对出现 27 2、标记必须要完整,否则会有意想不到的效果 28 29 2、非封闭类型标记 30 又称为 单标记 或 空标记 31 <标记> 或 <标记/> 32 ex : 33 <br> : 换行 34 <hr/>: 水平线 35 2、元素 36 元素 即 标记 37 ex: 38 <a>百度</a> 39 40 1、元素的嵌套 41 元素之间可以相互嵌套，形成更为复杂的页面结构 42 语法： 43 <标记><标记1></标记1></标记> 44 注意： 45 1、注意嵌套顺序 46 2、必须完整嵌套 47 3、格式问题 48 被嵌套的内容要通过缩进(Tab)表示层级关系 49 ex: 50 <a><b><span><i><u>Hello World</u></i></span></b></a> 51 推荐的格式： 52 <a> 53 <b> 54 <span> 55 <i> 56 <u> 57 Hello World 58 </u> 59 </i> 60 </span> 61 </b> 62 </a> 63 2、属性 和 值 64 属性 是用来修饰 元素的 65 语法： 66 1、属性的声明必须位于开始标记中 67 2、属性名称与标记名称之间用空格隔开 68 <标记 属性></标记> 69 <标记 属性/> 70 3、属性值 与 属性之间 用 "=" 来连接 71 属性值要用 "" 或 '' 引起来 72 <标记 属性="值"> 73 4、一个元素允许有多属性，多属性之间排名不分先后，中间用 空格 隔开 74 <标记 属性1="值" 属性2="值"> 75 76 ex: 77 <p align="center" id="p1"></p> 78 79 通用属性：大部分元素都会具备的属性 80 1、id 81 定义元素在页面中独一无二的名称 82 2、title 83 鼠标移入到元素上时所提示的信息 84 3、class 85 指定元素所引用的类选择器(CSS中使用) 86 4、style 87 定义元素的内联样式(css中使用) 88 3、注释 89 要编写在源文档中，但不想被浏览器解释运行的内容 90 <!-- 注释 --> 91 注意： 92 1、注释不能嵌套 93 <!-- 94 这是一段注释 95 <!-- 96 这是另一段注释 97 --> 98 --> 99 以上结构是错的 100 2、注释不能出现在标记(<>)里 101 <a <!-- 这是一个a -->></a> 102 以上的写法是错误的 103 3、文档结构 104 1、两部分组成 105 1、文档类型声明 106 指定当前html文档用的时哪个版本 107 语法： 108 文档中的第一句话位置处 109 <!doctype html> 110 2、html页面 111 网页要表示的信息的开始与结束 112 语法： 113 <html></html> 114 属性： 115 1、lang 116 取值：zh-cn 117 子级内容： 118 1、网页头部信息 119 作用：用于定义网页的全局信息 120 语法： 121 <head></head> 122 子级： 123 1、网页标题 124 <title>标题内容</title> 125 2、网页元数据 126 指定网页编码格式 127 <meta charset="utf-8"> 128 注意： 129 必须保证网页文档的编码格式也是 utf-8 的 130 131 2、网页主体信息 132 包含要显示给用户去看的所有内容 133 <body></body> 134 属性： 135 1、text 136 作用：控制当前文档的文本颜色 137 取值：颜色的英文表示方式 138 2、bgcolor 139 作用：控制当前文档的背景颜色 140 取值：同上
3.文本
1 3、文本 2 1、作用 3 以不同的形式展现文字 4 2、特殊字符 5 默认下，任意多个 回车 和 空格 最后都会被折叠成一个空格 6 通过转义字符表示特殊字符： 7 1、 8 一个空格 9 2、> 10 > 11 3、< 12 < 13 4、© 14 © 15 5、¥ 16 ￥ 17 3、文本标记 18 1、文本样式 19 <i>内容</i> 斜体显示文本 20 <u>内容</u> 下划线的文本 21 <s>内容</s> 删除线的文本 22 <b>内容</b> 加粗显示文本 23 <sub></sub> 下标 24 <sup></sup> 上标 25 26 特点： 27 所有的内容会在一行内显示 28 2、标题元素 29 作用：以标题的方式显示文本(突出显示) 30 语法： 31 <hn></hn> 32 n : 1~6 33 <h1></h1> 34 ... 35 <h6></h6> 36 属性： 37 1、align ：文本的水平排列方式 38 取值：left / center / right 39 特点： 40 1、独自成行 41 2、加粗显示文本 42 3、上下会有垂直的空白 43 3、段落元素 44 语法： 45 <p></p> 46 属性： 47 align 48 特点： 49 1、垂直空白 50 2、独占一行 51 4、换行元素 52 语法：<br> 或 <br/> 53 5、分割线元素 54 语法：<hr> 或 <hr/> 55 属性： 56 1、size 57 尺寸，以px或%为单位(省略单位的话是px) 58 2、width 59 宽度，以px或%为单位 60 3、align 61 水平对齐方式 62 4、color 63 颜色 64 6、行分区元素 65 语法：<span></span> 66 作用：包裹文本并且设置不同的样式 67 7、块分区元素 68 语法：<div></div> 69 作用：布局 70 8、预格式化 71 作用：保留标记内的格式(回车 和 空格) 72 语法：<pre></pre> 73 9、块级元素和行内元素 74 1、块级元素 75 每一个块级元素独占一行 76 块级元素的主要作用：布局 77 2、行内元素 78 多个元素会在一行内显示，显示不下自动换行 79 span,i,b,s,u,sub,sup 80 作用：设置文本样式 81 <a> 82 <b> 83 <span> 84 <i> 85 <u> 86 <b> 87 Hello World 88 </b> 89 </u> 90 </i> 91 </span> 92 </b> 93 </a>
4.结构标记
1 1、结构标记 2 1、网页结构(布局) 3 块级元素做布局 -> div 4 2、什么是结构标记 5 为了取代 做布局的 div，从而体现出布局标记的语义性 6 3、常用结构标记 7 1、header 元素 8 作用：用来表示页面 或 某部分内容的 顶部信息 9 语法：<header></header> 10 2、nav 元素 11 作用：用来表示页面的主导航信息 12 语法：<nav></nav> 13 3、section 元素 14 作用：表示页面中的 小节，也可以用来表示页面的主体内容 15 语法：<section></section> 16 4、article 元素 17 作用：表示页面中的 文章信息 ，或是文字居多的部分，比如：博客信息，微博中的条目，论坛中的主贴 和 回帖 18 语法：<article></article> 19 5、footer 元素 20 作用：表示页面中 底部的信息，一般用户关注度较低 21 语法：<footer></footer> 22 6、aside 元素 23 作用：表示页面中的边栏信息 24 语法：<aside></aside>
5.表单
1 2、表单(重难点) 2 1、表单概述 3 表单用于显示、收集用户信息，并提交给服务器 4 5 完整的表单由两部分组成： 6 1、实现表单以及可交互的界面元素(前端) 7 1、表单元素 8 用于定义表单的提交信息如：提交地址，提交方式... ... 9 2、表单控件 10 能够与用户交互的界面元素 如：文本框，密码框... ... 11 2、表单提交后的处理(服务器端) 12 2、表单元素 13 1 、语法 14 <form></form> 15 16 注意： 17 1、只有出现在 form 中的 表单控件的数据才会被提交 18 2、form 在页面中 没有显示效果，只有功能 19 2、属性 20 1、action 21 作用：指定提交给服务器处理程序的地址，该地址要与服务器端人员商量 22 注意：如果省略不写，默认提交给本页 23 2、method 24 作用：指定提交数据的方法(模式) 25 取值： 26 1、get (默认值) 27 获取 28 特点： 29 1、以明文的方式提交数据到服务器(数据会显示在地址栏上),安全性较低 30 2、最大提交2kb数据 31 3、向服务要数据时用get方式 32 2、post 33 邮寄... ... 34 特点： 35 1、以隐式的方式提交数据到服务器(不会显示),安全性较高 36 身份证号，密码，安全性要求高的数据，必须用post 37 2、无提交数据大小限制 38 3、让服务器处理数据时使用post 39 3、put 40 4、delete 41 ... ... 42 3、enctype 43 作用：指定表单数据的编码方式(什么样的数据允许被提交) 44 取值： 45 1、application/x-www-form-urlencoded 46 默认值 47 可以将所有的数据提交给服务器(文件除外) 48 2、multipart/form-data 49 允许将文件(图像，音频，视频，文档等)提交给服务器 50 3、text/plain 51 允许将普通字符提交给服务器，特殊字符无法提交(=,&,?) 52 4、name 53 定义表单的名称 54 5、ID 55 定义表达独一无二的标识 56 3、表单控件 57 都是与用户进行交互的元素 58 表单控件： 59 1、input 元素 60 作用：收集用户的信息 61 标记：<input> 或 <input/> 62 属性： 63 1、type 64 根据不同的type值，创建不同的输入控件 65 2、name 66 定义控件的名称，提供给服务器端使用,采用匈牙利命名法 控件缩写+功能 67 3、value 68 定义控件的值，提供给服务器端使用 69 4、disabled 70 禁用控件(无法操作，无法提交) 71 该属性无值 72 input控件详解： 73 1、文本框 与 密码框 74 文本框：type="text" 75 密码框：type="password" 76 77 属性： 78 1、maxlength 79 限制输入的字符数 80 2、readonly 81 只读(只能看，不能改，但允许被提交) 82 无值属性 83 3、name 84 缩写：txt 85 用户名：txtUsername 86 用户密码:txtPassword 87 4、placeholder 88 占位符 89 2、单选按钮 和 复选框 90 单选按钮：type="radio" 91 复选框：type="checkbox" 92 93 属性： 94 1、name 95 1、定义控件的名称 96 2、为控件分组 97 98 radio缩写：rdo 99 checkbox缩写：chk 100 2、value 101 值 102 3、checked 103 预选中 104 3、按钮 105 1、提交按钮 106 type="submit" 107 2、重置按钮 108 type="reset" 109 3、普通按钮 110 type="button" 111 属性： 112 1、name 113 缩写：btn 114 2、value 115 按钮上的文字 116 其他按钮： 117 1、图片按钮(提交功能) 118 <input type="image"> 119 属性：src 120 2、按钮(提交按钮) 121 <button>内容</button> 122 4、隐藏域 和 文件选择框 123 隐藏域：type="hidden" 124 文件选择框：type="file" 125 126 隐藏域：想提交给服务器，但不想被用户看见的数据放在隐藏域中 127 128 属性： 129 1、name 130 2、value 131 使用文件选择框时注意以下问题： 132 1、要求 form 的method 属性必须为 post 133 2、要求 form 的enctype 属性必须为 multipart/form-data 134 135 2、textarea 元素(多行文本域) 136 允许录入多行数据 137 1、语法 138 标记：<textarea></textarea> 139 属性： 140 1、name 141 缩写：txt 142 2、cols 143 指定文本区域的列数 144 3、rows 145 指定文本区域的行数 146 4、readonly 147 只读 148 3、select 和 option(选择框) 149 语法： 150 1、标记 151 选择框： 152 <select></select> 153 选项： 154 <option></option> 155 2、属性 156 1、<select>属性 157 1、name 158 缩写：sel 159 2、size 160 默认显示选项的数量，如果大于1的话，则为滚动列表 161 3、multiple 162 设置多选，也会变成滚动列表 163 配合 Ctrl 或 Shift 实现多选 164 2、<option>属性 165 1、value 166 值 167 2、selected 168 默认预选中,无值 169 4、其他 170 1、label 元素 171 作用：关联文本 与 控件 172 语法： 173 1、标记 174 <label></label> 175 2、属性 176 for ：表示与该元素关联的控件的ID值 177 2、为控件分组 178 <fieldset></fieldset> : 分组 179 <legend></legend> : 分组标题 180 3、浮动框架 181 1、什么是浮动框架 182 可以在一个浏览器窗口中同时显示多个页面文档的内容 183 （在一个页面中引入另外一个页面） 184 2、语法 185 1、标记 186 <iframe>文字</iframe> 187 2、属性 188 1、src 189 浮动框架中要引入的页面URL 190 2、width 191 宽度 192 3、height 193 高度 194 4、frameborder 195 浮动框架边框，如果不想要边框的话，可以设置为0
6.新表单元素：
1 3、新表单元素(HTML5新标记) ：缩写统一 txt 2 属性： 3 required : 非空限制 4 5 1、电子邮件类型 6 <input type="email"> 7 2、搜索类型 8 <input type="search"> 9 3、URL类型 10 数据必须符合 URL 规范 11 <input type="url"> 12 4、电话号码类型 13 <input type="tel"> 14 移动终端：弹出 数字键盘 15 5、数字类型 16 <input type="number"> 17 属性： 18 1、min 19 控件接受的最小值 20 2、max 21 控件接受的最大值 22 3、step 23 控制控件递增的步长，默认为1 24 6、范围类型 25 作用：允许选择指定范围内的一个值 26 <input type="range"> 27 属性： 28 1、min ：指定范围的最小值(下限值) 29 2、max ：指定范围的最大值(上限值) 30 3、step：值变化的步长 31 4、value：设置初始值 32 7、颜色类型 33 作用：颜色拾取控件 34 <input type="color"> 35 8、日期类型 36 作用：允许用户选择日期 37 <input type="date"> 38 9、周类型 39 作用：与date类似，但只能选择周 40 <input type="week"> 41 10、月份类型 42 作用：与date类型，但只能选择一个月份 43 <input type="month">
