HTML

二：web基础知识

HTML 泛指前端网页技术

   2014年9月，html4.0升级html5简称h5

      html5 大前端技术

1.web与internet

internet:全球性计算机互联网         俗称：互联网，因特网，交换网，交际网    www服务：world wide web 万维网，访问网站的服务 web就是运行在internet上的一种应用程序 internet上的服务 Ftp:上传下载文件 Email:电子邮件 Telnet：远程登录 BBS：电子公告板，简称论坛

2.Internet上的应用程序结构分类

1.C/S    client：客户端     Server：服务器端    王者荣耀、QQ .exe 2.B/S    Browser：浏览器   Server：服务器端    所有的网站、网页版微信   区别：  1.cs需要升级     2.bs不需要升级

3.web运行原理

web：运行在Internet上的b/s结构的应用程序，俗称网站 Internet：为web运行提供网络环境 web运行的原理：基于浏览器和服务器以及通信协议来实现数据的传输和展示   通信协议：规范了数据是如何打包和传递     网页的通信协议：http://  https://
服务器：   1.功能          存储数据、          接收用户请求并给出响应          提供了程序的运行环境          具备一定的安全功能   2.服务器产品          Apache---PHP、Tomcat---java、IIS---.net   3.服务器端技术          nodejs、Java、PHP、python、.net\ C#	浏览器   1.功能          代表用户发送请求          作为html、css、js的解释器，以图形化的界面展示给用户看   2.浏览器的产品          safari 、chrome、IE、Firefox   3.浏览器端技术          html5、css3、js

三：HTML快速入门

  1.什么是html

Hyper Text Markup Langeuage   超文本标记语言           标记：超文本组成形式，<关键字> ,具有独特的功能

  2.HTML的特点

1.以.html或者.htm 为后缀 2.由浏览器解释执行 3.用<>来定义标记 4.可以嵌套js脚本语言

  3.html语法

1.标记 标记、元素、标签、节点 关键字 标签具备一些功能 学习html的第一步：背关键字，熟悉对应的功能          标记分类 1.双标记(封闭类型标记)          <关键字></关键字>          双标记成对出现，又开有关    <a></a> 2.单标记（非封闭类型） 空标签（没有内容区域）          <关键字> 或者 <关键字/> 2.标签的嵌套 在一对标签内部，出现另外一对或另外一个标签，组合形成功能的叠加 学习的第二步  背嵌套顺序 <标签1>          <标签2>                    <标签3>   </标签3>            </标签2> </标签1> 3.属性和值 通过属性和值，对标签进行修饰  < 标签 属性1="值1" 属性2="值2" ....> 1.标准属性，通用属性。所有标签都有的属性          id ：定义元素在页面中唯一的标识          title ：鼠标悬停在元素上所提示的文本          style ：css中，定义内联样式          class ：css中，引用类选择器 2.专有属性  只针对一个标签起作用的属性 学习html第三步，背专有属性及效果 4.注释 不会被解释执行的部分 <!--     --> 快捷方式：ctrl+/     不能嵌套注释，不能写在标签内部

学习HTML三部曲          1.背关键字，熟悉对应的功能          2.背嵌套顺序          3.背专有属性及效果

四：HTML的文档结构

  1.html文档的构成

（1）文档类型的声明            告诉浏览器，解析运行本篇代码，使用h5的规则解析 （2）网页结构    <html></html>          表示网页的开始和结束，一个html文件中只能有一对html标签 <!doctype html>          <head></head>网页头部，定义网页信息          <body></body>网页主体，展示内容 </html> （3）head标签  定义网页的信息 <meta> 元数据标签 <meta charset="utf-8"> <meta name="description" content="描述内容"> <meta name="Keywords" content="关键字"> <title></title> 网页标题 <script></script> 定义js代码或者引用js文件 <style></style>   css中，定义内部样式 <link/>    css中，引用外部css文件的样式 （4）body 元素 <body></body> 指定网页的主体   属性：          bgclor ：body的背景颜色，取值颜色的合法值          text ： body 文本的颜色，取值颜色的合法值

五：文本标记

  1.标题元素

<h1></h1>.....<h6></h6> 特点：1.字体大小有变化，h1最大，h6最小            2.字体加粗                 3.单独成行，上下有垂直间距 属性：align  设置标记内容水平对其方式     取值：center,left,right

  2.段落标记

<p></p>  以突出的形式表示一段文字 特点：1.单独成行                2.上下有垂直间距 属性：aling:center/left/right

  3换行标记

