前端知识点总结——HTML
HTML：HTML4.01 指的就是网页技术
HTML5：HTML4.01的升级版本
1.web的基础知识
web与Internet
1.Internet:全球性的计算机互联网络，因特网，互联网，交互网。前端学习圈：767273102 ，从最基础的HTML+CSS+JavaScript。jQuery，Ajax，node，angular等到移动端HTML5的项目实战的资料都有整理
2.提供服务
访问网站：www（world wide web）服务Email:电子邮件服务BBS：电子公告板，俗称论坛FTP：文件的上传下载telenet:远程登录Internet上的应用程序
1.C/S程序 C：Client客户端 S：Server服务器端 代表：QQ，微信，网络游戏2.B/S程序 B：Browser 浏览器 S：server 服务器 代表：网站web
web:运行在Internet之上的一种B/S结构的应用程序，俗称网站。w3c:(万维网联盟)w3c:制定web技术规范web的工作原理： 基于浏览器和服务器还有通信协议来实现信息的传输和展示。 1.通信协议 HTTP/HTTPS 规范了数据是如何传递和打包 2.服务器 1.功能 1.存储web信息，并提供程序运行环境 2.接收用户请求并给出响应 3.具备一定的安全功能 2.服务器产品 1.TOMCAT 2.APACHE 3.IIS 3.服务器技术 1.php 2.java 3..NET 3.浏览器 功能： 1.代理用户（UA:user agent）提交请求 2.以图形化的方式显示网页 3.作为HTML和JS的解释器 浏览器产品： 1.IE 2.chrome 3.firefox 4.opera 5.safari 浏览器技术： 1.HTML 2.CSS 3.Javascript2.HTML快速入门
什么是HTML？
HTML：Hyper Text Markup Language 超文本标记语言ex: 普通文本 a：英文首字符 超级文本 a：超链接 普通文本 b：英文第二个字符 超级文本 b：加粗 language:语言，有自己的语法结构特点： 1.以.html或.htm为后缀 2.由浏览器解析执行 3.可以嵌套脚本语言（javascript） 4.用带有尖括号的标记来标识HTML的基础语法
1.标记 标记又称为"元素"，或"标签"，在网页中，主要表示一些功能。 标记在使用时，必须用<>括起来 标记分类： 1.封闭类型 又称为双标记 语法： <标记>内容</标记> ex：<a>百度</a> <b>加粗</b> 注意：必须有开始就有结束。2.非封闭类型 又称为单标记 语法：<标记>或<标记/> ex:<img>或<img/> <br>或<br/>2.标记嵌套 1.什么是嵌套？ 在一对标记中出现另外一对（个）标记，从而形成功能的层叠。 2.语法 <标记> <标记> <标记/> </标记></标记>ex：<a> <b>这是演示文本</b></a>ex： <a><b>这是演示文本</b></a> 正确，不推荐ex: <a><b>dfdsfsdfs</a></b> 错误注意： 1.换行缩进，如果是双标记必须成对出现3.元素（标记）属性 作用：修饰元素 语法： 1.必须声明在开始标记中 <标记 属性名></标记> 2.属性名与值之间用"="连接 <标记 属性名=值></标记> 3.元素允许有多个属性，每个属性之间用空格隔开 <标记 属性名1=值1 属性名2=值2 ...></标记> ex: p标记的align属性的值为center,title属性的值为"这是段落" <p align=center title="这是段落"></p> 标准属性(通有属性)： id:定义元素的唯一标识（名称） title:定义鼠标悬停在元素上时所提示的文本 style:css中,定义行内样式 class:css中,引用类选择器 4.注释 语法：<!--注释内容--> 注意： 1.注释本身不能嵌套 2.不能嵌套在标记中3.HTML文档结构
HTML文档结构
1.文档类型声明 作用：告诉浏览器HTML的版本类型 语法：<!doctype html> 在网页的最顶端编写2.HTML页面 在文档类型声明的下面写上一对根标记 <html></html> 在根标记中包含两部分： 文件头：<head></head> 定义网页的全局信息 文件主体：<body></body> 定义网页中显示的内容2.搭建网页结构 1.文档类型的声明 2.HTML页面结构 在主体内容（body）位置处显示“我的第一个网页”3.head元素 head是其它头元素的容器 1.<meta> 定义基本信息:编码格式，关键词，描述内容等 <meta charset="utf-8"><meta name="keywords" content="关键词"><meta name="description" content="描述内容"> 2.<title></title> 定义网页的 3.<style></style> 定义内部样式 4.<script></script>定义或引用javascript文件 5.<link> 引入外部样式4.body元素 显示网页的主要内容 1.特殊字符 表示空格< 表示一个<> 表示一个>© 版权 ¥ ￥ 2.文本标记 1.文本样式 <b></b>:加粗 <i></i>:斜体 <u></u>:下划线 <s></s>:删除线 <sup></sup>:上标 <sub></sub>:下标2.元素 语法：在网页中以醒目的方式来显示文字 语法： <hn>内容</hn> n:1-6 <h2>内容</h2> 一级 ... <h7>内容</h7> 六级 特点： 1.字体大小可变 2.加粗 3.上下文之间有垂直空白间距 属性：align 作用：标记内容的水平对齐方式 取值：left/center/right3.段落元素 作用：以突出的形式表示一段文本 语法：<p></p> 属性：align 取值：left/center/right4.换行元素 语法：<br>或<br/>5.分隔线元素 语法:<hr>或<hr/> 属性： 1.size 表示水平线的尺寸（高度），取值为px或%的数字 2.width 宽度，取值为px或%的数字 3.align 水平对齐方式 left/center/right 4.color 水平线的颜色，取值为合法颜色值 6.预格式化 作用：保留html代码中的回车和空格 语法：<pre>内容</pre>7.分区元素 1.块分区元素 作用：用于页面中元素的布局 语法：<div></div> 2.行分区元素 作用：处理同一行文本中的不同样式 语法：<span></span>8.行内元素和块级元素 1.块级元素 在网页页中独占一行的元素就是块级元素 常见的块级元素： 1.元素 h2-h7 2.段落元素 p 3.div 4.结构标记(header...) 2.行内元素 多个元素位于同一行显示，从左往右排列 常见的行内: span,b,i,u,s,sup,sub,a,img 3.行内块 显示方式如同行内元素，但具备块级元素的特征 4.table ...4.图像和链接
URL
1.目录结构 文件目录：文件夹嵌套结构2.URL URL:Uniform Resource Locator统一资源定位器，俗称路径。 作用：用于表示网络中任意一个资源的位置。3.路径的表现形式 1.绝对路径 绝对路径就是完整路径，一定可以找到你想找的资源。1.网络资源 通信协议+服务器主机+文件目录结构+文件名称 ex:https://cache.yisu.com/upload/information/20200706/150/566562.本地资源 从最高盘符处开始查找 C:\xampp\htdocs\1801-02\01-HTML\Day02\day.txt 2.相对路径 1.什么是相对路径 从当前文件所在的位置处开始查找资源文件所经过的路径，就是相对路径。 1.同级目录 直接引用 ex:Koala.jpg 2.子级目录 先进入，再引用 ex:img/Koala2.jpg 3.父级目录 先返回，再引用 ex:../Koala1.jpg 3.根相对路径 从服务器所在的根目录位置处开始查找表现：//codeboy/img/logo.png5.图像
1.图像格式 1.jpg 压缩比率较大 2.png 背景透明 3.gif 动图2.图像标记 标记：<img>或<img/> 属性： 1.src 源，要显示的图像的url 2.width 宽度，取值以px或%为单位的数字 3.height 高度，取值以px或%为单位的数字 4.alt 图片出错时显示的提示文本6.链接
1.语法 <a>内容</a>2.属性 1.href 链接的url 2.target 目标，指定打开网页的方式 取值： _blank 在新的标签页中打开 _self 默认值，在当前页面中打开新的网页 2.给一张图片设置超级链接，打开Tmooc网站（www.tmooc.cn）3.其它表现形式 1.资源下载 让链接的URL，链接到rar/zip文件即可 href="*.zip/*.rar" 2.电子邮件链接 href="mailto:合法的邮箱地址" 3.返回页面的顶部 href="#" 4.链接到javascript href="javascript:js脚本"7.锚点
1.什么是锚点？ 就是网页中的一个记号，可以通过超级连接调整到记号的位置处。 2.使用锚点 1.定义锚点 1.使用a标记的name属性定义锚点 <a name="锚点名称"></a> 2.使用任意标记的id属性定义锚点 <ANY id="锚点名称"></ANY>2.链接到锚点 <a href="#锚点名称"></a> <a href="url#锚点名称"></a>8.表格
表格的语法
1.表格 <table></table>2.行 <tr></tr> --->table row3.单元格/列 <td></td> --->table data表格的属性
1.table属性 width:宽度 height:高度 border:设置表格边框 align:设置表格的水平对齐方式 取值：left/center/right cellpadding:设置单元格的内边距（内容与td之间的间距） cellspacing:设置单元格的外边距（td边框外的距离） bgcolor:背景颜色2.tr属性 align 设置当前行的水平对齐方式 取值：left/center/right valign 设置当前行的垂直对齐方式 取值：top/middle/bottom bgcolor 设置当前行的背景颜色3.td属性 width:宽度 height:高度 align:水平对齐 valign:垂直对齐 bgcolor:列的背景颜色 colspan:跨列 rowspan:跨行可选标记
1.表格 标记：<caption></caption> 如果设置表格，则必须位于<table>下的第一个子元素位置处2.行/列 标记：<th></th> 所有的td都可以用<th>取代表格复杂应用
可以将连续的几个行，划分到一组中，进行统一管理。1.行分组 1.表头行 <thead></thead>表格中最上面的一行进行分组的话，可以放在表头行中 2.表主体行 <tbody></tbody>允许将若干行放在tbody中进行统一管理 3.表尾行 <tfoot></tfoot>表格中最后一行进行分组的话，可以放在表尾行中2.不规则表格 1.跨行 rowspan从指定单元格的位置处开始，纵向向下合并几个单元格（包含自己），被合并的单元格要删除。 2.跨列 colspan从指定单元格的位置处开始，横向向右合并几个单元格（包含自己），被合并的单元格要删除。9.列表
列表的作用
按照从上到下(从左往右)的方式来显示所有的数据，并且可以在数据前增加显示的标识。列表的组成
列表都是由"列表类型"和"列表项"来组成1.列表类型 有序列表：<ol></ol> order list 无序列表：<ul></ul> unorder list2.列表项 用于表示列表中的数据(嵌套在列表中) <li></li> list item3.有序列表 1.type 作用：指定列表的排序类型 取值： 1 默认值，以数字排序 a 小写字母 A 大写字母 i 小写罗马数字 I 大写罗马数字 2.start 作用：指定起始编号是从第 几 开始 取值：数字无序列表
1.type 作用：指定列表的标识类型 取值： disc:实心圆 circle:空心圆 square:实心方块 none:不显示标识列表嵌套
在一个列表中又出现另一个列表 被嵌套的列表只能出现在li中 ex: <ol> <li> 这是有序列表内容 <ul> <li>内容</li> </ul> </li> </ol>10.定义列表
1.什么是定义列表 定义列表常用于给出一类事物或对名词的解释说明等。2.语法 1.<dl></dl> 表示一个定义列表 2.<dt></dt> 表示定义列表中要解释说明的名词 3.<dd></dd> 表示定义列表中对名词解释的内容 ex: <dl> <dt>名词</dt> <dd>解释具体内容</dd></dl> 使用场合：图文混排时使用11.结构标记
结构的作用
用于描述整个网页的结构（取代div做布局）提升标记的语义性常用的结构标记
1.<header></header> 作用：定义网页或某区域的头部2.<nav></nav> 作用：定义网页的导航链接3.<section></section> 作用：主体内容4.<aside></aside> 作用：定义页面中的侧边栏信息，靠近边缘。5.<footer></footer> 作用：定义网页偏底部信息，比如：网站的备案号，解释说明，版权。6.<article></article> 作用：定义与文字描述相关的内容，比如：论坛帖子，微博条目，用户评论等12.表单（重点&难点）
表单的作用
1.提供可以与用户交互的可视化界面2.收集用户信息并提交给服务器表单的组成部分
1.前端部分 表单控件，与用户交互的可视化控件2.服务器端部分 对提交的数据的处理,***.php表单标记
<form></form>属性： 1.action 作用：定义表单提交时发生的动作，通常定义的是服务器上处理程序的url地址，ex:action="login.php" 2.method 作用：指定表单数据的提交方式取值： 1.get(默认值) 1.明文提交，待提交的数据会显示在地址栏中 2.安全性较低 3.提交数据有大小限制，限制为2KB 4.向服务器要数据时，使用get方式 2.post 1.隐式提交，提交的数据不会显示 2.安全性较高 3.提交数据大小无限制 4.要传递数据给服务器时，使用post方式 3.delete 4.put 3.enctype 作用：指定表单数据的编码方式，允许将什么样的数据提交给服务器1.application/x-www-form-urlencoded 默认值，允许将任意字符提交给服务器（文件无法提交）2.multipart/form-data 允许将文件提交给服务器3.text/plain 只能将普通字符提交给服务器表单控件
能够与用户进行交互的可视化元素1.分类： 1.input元素 2.textarea多行文本域元素 3.select和option 选项框元素 4.其它元素2.input元素 1.作用：在页面中提供各种各样的输入控件，如：文本框，密码框，单选按钮，复选框等。 2.语法 标记：<input>或<input/>属性： 1.type 指定创建输入控件的类型 2.name 为控件定义名称，提交给服务器端使用（必须） 3.value 控件的值，提交给服务器端使用 4.disabled 禁用控件，不能操作并不能提交给服务器使用 该属性无值，只要出现在标记中，就是禁用。 3.input元素详解 1.文本框和密码框 文本框：<input type="text"> 密码框：<input type="password"> 属性： 1.maxlength 指定限制输入的字符数 2.readonly 只读，只能看，不能改，但允许提交。 3.placeholder 占位符，即默认显示在控件上的文本。13.按钮
1.提交按钮 type="submit" 作用：将表单的数据提交给服务器上指定的程序 2.重置按钮 type="reset" 作用：将表单的内容恢复到初始化的状态 3.普通按钮 type="button" 没有功能 属性： value:显示在按钮上的文本 3.单选按钮和复选框 单选按钮：type="radio" 复选框：type="checkbox" 属性： name 除定义控件名称之外，还能起到分组的作用 checked 设置默认选中项，无值属性 4.隐藏域和文件选择框 1.隐藏域 type="hidden" 想要提交给服务器，但不想展示给用户的数据可以放在隐藏域中。 2.文件选择框 type="file" 注意： 1.method的值必须为post 2.enctype的值必须为multipart/form-data3.textarea元素 1.作用 允许录入多行文本 2.语法 标记：<textarea></textarea>属性： 1.name 定义控件名称，提供给服务器使用 2.readonly 只读 3.cols 指定文本域的列数，即一行能显示多少个英文字符（中文减半） 4.rows 指定文本域的行数，即默认显示多少行的数据，超出rows的话会出现滚动条。14.选项框
1.语法 1.<select></select> 作用：在页面中表示一个选项框 2.<option></option>作用：显示选项框中的内容项 2.属性 1.select属性 1.name 定义选项框的名称 2.size 定义显示选项的数量，默认值为1 3.multiple 设置多选，无值的属性 注意：只有滚动列表支持多选2.option属性 1.value 定义选项的值 2.selected 设置默认选中项，无值属性5.其它元素 1.label元素 作用：关联文本域表单控件语法：<label></label>属性：for 要与表单控件关联的id值 2.为控件分组 <fieldset></fieldset>为控件定义分组<legend></legend>为分组指定 3.浮动框架 作用：允许在一个网页中，再引入另外一个网页。语法：<iframe></iframe>属性： 1.src 要引入页面的url路径 2.width 宽度 3.height 高度 4.frameborder 浮动框架的边框，默认值115.单位转换
1px=0.025rem;
