web开发概述

1. web标准分三部分：结构（HTML的所有元素的集合，元素指标签）、表现（CSS写出来得样式）、行为（JavaScript写出来的语句，用来使页面动起来）。
2. 绝对路径和相对路径：
   1. 绝对路径：以web站点根目录为参考基础的目录路径，如www.wustwzx.com/web/images/wzx.jpg
   2. 相对路径：以引用文件之网页所在的位置为产靠基础的目录路径，如：index.html在www.wustwzx.com/web/目录下，那么想使用相对路径引用文件www.wustwzx.com/web/images/wzx.jpg需要的格式为./images/wzx.jpg。xxx.html在www.wustwzx.com/web/html/目录下，那么想使用相对路径引用文件www.wustwzx.com/web/images/wzx.jpg需要的格式为../images/wzx.jpg。

“.”代表当前所在目录

“..”表示当前目录的上层目录

“/”代表站点根目录，也做路径分隔符

1. 结构的标准——网页元素的整理和分类，主要指HTML。

表现的标准——网页元素的版式、大小、颜色，主要指CSS。

行为的标准——网页模型的定义及交互的编写，指JavaScript。

1. B/S——Browser（浏览器）/Server（服务器）。
2. 动态页面是指页面的内容可以根据用户的操作和时间的变化而变化，非网页中有动起来的东西。
3. Web页面包括的东西文字、图像、超链接、视频、音频、Flash。
4. HTTP协议是建立在TCP/IP(传输层协议)上的应用层协议，在B/S中间传输信息。
5. 浏览者输网址访问网络资源过程：
   1. 浏览器与服务器建立TCP/IP连接
   2. 服务器将HTML格式文件作为响应信息返回，浏览器进行渲染（显示）呈现页面
   3. 当所有HTML资源传输完毕，web服务器结束TCP/IP连接
6. HTTP（hyper text transfer protocol超文本传输协议）使用明文传输，不适合传输银行卡号、密码等敏感信息，解决方法是HTTPS(安全套接字层超文本传输协议，本质是在HTTP上加了SSL协议，SSL依靠证书验证服务器身份，并进行B/S通信加密)。
7. HTTP的请求有三种：
   1. 在浏览器地址栏输入网站
   2. 单击超链接时产生的请求
   3. 表单提交产生的GET或POST请求
8. HTTP响应除了正文外还有cookie
9. Cookie是指——web服务器可能在客户端硬盘里存储了一些经过加密处理的非常小的文本文件，用来记录用户ID、密码、浏览过的网页，停留时间等信息。
10. HTTP/1.1 304 Not Modified不是服务器错误提示，而是服务器节省链路带宽、提升浏览器体验的缓存机制，缓存GET/js、CSS、image等。（当服务器返回HTTP/1.1 304 Not Modified意味着本地有缓存的网页，直接调用本地缓存即可）。
11. HTML文件的后缀名为.html如a.html，CSS的文件后缀名为.css如a.css，JavaScript的后缀名为.js如a.js。

使用HTML组织页面内容

1、HTML——hyper text markup language（超文本标记语言），是标记语言不是编程语言。

2、一个最基本的html文档应该包含以下内容：

Link为外部样式引用标签，style为内部样式引用标签，图片上的link、style描述有误，以现在这段描述为准。

3、标签是html中用来组织内容的容器，我们把不同的内容放到不同的标签中（就是把内容放在开始和结束标签中间）可以实现不同的展示效果。标签的格式为<标签名 属性1=“值“ 属性2=”值“ …>网页内容</标签名>，属性可以为多个也可以没有，属性不分先后顺序，属性之间用空格隔开。

4、标签一般是成对出现的，<xxx>样子的为开始标签，</xxx>结束的为结束标签。当然也有不成对出现的标签，这样的标签称之为单标签或空标签，格式为<xxx/>，也可以写成<xxx>,<xxx/>较为规范。

5、标题标签<h1>标题文字</h1>~<h6>标题文字</h6>:六个等级的标题标签。

标题的常用属性为align=””,这个属性的意味着对其方式，值有left左对齐、center水平居中、right右对齐三个值。例：让h3标题水平居中可以写成<h3 align=”center”></h3>。

6、<p></p>段落标签，其也有align这个属性，值和作用与上述一致。该标签的作用是将内容包裹成一个段落，常包裹大段文本内容表示段落或内嵌别的标签来与别的标签间分段。

7、<a href=”url”>某段内容</a>超链接标签，这个标签是将“某段内容“与超链接结合，显示为”某段内容“，点击这个内容便链接至”url“指向的网页。该标签使用时一定要有href，href没有具体指向的链接时值设为”#“。

<a href=”#id”>转向某个地方</a>标签还有另一个用法是锚点标签，当点击转向某个地方的时候，就会转向id指向的那个标签（id是标签的一个属性，每个标签都可以设置一个唯一的id来代表自己，当然也可以不设置，使用锚点的话必须给转到的标签设置id）。

8、列表标签：
无序列表<ul>

                 <li>列表项1</li>

                 <li>列表项2</li>

                 …………

</ul>

         常用属性type来指定列表项前是什么形状：
disc为实心黑圆，默认值

               circle为⚪

               square为实心黑方框

     有序列表<ol>

                 <li>列表项1</li>

                 <li>列表项2</li>

                 …………

             </ol>

     描述列表<dl>

                  <dt>名称</dt>

                  <dd>描述</dd>

                  …………<dt></dt>与<dd></dd>成对出现

