html
1.HTML快速入门
1.1 什么是HTML
HTML:HyperText Markup Language 超文本标记语言 a 普通文本 <a></a>超文本标记 具有自己的功能 语言：有语法结构 |
1.2 HTML的特点
1.以.html或.htm为后缀 2.由浏览解析执行 3.用带有尖括号的"标记"来标识 4.可以在网页中执行js脚本 |
1.3 HTML的基础语法
(1)标签的分类 1.双标记(封闭类型) <关键字></关键字> 双标记必须成对出现，有开始就有结束 <p></p> 2.单标记(非封闭类型) <关键字>或者<关键字/> |
(2)标签的嵌套 1.什么是嵌套 一对标记中出现另一个(对)标记，形成了层级。 <div> <p></p> </div> 2.语法 <关键字1> <关键字2> <关键字3></关键字3> </关键字2> </关键字1> |
(3).属性和值 允许通过属性和值对标记进行修饰 属性用来设置标签中的内容如何显示 属性不能瞎写，应该根据文档中的规定来编写， 有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号引起来 语法： 1.属性和值必须声明在开始标记中 <关键字 属性="值"></关键字> 2.多个属性之间用空格分开 <关键字 属性1="值1" 属性2="值2" ...></关键字> |
3.标准属性(通用属性) 所有的元素都支持的属性 id 定义此元素在页面中的唯一标识 title 鼠标悬停在元素上时，显示的文本 style css中，定义行内样式 class css 中，引用类选择器 |
(4)注释 语法：<!--注释内容--> 注意：注释不能嵌套注释，注释也不能出现在标记中 |
2.HTML的文档结构
1.文档类型的声明 <!DOCTYPE html>告诉浏览器，我这篇html使用h5的规则解析 |
2.网页的结构 <!doctype html> <html> <head></head> <body></body> </html> <html></html>表示网页的开头和结束 在html中包含两个标签 <head></head> 网页的头部，定义全局的信息 <body></body> 网页的主题，展示的内容 |
3.head元素是其他头元素的容器<head></head> <title></title> 网页的标题并且title标签的内容会作为搜索结果的超链接上的文字显示 。 <meta/> 主要用于设置网页中的一些元数据，元数据不是给用户看的。 用来设置网页的字符集，避免乱码问题 <meta charset="utf-8"> chrome 62以上的版本，自动识别中文 Name：指定数据名称 concent：指定数据内容 Name的取值： Keywords：表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开。为搜索引擎提供服务。 <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,相机,数码,京东"/> description 用于指定网站的描述 <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/> 网站的描述会显示在搜索引擎的搜索的结果中。 <meta name="Keywords" content="关键词的内容"> <meta name="description" content="描述的内容"> <style><style>定义网页的内部样式 <script></script>定义或者引用js文件 <link/> 引用外部样式文件 |
4.body元素 定义网页的主体 body的属性 bgcolor 背景颜色 text 字体颜色 取值：合法的颜色值---->颜色的应为单词 |
3.文本标记
3.1 标题元素
作用：在页面中以醒目的方式显示文本 语法 <h1></h1>一级标题 <hn></hn> n:1~6 ... <h6></h6>六级标题 特点： 1.文本加粗 2.字号发生变化 3.独占一行，上下有垂直间距 从h1~h6重要性递减，h1最重要，h6最不重要 h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1 一般情况下标题标签只会使用到h1~h3，h4~h6很少用 标题标签都是块元素 属性align 设置标签内容水平方向对齐方式 取值：left/center/right hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup <hgroup> <h1>回乡偶书二首</h1> <h2>其一</h2> </hgroup> |
3.2 段落标记paragraph
语法：<p></p> 作用：突出的表示一段文字 特点：独立成行，上下有垂直的间距 p也是一个块元素 属性：align |
3.3.换行标记
<br>或者<br/> |
3.4.水平线(分割线)
<hr>或者<hr/> width="50%" 表示水平线的宽度，取值为%或者px为单位的数字 size="5px" 表示水平线的尺寸(粗细)，取值为%或者px为单位的数字 align="left" 对齐方式 color="red" 设置水平线的颜色 |
3.5.预格式化标签
<pre></pre> 使标签内部的文本，保留其格式，在页面上显示 空格折叠现象，一个或多个空格，会被浏览器渲染成一个空格显示 一个或多个回车，会被浏览器渲染成一个空格显示 |
3.6.特殊字符(实体)
空格  ； < < > > © ©； ® ® ￥ ¥ x × |
3.7.文本样式
<!--老式写法 新式写法--> <b>加粗</b> <strong>加粗</strong> <i>倾斜</i> <em>倾斜</em> <u>下划线</u> <ins>下划线</ins> <s>删除</s> <del>删除</del> 上标 <sup></sup> 下标 <sub></sub> |
补充：
1、blockquote 表示一个长引用，块元素
鲁迅说：
<blockquote>
这句话我是从来没有说过的！
</blockquote>
2、q表示一个短引用，行内元素
子曰<q>学而时习之，乐呵乐呵！</q>
3.8.分区元素
1.块分区，用于页面中布局 <div></div> 独立成行 |
2.行分区，处理同一行文本的不同样式 <span></span> 可以与其它的span和文字共用一行 |
3.9.行级元素和块级元素（元素的显示形式）
1.块级元素 在网页中，单独成行，就是块级元素 在网页中一般通过块元素来对页面进行布局 从上往下排列 常见块级元素 h1~h6 p div |
2.行内元素(行级元素) 在页面中，与其他行内元素/行内块共用一行 行内元素主要用来包裹文字 从左往右排列 页面中常见行内元素 i em b strong u sup sub span |
3.行内块元素 显示的方式与行内元素相同，但是具备块级元素的特征 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素 块元素中基本上什么都能放 p元素中不能放任何的块元素
注意：浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正，对在内存中的源码进行修正 比如： 标签写在了根元素的外部 p元素中嵌套了块元素 根元素中出现了除head和body以外的子元素 ... ... |
4.table 表格的宽高是由表格的内容决定的 内容多，就宽一些，高一些， 表格中所的数据都预读到内存，一次性画到页面上 |
4.图像和链接
4.1.图像
1.使用 <img>或者<img/> 图片标签用于向当前页面中引入一个外部图片 使用img标签来引入外部图片，img标签是一个自结束标签 img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点） 属性 src="url" url--图片资源路径 alt：图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示。 搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录。 width图片的宽度(单位是像素) height图片的高度 宽度和高度中如果只修改了一个，则另一个会等比例缩放 注意： 一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大 但是在移动端，经常需要对图片进行缩放（大图缩小）
补充：图片的格式： jpeg(jpg) 支持的颜色比较丰富，不支持透明效果，不支持动图 一般用来显示照片 gif 支持的颜色比较少，支持简单透明，支持动图 颜色单一的图片，动图 png 支持的颜色丰富，支持复杂透明，不支持动图 颜色丰富，复杂透明图片（专为网页而生） webp 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式 它具备其他图片格式的所有优点，而且文件还特别的小 缺点：兼容性不好 base64 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片，一般都是一些需要和网页一起加载的图片才会使用base64 效果一样，用小的 效果不一样，用效果好的 |
2.URL Uniform Resource Locator 统一资源定位符 简称：路径 |
3.URL路径的表现形式 1.绝对路径，一个写完整的路径 通信协议+主机地址+文件目录结构+文件的具体名称 合适使用： 1.使用网络资源的时候，使用绝对路径 优点：不占据自己服务器的存储空间 缺点：不稳定 2.使用本地资源，使用绝对路径(项目中100%用不到) 从最高盘符开始查找 C/D/E/F/G 项目中不用 |
2.相对路径（参照物是html本身） 1.图片与html文件在同一个目录下，src直接引用图片名称 src="3.jpg" ./表示当前文件所在的目录，可以省略 ../表示当前文件所在目录的上一级目录。 |
4.2.链接
1.语法 <a href="#"></a> <a href="http://www.tmooc.cn/">Tmooc</a> 超链接可以让我们从一个页面跳转到其他页面， 或者是当前页面的其他的位置
属性： href指定跳转的目标路径 值可以是一个外部网站的地址 也可以写一个内部页面的地址 target:指定打开链接的方式 取值：_self 默认值，在当前标签页打开新链接，新页面替换之前的页面。 _blank 在新的标签页打开链接 超链接也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素 |
2.其它的表现形式 <!--下载 --> <a href="1.zip">下载</a> <!--新建邮件，前提：本机必须有邮件软件的客户端 --> <a href="mailto:">新建邮件</a> <!--执行js脚本 --> <a href="javascript:alert(1111111)">执行js</a> <!--返回当前页面的顶部 --> <a href="#">返回顶部</a> 空链接: <a href = "##"></a> #表示空链接,当写一个#时,单击a会回到顶部,##不回到顶部 注意： 1、<!--在开发中可以将#作为超链接的路径的展位符使用--> <a href="#">这是一个新的超链接</a> 2、<!--可以使用javascript:;来作为href的属性，此时点击这个超链接什么也不会发生--> <a href="javascript:;">这是一个新的超链接</a> |
4.3.锚点
锚点就是网页中的一个记号，跳转到页面的指定位置
定义锚点(指定位置) 使用a标签的name属性定义锚点 <a name="锚点名称"></a> | 定义锚点(指定位置) 任意标签的id属性定义锚点 <any id="id"> </any> |
链接到锚点 使用a标签链接锚点，#锚点名称 <a href="#锚点名称">回到锚点</a> | 链接到锚点 使用a标签链接锚点， #id <a href="#id">回到锚点</a> |
5.列表(重点***)
默认按照从上到下的顺序来显示数据，并且可以在数据前添加标识 使用列表布局(去掉标识，从上到下，从左到右排列) |
5.1.列表的组成
1.有序列表<ol></ol> order list |
2.无序列表<ul></ul> unorder list |
3.列表项 <li></li> list item |
5.2.列表属性
1.有序列表的属性 ol type 设置标识符的类型 取值 ： 默认值，数字 a A 字母 i I 罗马数字 start 指定起始编号 取值：无单位数字 |
2.无序列表的属性 ul type：设置标识 取值 disc 默认值 实心圆 circle 空心圆 square 实心方块 none 无 |
5.3.列表的嵌套
所有的嵌套必须只能写在li中 ul(ol)只能包含li,li里可以包含任何其他标签 |
5.4.自定义列表
1.作用 做名词解释使用,用于图文混排 <dl> <dt>需要被解释说明的名字</dt> <dd>对名词的解释内容</dd> </dl> 10:17上课 |
6.表格
6.1.表格语法
<table> <tr> <td></td> <td></td> <td></td> </tr> ..... </table> 在table中使用tr表示表格中的一行，有几个tr就有几行 在tr中使用td表示一个单元格，有几个td就有几个单元格 |
6.2属性
1.table标签的属性 border:设置边框 border=“1” width:设置表格的宽 height:设置表格的高 可以设置宽高，内容小于宽高的，按宽高尺寸，内容大于宽高，按内容改变尺寸 align:设置表格的对齐方式(table自己的水平位置) 取值 left/center/right bgcolor:背景颜色 cellpadding:设置单元格内边距(边框到内容的距离) cellspacing:设置单元格外边距（边框与边框之间的距离），默认是2px |
2.tr的属性 1.align设置当前行内容的水平对齐方式（设置表格内容的对齐方式） 2.valign设置当前行内容的垂直对齐方式 取值：top/middle/bottom 3.bgcolor 当前行的背景颜色 |
3.td的属性 width height align valign bgcolor colspan rowspan |
6.3.不规则表格的使用
1.跨列 colspan=? 从指定的单元格位置处开始，横向向右合并?个单元格(包含自己) 被合并掉的单元格，要删除 |
2.跨行 rowspan=? 从指定的单元格位置处开始，纵向向下合并?个单元格(包含自己) 被合并掉的单元格，要删除 |
6.4.table中的可选标记
1.表格的标题 <caption></caption> 如果设置标题，必须将<caption>放在<table>之后 2.行/列的标题 <th></th> 代替<td></td> 加粗，居中 |
6.5.表格的复杂应用
1.行分组 可以将连续几个行，划分到一个组中，进行统一管理 表头行 <thead></thead> 表格最上面一行的标题放在thead中 表主体 <tbody></tbody>允许将若干放在tbody中进行统一管理 表尾行 <tfoot></tfoot> 表格中最后一行放在tfoot中 |
2.表格的嵌套 一张表格中，所有的嵌套的表格，只能放在td中 |
7.表单(重点********&难点***)
7.1.作用
1.提供可视化的输入控件 2.收集用户填写的信息并提交给服务器
在现实生活中表单用于提交数据 在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器 使用form标签来创建一个表单 |
7.2.表单的组成部分
1.前端部分 提供表单的控件，与用户做交互的可视化控件 2.后端部分 对提交的数据进行处理(接口) |
7.3.表单
<form></form> |
属性
1.action 通常是定义服务器处理数据的地址，接口(url) 默认，提交给本页地址 |
2.method 指定表单数据提交的方式(方法) 1.get(默认值) 明文提交，提交时内容会显示在浏览器地址栏上 提交的数据有大小限制，2kb 向服务器要数据的时候使用get 2.post 提交数据无大小限制 隐式提交，提交的数据不会显示在地址栏中 把数据传递给服务器的时候，使用post 3.delete 4.put |
3.enctype 编码方式 设置表单允许将什么样的数据提交给服务器 1.提交普通字符，不能有特殊符号 enctype ="text/plain" 2.允许将任意字符提交给服务器 application/x-www-form-urlencoded 3.允许将文件提交给服务器 multipart/form-data |
7.4.表单控件
能够与用户进行交互的可视化元素 |
7.4.1分类
1.input元素 2.textarea 多行文本域 3.下拉选择框 4.其它元素 |
7.4.2input元素
在页面中提供各种各样的输入控件，通过type属性来设置输入控件的类型 <input>或者<input/> type 设置输入控件的类型 name 为控件定义名称，提供给服务端使用(必须值) vaule 控件的值，提交给服务端使用 disabled 禁用控件，不能操作也不能提交，无值属性 |
type取值
1.文本框和密码框 type="text" 默认值 type="password" 属性 1.maxlength 限制输入的最大字符数 2.readonly 只读，只能看不能写，但允许被提交，无值属性 3.placeholder 占位符，默认显示在控件上文本，只要得到焦点，文本就无效了，此文本不能提交 4.autocomplete="off" 关闭自动补全 5.autofocus 设置表单项自动获取焦点 |
2.按钮 type="submit"提交按钮 将表单中的数据，提交给服务器 type="reset"重置按钮 让表单内容恢复到初始化状态 type="button" 无功能按钮，可以调用js脚本 |
3.单选按钮和复选按钮 单选按钮 type="radio" 多选按钮 type="checkbox"
像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器，不然提交的值是on。 多个选择按钮的name属性值必须一致。除了定义控件名称，还起到分组的效果 checked：设置默认选中项，无值属性 checkbox的name要写成数组hobby[] |
4.隐藏域 type="hidden" 想提交给服务器，但是不想展示给用户看的数据，使用隐藏域 |
5.文件选择框 type="file" 注意： method="post" enctype="multipart/form-data" multiple 无值属性，可以同时上传多个文件 需要name属性值为数组 |
7.4.3textarea文本域
允许录入多行数据的文本框 <textarea></textarea> name 控件的名称 readonly 只读 cols 指定文本域的列数，以英文单词为准，中文减半 rows指定文本域的行数， |
7.4.4下拉选择器框
<select> 表示一个下拉选 <option></option> 表示下拉选中的一个选项 ....... </select> 注意： 当option没有value属性时，提交的时候select的value为选中option的内容。 当option有value，提交时，select的value为选中option的value。 select属性 name选项框的名称 size 默认为1，定义显示选项的数量。 如果值大于1的数字。下拉选表现为滚动列表 multiple 无值属性，可以多选，但是name要用数组 设置了multiple之后，就算size="1" 也是滚动列表 option的属性 value selected设置默认选中项 |
7.5.其它元素
1.label 文本与表单控件的关联 <label></label> 属性 for:要与label中文字发生关联的form控件的id |
2.为控件分组 <fieldset></fieldset> 为控件分组 <legend></legend> 分组标题 |
3.浮动框架 允许在一个网页中，引入另外一个网页 <iframe></iframe> 属性 src="url" width="100%" height="200px" 高度存在问题，需要使用js.dom来解决 scrolling="no" 不显示滚动条 frameborder="0" 不显示边框 <iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe> |