空格折叠现象：在html中，文本中不管有多少个空格和回车，都会被浏览器解析称一个空格显示 <br></br>  或者  <br/>

  4.特殊字符（实体）

空格	&nbsp
<	&lt;
>	&gt;
©	&copy;  版权
®	&reg;   商标注册
×	&times;   ×号
人民币	&yen;

  5.水平分割线

<hr> 或者 <hr/> 属性：  size="5px"  取值px为单位的数字,水平线的粗细                   width="50%"  取值px或者 百分比                    align="left"  分割线水平对齐，left/right/center                    color="red" 分割线颜色,合法的颜色值

  6.预格式化

<pre></pre>          保留html代码中的回车和空格效果

  7.文本样式标签

<em></em>           <i></i>	斜体
<strong></strong>    <b></b>	加粗
<del></del>           <s></s>	删除线
<u></u>	下划线
<sup></sup>	上标
<sub></sub>	下标

  8.分区元素 ----不写样式的分区元素，是看不见的

1.块分区 <div></div>    用于页面布局

2.行分区 <span></span>   为文本添加样式的时候用

  9.元素的显示方式

1.块级元素   元素独立成行，都是块级元素     h1~h6、p、div、pre

2.行内元素   多个行内元素在一行显示，从左往右排列  span、i、em、strong、b、u、sup、sub、del、s

3.行内块     input   表现方式是行内元素（多个行内元素公用一行），但是具有块级元素的其它特征（宽高，边距）

4.表格

六：图形和链接

 1.图形图像

<img/> 或者 <img> 属性：src 引用图片资源 url    src=" url"      *.html和图片是兄弟关系，直接在src中写图片名称

 2.URL

使用网网络资源图片          优点：节省服务器本地存储空间     缺点：资源不稳定
1.URL是什么          Uniform Resource Locator 统一资源定位符，俗称路径
2.绝对路径 ————使用网络资源   完整的路径  ——> 协议+主机名称+文件目录结构+文件具体的名称          使用场景：使用网络资源的时候，使用绝对路径                    优点：节省服务器本地存储空间              缺点：资源不稳定   ps：本地服务器资源，在项目中，不能用绝对路径
3.相对路径 ————使用本地服务器资源   1.同级目录资源：  直接使用资源名称  src=" xx.png "   2.兄弟文件夹的子元素：            直接使用兄弟文件夹的名称，在用/调用资源名称 src="xx /xx.png"   3.父级目录中的资源      返回上一级： ../            先返回上一级，再引入资源   src="../xx.png"

 3.属性

img的属性值：<img   src=""  alt""  title=""  width=""  height=""> src source源，资源路径 alt 图片加载错误时，显示的文字 title 鼠标悬停时，显示的文字 width 设置图片的宽度 height 设置图片的高度   如果设置的宽高比不符合图片的原始宽高比，图片会产生失真效果 解决图片失真效果：一般情况下，width和height只设置一个，另外一个自适应

 4.链接

1.语法          <a href="...."  target="...."></a>                    属性： href：链接路径、                    target：指定打开链接的方式                                       取值  _self  默认值，在当前也main打开新网页                                                  _blank  在新页面打开网页

2. a标签的其它表现形式          1.新建邮件，配合windows的邮件软件使用                    <a href="mailto:cheng@t.com">发邮件</a>          2.执行js                    <a href="javacsript:show()">执行ja语句</a>          3.下载                    <a href="1.zip">下载</a>          4.返回页面顶部                    <a href="#">返回页面顶部</a>

3.锚点：   1.什么是是锚点          锚点，就是页面中的一个记号，可以通过超链接的方式，链接到锚点，让页面跳转到锚点位置显示   2.使用锚点 1.定义锚点          方式一：任何标签的id中写锚点名称      <Any  id="md1" > </Any>          方式二：a标签的name属性中写锚点名称  <a name="锚点名称"></a> 2.链接到锚点          <a href="#锚点名称"></a> 3.链接到其它页面的锚点          <a href="其它页面的url#锚点名称"></a>          <a href="02_a.html#hl"></>

七：表格

1.语法

