目录
第一章：HTML简介
1.1， 软件架构
1.2， 软件开发流程
1.3，W3C万维网联盟
1.4，乱码
1.5，字符集
第二章：HTML—超文本标记语言
2.1，开发工具：
2.2，最基本的HTML页面
2.3，页面详解
第三章：HTML知识
3.1，常用标签（元素）
3.2，其它标签元素
3.3，属性
3.4，实体（转义字符）
3.5，标签详解（列表&图片&超链接）
3.6，语法规范
3.7，内联框架
资料分享：百度网盘
视频链接：哔哩哔哩
参考手册：W3C学院
第一章：HTML简介
1.1， 软件架构
-
C/S：客户/服务器模式，如：360，office，XMind，QQ
-
特点：使用前需安装，服务器/客户端同时更新，不能跨平台使用，采用自有协议
-
B/S：本质C/S，使用浏览器作为客户端，如：京东，淘宝
-
特点：不需安装，客户端不需更新，可跨平台，采用HTTP协议（相对不安全）
1.2， 软件开发流程
-
网页设计师根据需求设计网页
-
前端工程师将设计做成静态网页（HTTP）
-
后台工程师将静态网页改成动态网页（JSP）
1.3，W3C万维网联盟
-
结构：页面的整体结构，哪里是标题/段落/图片等（HTML）
-
表现：用于控制页面中元素的样式，字体大小/颜色，位置等（CSS）
-
行为：用于响应用户的操作，页面和用户的交互行为（JavaScript）
-
一个设计优良的网页要实现结构，表现，行为分离
1.4，乱码
-
原因：编码和解码采用的字符集不同，中文浏览默认GB2312进行解码
-
编码：依据一定的规则，将字符转换为二进制编码的过程
-
解码：依据一定的规则，将二进制编码转换为字符的过程，浏览器
-
计算机内保存的任何内容，都需要转换成0 1 二进制编码保存
1.5，字符集
| 字符集 | 功能（解码和编码所采用的规则） |
| ASCII | 英语 |
| GB2312/GBK | 中文系统的默认编码，简体/简繁中文 |
| UTF-8 | 万国码，支持地球上所有的文字 |
| ANSI | 自动以系统的默认编码来保存文件 |
第二章：HTML—超文本标记语言
2.1，开发工具：
-
文本编辑器： Notepad++(免费) –Sublime Text (收费)
-
IDE：DreamWeaver（收费）– WebStorm（收费）– Hbuilder（免费）
-
使用：新建记事本编辑，修改扩展名为.html打开 ，改代码（用记事本打开）
2.2，最基本的HTML页面
2.3，页面详解
-
<!DOCTYPE html> ：文档声明，告诉浏览器，当前使用的页面是根据HTML5标准编写的，必写
-
<html>：网页根标签，只有一个，所有内容写在它内部
-
<head>：网页头部，只有一个，内容不可见
-
< meta/> ：提供页面信息，自结束标签
-
修改页面字符集(charset)
-
设置关键字(name=”keywords”content=””)
-
网页描述(name=”description”content=””)
-
请求重定向(http-equiv=”refresh” content=”秒数 url=地址” )
-
-
<title>：网页标签，显示在浏览器标签栏，重要
-
<body>：主体，网页可见部分
第三章：HTML知识
3.1，常用标签（元素）
-
类型：<标签名> </标签名>，<标签名/>
-
换行： br ，简写
-
水平：<hr
-
居中：cente ，不推荐
-
注释：<!—注释内容 –> ，页面中不会显示，源码中显示
-
标题：h1-6 重要性逐渐降低 ，h1仅次于title，h4-6一般不用
-
段落：p，默认独占一行，段与段间有一个间距，字符之间写再多空格也只会显示一个空格
3.2，其它标签元素
| 文本格式化标签 | “计算机输出”标签 | 引用，引文，标签 | |||
|---|---|---|---|---|---|
| 加粗 | b/strong | 计算机代码 | code | 缩写 | abbr |
| 斜体 | i/em | 键盘码 | kbd | 地址 | address |
| 删除字 | del | 计算机代码样本 | samp | 文字方向 | bdo |
| 缩小/放大 | small/big | 定义变量 | var | 长的引用 | blockquote |
| 插入字 | ins | 定义预格式文本 | pre | 短的引用 | q“ ” |
| 下标 | sub | 打字机文本 | tt | 引用，引证 | cite |
3.3，属性
-
设置标签效果，名值对结构，只能在开始/结束内
-
一个标签内可以设置多个属性，属性之间用，隔开
-
举例：
-
<标签名 属性名=“属性值”，属性名=“属性值”></标签>
-
<标签名 属性名=“属性值”，属性名=“属性值”/>
-
-
提示：通过W3C进行文档查阅
3.4，实体（转义字符）
-
语法：&实体名；
-
定义：HTML中预留的一些字符，不能在网页中直接使用
-
常用：< < 空格   引号” " 商标 &trade
-
> > & & 版权 © 注册商标 ®
3.5，标签详解（列表&图片&超链接）
列表
-
无序列表：<ul>定义 <li>列表项 属性type中disc/square/circle表示实心圆点/方块/圆
-
有序列表：<ol>定义 <li>列表项 属性type中1/a/A/i/I表示阿拉伯/字母/罗马数字
-
定义列表：<dl>定义 <dt>/<dd>列表项，内容/描述 （ul/ol/dl彼此间可相互嵌套）
图片 img
-
作用： 向页面中引入外部图片
-
属性： src：图片路径（相对路径：相对于当前资源所在路径位置，返回当前前2级目录../../）
alt：图片无法加载时对图片的描述，搜索引擎通过它识别图片内容
width/ height：设置宽度/高度（单位 px，动一另一等比例调整大小，不建议用）
-
格式： JPEG：支持颜色多，可压缩，不支持透明
GIF：支持颜色少，简单透明的图片，可动态
PNG：支持颜色多，复杂透明的图片（效果一致用kb小的，不一致用好的）
超链接 a
-
href：地址（相对路径）/mailto电子邮件/页面名/不确定#/#top回到顶部
-
target：_self当前页面打开链接/_blank新窗口中打开链接/内联框架中的name值
-
<a href=”mailto:xxx@yyy”>：制作电子邮件链接
3.6，语法规范
-
不区分大小写，尽量小写
-
标签需完整（成对出现，自结束）
-
属性必须有值，值毕加引号（单/双都可）
-
注释不能嵌套，标签可嵌套（不能交叉嵌套）
3.7，内联框架
-
特点：不推荐，不会被搜索引D擎查到
-
格式：<iframe src=“demo02.html” name=“tom”></iframe>
-
属性：src:指向一个外部页面的路径，可以使用相对路径 name:可以为内联框架指定一个name属性
产生文本区：<textarea>
产生下拉列表：<select>
产生文本框：<input type=”text”>
产生复选框：<input type=”checkbox”>
添加背景颜色：<body bgcolor=”yellow”>
插入背景图像：<body background=”background.gif”>
使单元格中的内容进行左对齐：<td align=”left”>
手动写动画最小时间间隔是多久：1/60*1000ms=16.7ms
sessionStorage 保存数据的方法正确的是： sessionStorage.setItem(“键名”,”键值”);
| HTML中嵌入PHP代码 | |
|---|---|
| 脚本： | <script language=”php”> … </script> |
| 短标记： | <… gt; |
| 默认语法： | <hp …… gt; |
| .asp风格： | <% …%> |
iframe的使用场景有：ajax上传文件 资源加载 跨域访问 典型系统
| Ajax | Flash | |
|---|---|---|
| 优势： | 1.可搜索性 2.开放性 3.费用 4.易用性 5.易于开发 | 1.多媒体处理 2.兼容性 3.矢量图形 4.客户端资源调度 |
| 劣势： |
1.它可能破坏浏览器的后退功能 2.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中 |
1.采用二进制格式且格式私有 3.flash 文件很大，第一次使用较长的等待时间 4.性能问题 |
的
来源：秇淰~浮笙
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！