</dl>

9、<img src=”路径”/>图像标签

     路径可以为绝对路径也可以是相对路径。

10、表格

需要看回放“5.HTML基础集合元素“24分钟-41分钟的讲解

   表格常见格式：

    <table>

        <caption>表格的标题</caption>                 

        <tr>                           一对<tr></tr>代表一行

     <th>表头</th>             行内各列元素可以用<td></td>或<th></th>

     …………

</tr>

        <tr>

<td>单元格内容</td>

…………

</tr>

</table>

关于<td>与<th>可以看情况来使用，一般表头用<td>来写也可以，使用<th>更规范，当然<th>只能在表头使用。

<td>的属性rowspan为合并行，值为2代表合并该列的两行数据

<td>的属性colspan为合并列，值为2代表合并改行的两列数据

11、<br/>换行标签，在html中纯文本是无法通过回车换行的，需要换行必须手动加<br/>。

12、<hr/>水平分割线，也可以写成<hr>

13、表单

 表单回放视频“6.HTML基础-表单与字符实体“12分钟-视频末。表单为重点内容需理解并记忆。

表单常用格式：

<form>

      <input type=””>       

<input type=””>

……………

<input type=”submit”>

</form>

type的值有：text-----------文本输入框

            password------密码输入框

            button--------按钮

            submit--------提交按钮

            checkbox------复选框

            radio----------单选框

按钮和提交按钮的区别：

按钮<input type=”button”>点击时没有默认行为，在没有js的情况下是没有任何功能或意义的，提交按钮<input type=”submit”>有默认的行为，既把数据提交到<form action=”某个URL”>中的“某个URL”。

<label>包围静态文本表示说明，且其有一个for=“指向某id”的属性，作用是点击label相当于点击那个id的input框。

14、<button></button>按钮标签，具有<input type="button" ... >相同的作用但是在可操控性方面更加强大，所以可以混用或根据实际情况选用。<button>可以内嵌别的标签如图片，input由于是空标签无法嵌套别的标签。

15、select标签及格式化元素

看回放“9.HTML高级“27-视频末。

<b></b>文字加粗、

<em></em>与<i></i>显示出来都是倾斜的字体、

<s></s>文字加删除线、

<u></u>文字加下划线

显示_下标

显示^上标

16、在html中很多特殊字符是需要改成代码,否则不按预期显示

由于<p>被解析成段落标签，所以相当于 <p>使用

                                         <p>标签显示段落</p>

                                     </p>

老师多写了个</p>,单个结束标签不起作用。

17、html中颜色的表示方法：
（1）、英文表示，如red、blue等

（2）、rgb（）函数表示，如rgb(red值，green值，blue值)各个值均为0-255

（3）、rgba（）函数表示，rgba（r,g,b,不透明度），不透明度的值为0-1间小数

（4）、#000000十六进制表示，类似#FF00FF可以简写成#F0F，#CCAABB可简写#CAB

18、html中度量单位：

（1）、px像素单位 ，代表计算机屏幕上一个点

（2）、%百分比，相对于当前屏幕尺寸的百分比

（3）、em，相对当前字体尺寸的倍数

19、视频11.HTML高级-样式、脚本与内联框架

（1）、CSS使用方式：

内联样式<p style=”color:blue;margin-left:20px;”></p>。

  内部样式表，使用<style></style>标签来封装css代码，并嵌入<head></head>中。

      外部样式表（推荐）在<head></head>中使用<link rel=”stylesheet” type=”text/css” href=”引用的CSS文件的相对或绝对路径”>来引入css文件。

（2）、js使用方式：

  内部使用方式，使用<javascript></javascript>标签来封装js代码，嵌入<head></head>中，也可以嵌入<body></body>中。

      外部使用方式（推荐）在<head></head>中使用<script src=”引用的CSS文件的相对或绝对路径”></script>来引入css文件，嵌入<head></head>中，也可以嵌入<body></body>中。

      通过事件模型来引用js代码，<button οnclick=”alert(“nihao”)”></button>,在onclick中引用了alert（）函数弹出对话框，如下图。

     <noscript>用来替代的内容</noscript>标签在无法使用js文件时显示为替代内容。

  （3）事件都是以on开头的，如onclick、

20、XHTML是HTML4到HTML5的过渡版本，主要作用是规范代码的编写。

21、URL编码。在html中使用的utf-8字符集

22、H5的新特性

颜色输入框<input type=”color”>

日期输入框<input type=”datatime-local”>

邮件输入框<input type=”email”>

数字输入框<input type=”number” max=“5“ min =”1“>

标签语义化

div知识补充：我们在网页布局时采用div+css的模式（span作为细节修饰使用），使用<div></div>将某些内容包起来，当我们需要更改这些内容的位置，大小、颜色等属性，通过css改div的属性便可实现。而table布局去改的话很多情况下需要改HTML文件，所以我们使用div+css模式布局。

Svg

视频标签

<video width=”” height=”” controls>

<source src=”视频源路径” type=”video/视频格式”>      

</video>

在html中凡是需要指定路径的可以为相对路径也可为绝对路径

音频标签

<audio controls>

<source src=”音频源路径” type=”audio/音频格式”>      

</audio>