早期table用户布局，由于效率低下，后来被淘汰，使用div+css的布局   表格现在就一个显示数据的作用 <table>  表格          <tr>  行                    <td></td> 列          </tr> </table table的属性 width="300px" 表格的宽度 height="300px" 表格的高度 border="1px" 表格的边框 align="center/left/right" 表格的水平对齐方式 bordercolor="red" 边框颜色 bgcolor="pink" 背景颜色 cellpadding="10px" 表格内边距，边框到内容的距离（以左和上为准） cellspaceing="10px" 表格的外边距，边框到边框的距离 tr的属性 bgcolor="yellow" 背景颜色 align="left/center/right" 表格一行的内容水平对齐方式 valign="top/middle/bottom" 表格一行的内容垂直对齐方式 td的属性 width="70px" 当前单元格宽度 height="70px" 当前单元格高度 align="left/center/right" 当前单元格水平对齐方式 valign="top/middle/bottom" 当前单元格垂直对齐方式 bgcolor="blue" 当前单元格 colspan="2" 跨列,合并列 rowspan="3" 跨行,合并行

2.不规则的表格

1.跨列: colspan          从指定单元格位置处开始,横向向右合并n个单元格(n包括自己),被合并的单元格删除 2.跨行: rowspan          从指定单元格的位置处,纵向向下合并n个单元格(n包括自己),把被合并的单元格删除

3.可选标记

1.表格的标题     <caption></caption>     如果要设置标题,caption必须紧跟<table>标签后面  2.行/列的标题    <th></th>,td的属性,th都可以用          替换的特点:文字加粗,水平居中

4.表格的复杂应用

我们制作的表格,浏览器会自动的添加上<tbody></tbody>标签   1.行分组:可以将连续的几行,划分到同一个组中,进行统一的管理  1.表头 <thead></thead>  2.表主体 <tbody></tbody>  3.表角 <tfooter></tfooter> <thead>          <tr></tr> </thead> <tbody>          <tr></tr> </tbody> <tfoot>          <tr></tr> </tfoot>

2.表格的嵌套 表格当中所有的嵌套都只能放在td中完成

八:列表（重点*******）

 1.列表的作用

         按照从上到下或者从左到有右来显示所有数据并且可以在数据前增加标识

 2.列表的组成

         列表都是由列类型和列表项来组成

1.列表类型          有序列表  <ol></ol>  order list          无序列表  <ul></ul>  unorder list 2.列表项          <li></li>   list item

 3.有序列表

<ol>            <li></li>          </ol> 属性:  type  指定标识项的类型                    取值 1 默认值,数字                              a/A 字母                              i/I 罗马数字            start  指定起使;列表编号   取值  无单位数字

 4.无序列表

多个li样式大体一致的时候,使用ul>li 布局

经常用于页面布局 <ul>          <li></li> </ul> 属性:　type　设置列表标识类型                    取值　　disc 默认值 实心圆                                      circle 空心圆                                     square 实心方块                                      none 不显示

 5.列表的嵌套

1.列表中嵌套其它元素 2.列表中嵌套列表 原则，嵌套只能写在li中，不管是ol还是ul，直接元素只能是li

 6.定义列表

H5新出的一个名词，以及对这个名词的解释和定义 <dl>  定义列表     <dt></dt> 要解释说明的名词          <dd></dd> 对名词解释的内容 </dl>

九：结构标签

H5新出的标签，专门用于网页布局 为了让代码由可读性，h5退出一堆与div功能一摸一样的标签，专门用于网页布局   <header></header> 定义网页的头部或者某个区域的顶部 <footer></footer> 定义网页的脚步或者某个区域的底部 <nav></nav> 定义网页导航 <section></section> 定义网页的主体内容 <aside></aside> 定义网页的侧边栏 <article></article> 定义与文章相关的内容（论坛、回帖、用户评论等）

十：表单  （重点***）

1.作用

提供可视化的输入控件 收集用户输入的信息并提交请求给服务器 总结：form自带提交请求的功能            ajax提交不需要form的支持          在同一个功能中，两者只能使用其中一个

2.form的组成

前端部分：提供表单控件，与用户交互的可视化控件 后端部分：后台的接口对提交的数据进行处理 nodejs+mysql

3.form 表单详解

<form  method="" action="" enctype=""  ></form> 属性: action=“* *”    定义表单提交时，发送请求的动作（url）                                      如果action不写值，默认提交给本页 method="**"    定义表单的提交方法 get(默认)/post enctype="**"    指定表单数据的编码方式，                                      设置允许将什么类型的数据传递给服务器          取值  application/x-www-form-urlencoded 默认值，允许将任意的字符提交给服务器（不能提交文件）                      text/plain 允许提交普通字符给服务器                      multipart/form-data 允许提交文件给服务器 method 特点 使用场景 get 明文提交（参数在地址栏中显示），不安全提交的数据有大小限制，最大值为2kb 向服务器要数据的时候使用get post 隐式提交，参数不再地址栏显示，提交数据没有大小限制 要传递数据给服务器的时候使用post   其它提交方法：put、delete、option、........需要相应的权限 完整的form表单写法          <form method="get/post" action="url" enctype="application/x-www-urlencoded"></form>           收集的数据，发送给url这个接口，使用get/post方法提交，要求提交的数据是任意的字符，不是文件

