前端学习—-HTML

第一章：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，开发工具：

IDE：DreamWeaver（收费）– WebStorm（收费）– Hbuilder（免费）

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中预留的一些字符，不能在页中直接使用
常用：< &lt 空格 &nbsp 引 ” &quot 商标 &trade
> &gt & &amp 版权 &copy 注册商标 &reg

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.性能问题

Ajax

Flash

优势：

1.可搜索性 2.开放性 3.费用 4.易用性 5.易于开发

1.多媒体处理 2.兼容性 3.矢量图形 4.客户端资源调度

劣势：

1.它可能破坏浏览器的后退功能

2.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中

1.采用二进制格式且格式私有

3.flash 文件很大，第一次使用较长的等待时间

4.性能问题

的

声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！

前端学习—-HTML

第一章：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，内联框架

相关推荐

1.1，软件架构

1.2，软件开发流程

1.3，W3C万维联盟