首页 > 其他 > 详细

2017.11月8复习总结

时间:2017-11-09 00:04:43      阅读:563      评论:0      收藏:0      [点我收藏+]

1
html(超文本标记语言由浏览器解析‘prase‘)


对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。有些浏览器会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">。


GBK包含全部中文字符;UTF-8则包含全世界所有国家需要用到的字符。

GBK是在国家标准GB2312基础上扩容后兼容GB2312的标准(好像还不是国家标准)
UTF-8编码的文字可以在各国各种支持UTF8字符集的浏览器上显示。
比如,如果是UTF8编码,则在外国人的英文IE上也能显示中文,而无需他们下载IE的中文语言支持包。 所以,对于英文比较多的论坛 ,使用GBK则每个字符占用2个字节,而使用UTF-8英文却只占一个字节。

UTF8是国际编码,它的通用性比较好,外国人也可以浏览论坛,GBK是国家编码,通用性比UTF8差,不过UTF8占用的数据库比GBK大~

 

HTML 不是一种编程语言,而是一种标记语言

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言,而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面


"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例
2
可以使用专业的 HTML 编辑器来编辑 HTML,菜鸟教程为大家推荐几款常用的编辑器:
Notepad++:https://notepad-plus-plus.org/
Sublime Text:http://www.sublimetext.com/
HBuilder:http://www.dcloud.io/

每一种操作系统都带有简单的文本编辑器:
Windows 用户可以使用记事本;
Linux 用户可以选择几种不同的文本编辑器,如 vi、vim 或者 emacs ;
Mac 用户可以使用 OS X 预装的 TextEdit。


3

经过亲自测试得出:
浏览器默认为body:100%=16px;
浏览器计算得出
h1=32px
h2=24px
h3=18.72px
h4=16px
p=16px
h5=13.28px
h6=12px

 

font-size尺寸指的是他的高还是宽:
不是宽也不是高也不是对角线,他是一种长度单位,依赖设备的的dpi,而字体渲染是另外一码事。
打个比方厘米,你说是宽呢还是高呢?


4
默认
注意:浏览器会自动地在段落的前后添加空行。(</p> 是块级元素)

5
<br>单个是换行,多个出现空行

6

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
这里的del是删除标签--出现了在文字中间;<ins>标签是插入标签,出现了underline;
My favorite color is blue red!

7
HTML "计算机输出" 标签:::
<code> 定义计算机代码-----单行
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本-------预留空格文本,可以多行;


按照惯例,引用的文本将以斜体显示。
用<cite>标签把指向其他文档的引用分离出来,尤其是分离那些传统媒体中的文档,如书籍、杂志、期刊等。如果引用的这些文档有联机版本,
最好是把该引用包含于一个a元素中,从而把一个超链接指向该联机版本。
<cite>标签还有一个隐藏功能:它可以使你或者其他人从文档中自动摘录参考书目。
可以很容易想象一个浏览器,它能够自动整理引用表格,并把它们作为脚注或者独立的文档来显示。


8
d属性可用于创建在一个HTML文档书签标记。
提示: 书签是不以任何特殊的方式显示,在HTML文档中是不显示的,所以对于读者来说是隐藏的。
(您可以使用 id 属性来替代 name 属性,命名锚同样有效。[1])

在标签<a> 中使用了href属性来描述链接的地址。
默认情况下,链接将以以下形式出现在浏览器中:
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时,链接显示为红色并带有下划线。
注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。

9
<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:
<base href="http://www.runoob.com/images/" target="_blank">

<meta> 标签- 使用实例-----name,http-equiv,:http://www.jb51.net/web/70787.html
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="免费 Web & 编程 教程">
<meta name="author" content="Runoob">
<meta http-equiv="refresh" content="30">

10
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.

在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。
不建议使用的标签有: <font>, <center>, <strike> <strike>仍然支持</strike>已经不支持这个标签了。--删除线
不建议使用的属性: color 和 bgcolor.
<body bgcolor="#E6E6FA"> ---bgcolor是属性;


11
注意: 假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。
加载图片是需要时间的,所以我们的建议是:慎用图片。

他的属性align="middle" .......left,top,等

border,边框属性;


12

<img> 定义图像
<map> 定义图像地图
<area> 定义图像地图中的可点击区域

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>