4.表单控件

在form标签中，能够与用户交互的可视化控件

1.表单控件的分类

input元素 9种 textarea 多行文本域 select+option 下拉选择器 其它元素： h5 新出的input元素 10种

2.input元素

<input type=""> 在页面中，input提供了各式各样的输入控件   文本框、密码框、单选框、多选等.... 共同的属性 type="" 指定input元素的类型 name="" 为控件定义名称，此名称是给服务器用的，如果想往服务器传递参数，                                                                  此名称必须写，前后台name的值必须一致 value="" 是控件的值，真正传给服务器的值                    例外：在按钮控件中，value是设置按钮上显示的文字 disabled="" 禁用，不能修改，也不能提交                             取值  disabled="disabled"                                        disabled="true"                                        disabled   这种属性称之为无值属性

3.input 详解 9种

1.文本框和密码框   文本框 type="text"  默认值   密码框 type="password" 属性： maxlength="" 设置输入的最大值 readonly 不能修改，允许提交  无值属性 placeholder="" 占位提示符 2.按钮  提交按钮 type="submit"   将表格中的数据收集整理，发送给服务器 普通按钮 type="button"   没有功能，配合事件，调用js代码 重置按钮 type="reset"   将当前表单内容恢复到初始化状态       按钮中的value，设置按钮上的文本，此value不提交          h5推出新的按钮标签   <button></button> 自带submit提交功能 3.单选和复选按钮 单选按钮 type="radio" 多选按钮 type="checkbox"   属性 name，除了定义控件名称之外，还起到了分组作用，分了组才会有单选效果 必须有value属性，不然传递的参数永远是on      checked 无值属性，设置默认被选中的项 4.隐藏域 type="hidden"   想把数据提交给服务器，但是又不想给用户看到，这种数据                                                                  放到隐藏域中，用户看不见，但是可以提交 5.文件选择框，上传文件      type="file"      前提：提交方法，使用post；enctype="multipart/form-data"          属性：multiple 可以选择多个文件上传  无值属性 6.textarea多行文本域  <textarea></textarea>    允许录入多行       cols 设置输入的列数    rows 设置输入的行数    计算机硬件不同，不准确 7.下拉选 <select>          <option ></option>          <option ></option> </select> 属性 name、 value、 selected  默认选中          size   默认值1   值为1的时候，为下拉选择框，                                           值>1的时候，为滚动选择框          multiple   多选  无值属性 注意： 1.如果option没有value，select的value是option的内容 2.如果option有value，那么select的value是选中option的value值 8.其它元素 1.label 关联文本与表单控件 <label for=""></label>       属性 for 绑定要关联的表单控件的ID 9.分组控件 <fieldset> 分组   <legend>标题</legend>    form表单控件...... </fieldset>

 

十一：浮动框架

<iframe  style="width:100%" src="demo.html" frameborder="0" scrolling="no"></iframe> 语法：<iframe></iframe> 属性 src 引用的资源路径      frameborder="0"  清除边框          scrolling="no" 清除滚动条          width/heigth

十二：H5新表单元素

1.邮箱：提交的时候，验证@以及前后至少有一个字符 <input type="email" name="myemail"> 2.搜索类型自带快速清空 <input type="search" name="mysearch"> 3.url类型，提交时验证以http://开头 <input type="url" name="myurl"> 4.电话号码，移动端使用时，会弹出虚拟键盘 <input type="tel" name="mytel"> 5.数字类型， <input type="number" name="mynumber" max="20" min="1" step="3">          max：能接收的最大值          min：能接收的最小值          step：步长，按一次按钮，变化及格数字 6.范围类型          <input type="range" name="myrange" max="50" min="10" step="2">          max：能接收的最大值          min：能接收的最小值          step：步长，按一次按钮，变化几个数字 7.颜色类型 <input type="color" name="mycolor" > 8.日期类型，提供了日期的选择控件 <input type="date" > 9.月份类型 <input type="month" > 10.周类型 <input type="week" > 11.<button></button>  替代<input type="submit" >  增加可读性