前端知识点总结——HTML
HTML：HTML4.01 指的就是网页技术
HTML5：HTML4.01的升级版本
web与Internet
1.Internet:全球性的计算机互联网络，因特网，互联网，交互网。前端学习圈：767273102 ，从最基础的HTML+CSS+JavaScript。jQuery，Ajax，node，angular等到移动端HTML5的项目实战的资料都有整理
2.提供服务
访问网站：www（worldwideweb）服务Email:电子邮件服务BBS：电子公告板，俗称论坛FTP：文件的上传下载telenet:远程登录
3.Internet上的应用程序
1.C/S程序C：Client客户端S：Server服务器端代表：QQ，微信，网络游戏2.B/S程序B：Browser浏览器S：server服务器代表：网站
4.web
web:运行在Internet之上的一种B/S结构的应用程序，俗称网站。w3c:(万维网联盟)w3c:制定web技术规范web的工作原理：基于浏览器和服务器还有通信协议来实现信息的传输和展示。1.通信协议HTTP/HTTPS规范了数据是如何传递和打包2.服务器1.功能1.存储web信息，并提供程序运行环境2.接收用户请求并给出响应3.具备一定的安全功能2.服务器产品1.TOMCAT2.APACHE3.IIS3.服务器技术1.php2.java3..NET3.浏览器功能：1.代理用户（UA:useragent）提交请求2.以图形化的方式显示网页3.作为HTML和JS的解释器浏览器产品：1.IE2.chrome3.firefox4.opera5.safari浏览器技术：1.HTML2.CSS3.Javascript2.HTML快速入门
1.什么是HTML？
HTML：HyperTextMarkupLanguage超文本标记语言ex:普通文本a：英文首字符超级文本a：超链接普通文本b：英文第二个字符超级文本b：加粗language:语言，有自己的语法结构特点：1.以.html或.htm为后缀2.由浏览器解析执行3.可以嵌套脚本语言（javascript）4.用带有尖括号的标记来标识
2.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属性的值为"这是段落"<palign=centertitle="这是段落"></p>标准属性(通有属性)：id:定义元素的唯一标识（名称）title:定义鼠标悬停在元素上时所提示的文本style:css中,定义行内样式class:css中,引用类选择器4.注释语法：<!--注释内容-->注意：1.注释本身不能嵌套2.不能嵌套在标记中3.HTML文档结构
1.HTML文档结构
1.文档类型声明作用：告诉浏览器HTML的版本类型语法：<!doctypehtml>在网页的最顶端编写2.HTML页面在文档类型声明的下面写上一对根标记<html></html>在根标记中包含两部分：文件头：<head></head>定义网页的全局信息文件主体：<body></body>定义网页中显示的内容2.搭建网页结构1.文档类型的声明2.HTML页面结构在主体内容（body）位置处显示“我的第一个网页”3.head元素head是其它头元素的容器1.<meta>定义基本信息:编码格式，关键词，描述内容等<metacharset="utf-8"><metaname="keywords"content="关键词"><metaname="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/right4.color水平线的颜色，取值为合法颜色值6.预格式化作用：保留html代码中的回车和空格语法：<pre>内容</pre>7.分区元素1.块分区元素作用：用于页面中元素的布局语法：<div></div>2.行分区元素作用：处理同一行文本中的不同样式语法：<span></span>8.行内元素和块级元素1.块级元素在网页页中独占一行的元素就是块级元素常见的块级元素：1.标题元素h2-h72.段落元素p3.div4.结构标记(header...)2.行内元素多个元素位于同一行显示，从左往右排列常见的行内:span,b,i,u,s,sup,sub,a,img3.行内块显示方式如同行内元素，但具备块级元素的特征4.table...4.图像和链接
1.URL
1.目录结构文件目录：文件夹嵌套结构2.URLURL:UniformResourceLocator统一资源定位器，俗称路径。作用：用于表示网络中任意一个资源的位置。3.路径的表现形式1.绝对路径绝对路径就是完整路径，一定可以找到你想找的资源。1.网络资源通信协议+服务器主机+文件目录结构+文件名称ex:https://cache.yisu.com/upload/information/20200706/150/566562.本地资源从最高盘符处开始查找C:\xampp\htdocs\1801-02\01-HTML\Day02\day.txt2.相对路径1.什么是相对路径从当前文件所在的位置处开始查找资源文件所经过的路径，就是相对路径。1.同级目录直接引用ex:Koala.jpg2.子级目录先进入，再引用ex:img/Koala2.jpg3.父级目录先返回，再引用ex:../Koala1.jpg3.根相对路径从服务器所在的根目录位置处开始查找表现：//codeboy/img/logo.png5.图像
1.图像格式1.jpg压缩比率较大2.png背景透明3.gif动图2.图像标记标记：<img>或<img/>属性：1.src源，要显示的图像的url2.width宽度，取值以px或%为单位的数字3.height高度，取值以px或%为单位的数字4.alt图片出错时显示的提示文本6.链接
1.语法<a>内容</a>2.属性1.href链接的url2.target目标，指定打开网页的方式取值：_blank在新的标签页中打开_self默认值，在当前页面中打开新的网页2.给一张图片设置超级链接，打开Tmooc网站（www.tmooc.cn）3.其它表现形式1.资源下载让链接的URL，链接到rar/zip文件即可href="*.zip/*.rar"2.电子邮件链接href="mailto:合法的邮箱地址"3.返回页面的顶部href="#"4.链接到javascripthref="javascript:js脚本"7.锚点
1.什么是锚点？就是网页中的一个记号，可以通过超级连接调整到记号的位置处。2.使用锚点1.定义锚点1.使用a标记的name属性定义锚点<aname="锚点名称"></a>2.使用任意标记的id属性定义锚点<ANYid="锚点名称"></ANY>2.链接到锚点<ahref="#锚点名称"></a><ahref="url#锚点名称"></a>8.表格
1.表格的语法
1.表格<table></table>2.行<tr></tr>--->tablerow3.单元格/列<td></td>--->tabledata
2.表格的属性
1.table属性width:宽度height:高度border:设置表格边框align:设置表格的水平对齐方式取值：left/center/rightcellpadding:设置单元格的内边距（内容与td之间的间距）cellspacing:设置单元格的外边距（td边框外的距离）bgcolor:背景颜色2.tr属性align设置当前行的水平对齐方式取值：left/center/rightvalign设置当前行的垂直对齐方式取值：top/middle/bottombgcolor设置当前行的背景颜色3.td属性width:宽度height:高度align:水平对齐valign:垂直对齐bgcolor:列的背景颜色colspan:跨列rowspan:跨行
3.可选标记
1.表格标题标记：<caption></caption>如果设置表格标题，则必须位于<table>下的第一个子元素位置处2.行/列标题标记：<th></th>所有的td都可以用<th>取代
4.表格复杂应用
可以将连续的几个行，划分到一组中，进行统一管理。1.行分组1.表头行<thead></thead>表格中最上面的一行进行分组的话，可以放在表头行中2.表主体行<tbody></tbody>允许将若干行放在tbody中进行统一管理3.表尾行<tfoot></tfoot>表格中最后一行进行分组的话，可以放在表尾行中2.不规则表格1.跨行rowspan从指定单元格的位置处开始，纵向向下合并几个单元格（包含自己），被合并的单元格要删除。2.跨列colspan从指定单元格的位置处开始，横向向右合并几个单元格（包含自己），被合并的单元格要删除。9.列表
1.列表的作用
按照从上到下(从左往右)的方式来显示所有的数据，并且可以在数据前增加显示的标识。
2.列表的组成
列表都是由"列表类型"和"列表项"来组成1.列表类型有序列表：<ol></ol>orderlist无序列表：<ul></ul>unorderlist2.列表项用于表示列表中的数据(嵌套在列表中)<li></li>listitem3.有序列表1.type作用：指定列表的排序类型取值：1默认值，以数字排序a小写字母A大写字母i小写罗马数字I大写罗马数字2.start作用：指定起始编号是从第几开始取值：数字
4.无序列表
1.type作用：指定列表的标识类型取值：disc:实心圆circle:空心圆square:实心方块none:不显示标识
5.列表嵌套
在一个列表中又出现另一个列表被嵌套的列表只能出现在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.结构标记
1.结构的作用
用于描述整个网页的结构（取代div做布局）提升标记的语义性
2.常用的结构标记
1.<header></header>作用：定义网页或某区域的头部2.<nav></nav>作用：定义网页的导航链接3.<section></section>作用：主体内容4.<aside></aside>作用：定义页面中的侧边栏信息，靠近边缘。5.<footer></footer>作用：定义网页偏底部信息，比如：网站的备案号，解释说明，版权。6.<article></article>作用：定义与文字描述相关的内容，比如：论坛帖子，微博条目，用户评论等12.表单（重点&难点）
1.表单的作用
1.提供可以与用户交互的可视化界面2.收集用户信息并提交给服务器
2.表单的组成部分
1.前端部分表单控件，与用户交互的可视化控件2.服务器端部分对提交的数据的处理,***.php
3.表单标记
<form></form>属性：1.action作用：定义表单提交时发生的动作，通常定义的是服务器上处理程序的url地址，ex:action="login.php"2.method作用：指定表单数据的提交方式取值：1.get(默认值)1.明文提交，待提交的数据会显示在地址栏中2.安全性较低3.提交数据有大小限制，限制为2KB4.向服务器要数据时，使用get方式2.post1.隐式提交，提交的数据不会显示2.安全性较高3.提交数据大小无限制4.要传递数据给服务器时，使用post方式3.delete4.put3.enctype作用：指定表单数据的编码方式，允许将什么样的数据提交给服务器1.application/x-www-form-urlencoded默认值，允许将任意字符提交给服务器（文件无法提交）2.multipart/form-data允许将文件提交给服务器3.text/plain只能将普通字符提交给服务器
4.表单控件
能够与用户进行交互的可视化元素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.文本框和密码框文本框：<inputtype="text">密码框：<inputtype="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的值必须为post2.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定义显示选项的数量，默认值为13.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;
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