1、距形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
2、圆形:(圆心坐标为(X1,y1),半径为r)
<area shape="circle" coords="x1,y1,r" href=url>
3、多边形:(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>

13

<caption>表格的标题
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。
使用边框属性来显示一个带有边框的表格:

跨行或跨列的表格单元格:
<th colspan="2">Telephone</th>---跨行
<th rowspan="2">Telephone:</th>---夸列

table 里可以嵌套

vertical-align垂直属性对齐

<table border="1"
cellpadding="10">-----单元格边距(Cell padding)

<table border="1" cellspacing="0">-----单元格间距(Cell spacing)

 

<colgroup> 定义表格列的组
<col> 定义用于表格列的属性


<col span="2" style="background-color:red">
<col style="background-color:yellow">

 

14
HTML 自定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。


<ol type="a A 罗马字母的大小写 ">type是 列表的属性
<ul style="list-style-type:disc"> circle square


15
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。
使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span> 元素是内联元素,可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。


16表单

HTML <optgroup> 标签
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars" disabled>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

 

label 属性为选项组规定描述标签。
disabled 属性是一个布尔属性。
disabled 属性规定选项组应该被禁用。

 


<select>的属性
autofocusNew autofocus 规定在页面加载时下拉列表自动获得焦点。
disabled disabled 当该属性为 true 时,会禁用下拉列表。
formNew form_id 定义 select 字段所属的一个或多个表单。
multiple multiple 当该属性为 true 时,可选择多个选项。
name name 定义下拉列表的名称。
requiredNew required 规定用户在提交表单前必须选择一个下拉列表中的选项。
size number 规定下拉列表中可见选项的数目。

 

17框架
使用 iframe 作为链接的目标
iframe 可用作链接的目标(target)。
链接的 target 属性必须引用 iframe 的 name 属性:
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

 

框架结构标签(<frameset>)
框架结构标签(<frameset>)定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积
编者注:frameset 标签也被某些文章和书籍译为框架集。

18颜色
HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。
每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。
(1600万种不同颜色:256 x 256 x 256)

rgba(255,255,0,0.5)可以实现设置颜色透明度的功能,这里的0.5表示透明度,范围0~1。

颜色名:antique white --古董白
coral 珊瑚的;珊瑚色的
yellowgreen:黄绿;
Violet 紫罗兰;
brown:n. 褐色,棕色
navy:深蓝色;海军;DarkBlue :深蓝色;
teal:鸭子,青色;


19脚本

<script>
document.write("Hello World!")
</script>
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>-----为了 不支持脚本的浏览器应用
提示:如果浏览器支持脚本,那么它不会显示出 noscript 元素中的文本。

 

 

19
<object> 标签用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。

20URL
21
<a href="mailto:sample@163.com?subject=test&cc=sample@hotmail.com&body=use mailto sample">send mail</a>
mailto后跟的是收信人。
可使用参数列表
to 收信人
suject 主题
cc 抄送
bcc 暗抄送
body 内容

 

22国际标准化组织---ISO----ISO 639-1 为各种语言定义了缩略词。您可以在 HTML 和 XHTML 中的 lang 和 xml:lang 属性中使用它们。

 

写在html标签中的lang属性作用:声明当前页面的语言类型。

如:

<html lang=‘en‘></html> //英文
1
<html lang=‘zh‘></html> //中文
1
<html lang=‘ja‘></html> //日文
1
<html lang=‘en-us‘></html> //美式英文


23HTTP 状态消息
以下列举了有可能会返回的一系列 HTTP 状态消息:
2xx: 成功
4xx: 客户端错误
5xx: 服务器错误

24
两种最常用的 HTTP 方法是:GET 和 POST。
超文本传输协议(HTTP)的设计目的是保证客户端与服务器之间的通信。

 

25
下表列出了在网页字体默认值为 16px 时, px 和 em 及网页字体百分比的换算数据。

 

26IE浏览器

技术含量最高的是IE10,性能最好的是IE9,国内使用人数最多的是IE7、8,
因为国内大多数还是XP。而且盗版居多,不,是特别多。盗版不会自动更新,
所以IE7、8最多,而且IE9也不支持XP

 

甚至你可以教会 IE6 (Windows XP 2001) 浏览器处理未知的 HTML 元素。

HTML5 定了 8 个新的 HTML 语义(semantic) 元素。所有这些元素都是 块级 元素。
header, section, footer, aside, nav, main, article, figure {
display: block;
}
为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 block:


----------------创建新的元素,利用javascriptdedocument.creatElement(‘‘),记得 CSS把其设置为block
你可以为 HTML 添加新的元素。
JavaScript 语句 document.createElement("myHero") 是为 IE 浏览器添加新的元素。


EG:

<myHero>我的第一个新元素</myHero>
<script>
document.createElement("myHero")
</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>

 

27


HTML5

swf(shock wave flash)是Macromedia(现已被ADOBE公司收购)公司的动画设计软件Flash的专用格式,
被广泛应用于网页设计、动画制作等领域,swf文件通常也被称为Flash文件。

bdi 指的是 bidi 隔离(Bi-directional Isolation)。
<bdi> 标签允许您设置一段文本,使其脱离其父元素的文本方向设置。

注释:只有 IE 9 支持 <command> 标签,其他之前版本或者之后版本的 IE 浏览器不支持 <command> 标签。

 


IE 10、Firefox、Opera、Chrome 和 Safari 6 支持 <progress> 标签。


28


SVG优势
与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:
SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

 

Canvas 与 SVG 的比较
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas SVG
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏,其中的许多对象会被频繁重绘
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序(比如谷歌地图)
复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
不适合游戏应用

 

 


29

e.target 是目标对象,e.event是目标所发生的事件。

2017.11月8复习总结

原文:http://www.cnblogs.com/gongwu/p/7806867.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!