Html5 自学笔记

时间：2022-03-26 05:15:56
 
1
html的全称
Hyper Text Markup Language
2
HTML的意义
使用标记标签( Markup Tag)来描述网页
3
HTML标签一定成对吗
 是
4
<html> </html>
 它们之间的文本用来描述网页
5
<body></body>
它们之间的文本描述网页上的可见内容
6
html标题标签
 h1 到 h5
7 html段落
用<p>来定义的
8 html链接
 html链接是用<a> 来定义的
   比如 <a href="www.17zuoye.com">This is a link</a>
9
html图像
用<img>来定义的
   比如 <img src="avatar.jpg" width="100" height="80">
10 元素属性举例 1.超链接 <a href="www.17zuoye.com">link</a>
2.对齐 <h1 align="center">
3.背景颜色 <body bgcolor="yellow"></body>
4.表格边框粗度 <table border="1">
11 html元素常用属性 class   规定元素的类名
id  元素的唯一id
style 元素的行内样式 inline style
title 元素的额外信息
12 h标签的注意事项 请仅使用于 标题  
13 html水平线 <hr/>
14 html注释 <!-- 我是注释 -->
15 如果在不产生一个新段落的前提下换行 使用<br/>
16 所有连续的空格或空行 都会被认为是一个空格
17 文本格式化 粗体 b
壮体 strong
大体  big
强调体 em
斜体 i
小体 small
上注 sup
下注 sub
18 预格式文本标签 <pre></pre>
19 用于显示计算机代码的标签举例 <code>
<kbd>
<tt>
<samp>
<var>
20 描述地址 <address> 
21 tooltips 用属性title
22 覆盖现有的文字方向 <bdo dir="rtl"> this is a text </bdo>
23
html元素
从开始标签 到 结束续签 的所有代码
24
元素内容
 开始和结束标签中间的部分
25
标签名一定要用小写
  
26
大多数html标签 是有 属性的
  
27 长引用 或 短引用 <blockquote> <q>
28 长引用 和 短引用 的区别 长引用会插入换行 + 外边距 
29 删除字效果 和 下划线效果 <del> <ins>
30 定义缩写词 <abbr>
31 定义首字母缩写词 <acronym>
32 改变文本的外观有两类 基于内容的 物理样式
33 设定特定标签的样式
<style type="text/css">
h1{color: #ff2241}
p{color: #00ccff}
</style>
34 没有下划线的链接
<a href="http://www.baidu.com" style="text-decoration: none">go to baidu</a>
35 样式的分类 外部样式表 内部样式表 内联样式
36 外部样式表的引用方法 
<link rel="stylesheet" type="text/css" href="testStyle.css">
37 内联样式的写法
<p style="color: #00cc00;margin-left: 20px">这是我的第一个段落</p>
38 定义文档中的节或区域 <div>
39
超链接有两种
1. 相对路径的  href="/index.html"
2. 网站 href="http://www.baidu.com"
40 将图片作为链接  <a href="url"> <img src="/test.jpeg"></img></a>
41 span 定义一个小的块
42 <a>有两种类型 把提供热点和超链接地址的锚看作“链接”，而用于标记文档的目标部分的锚称为“锚”. 
43 “链接文本” "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
44 如何定义链接的文档在何处显示 <a>标签里的 target属性 .   比如 _blank 表示会在新的标签页显示
_top会刷新本页面(或者叫做跳出框架)
45 命名锚的用法 <a name="tips">我是目标锚</a>
<a href="url#tips">点击我会跳转</a>
46 在链接里  请始终将正斜杠添加到子文件夹 原因 因为当服务器发现 末尾没有/时，会自动再加一次，即会发生两次请求
47 邮件链接 <a href="mailto:jianjun.xiao@foxmail.com?cc=jason@foxmaill.com&bcc=jeff@foxmaill.com&subject=Hello%20Message&body=hello!"> 点击这里发邮件</a>
48 <img>标签，如果显示图片失败，可显示文字来做为提示 <img alt="这是一张小女孩的图片"/>
49 给html页面添加背景图 <body background="img.jpeg"/> 
如果图片过小，则图片则会重复显示
50 在文字中排列图片 <img src="test.jpeg" align="bottom"/>  bottom是默认的，还有top middle
51 图片浮动到文字的左右侧 <img src="test.jpeg" align="left"/> 图片会浮到在文字的最左侧，上缘对齐文字的上缘
52 调整图像尺寸 <img width height 
53 创建图像映射 这个较复杂，代码见: http://www.w3school.com.cn/tiy/t.asp?f=html_areamap
  在WebStrorm中命名包 vom/jason/view
  Html中的图片的相对路径 ../ 表示向上一级
  把图像转换为图像映射
显示图像坐标
<a href="">
<img src="../../../raw/eg_planets.jpg" ismap/>
</a>
http://www.w3school.com.cn/tiy/t.asp?f=html_ismap
  表格 表格行 表格数据 <table> <tr> <td>
  表格边框 <table border="10"/>
  空格占位符 &nbsp;
  表头格 <th>
  表格的标题 <table> <caption></caption></table>
  跨行或跨列的表格单元格 <th colspan="2"/>
<td rowspan="3"/>
  在td里嵌套table或list <td> <table/> </td>
<td> <ul><li/></ur> </td>
  表格内的文字在上下左右方向离边界线的距离 <table cellpadding="10"/>
  单元格间距 <table cellspacing="10"/>
  给表格添加背景颜色或背景图片 <table bgcolor="red"/>
<table background="test.jpeg"/>
  格子里文本的对齐 <td align="left"/> 可选 left right 默认就是居中
  table最外边缘的五种类型 <table frame="box"/>
above below hsides vsides
  区分table的页眉行 主体 页脚行 thead tbody tfoot
  在table中，通过col来设置宽度 <table> <col align="left"/>
colgroup
  无序列表 <ul>
<li/>
  有序列表 <ol start=“10”>
<li/>
  有序列表的type可有的值 ol type = A a I i
  无序列表的type可有的值 ul type= circle disc square 
  元素可分两类 块元素  <h1>, <p>, <ul>, <table> 这些在显示上都会先换行
内联元素  <b>, <td>, <a>, <img>
  input
password
<form>
用户名: <input name="username" type="text">
<br/>
密码: <input name="password" type="password">
</form>
  文本域的缺省宽度 20个字符
 

Radio Buttons
<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>
 

复选框（Checkboxes）
<form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form>
 

表单的动作属性（Action）
<form name="input" action="MapHref.html" method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
</body>
  input的类型有哪些 text password submit radio checkbox
  radio标签默认选中一个 <input type="radio" name="sex" checked="checked"/>
  下拉选项
<select name="nation_select">
<option value="1">China</option>
<option value="2">Japan</option>
<option value="2" selected="selected">USA</option>
</select>
  按钮  <input type="button"/>
 
在数据周末围一个带文字的边框
 <form>
  <fieldset>
     <lengend>我是标题</legend>
  </fieldset>
</form>
  点击标签，触发相关控件
<form>
<label for="china" >China</label>
<input type="radio" name="nation" value="china" id="china">
<br/>
<label for="japan">Japan</label>
<input id="japan" name="nation" type="radio" value="japan">
</form>
  radio checkbox用什么来控制组 name
  选项组用什么标签 optgroup
  垂直框架 frameset cols=“25%,25%,50%”   frameset不能在body里面
  水平框架
frameset rows=“25%,25%,50%”
  noframes的使用方法 <noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
  禁止手动拖动改变frame的宽度 <frame noresize="noresize"/>
  ifame标签 内联框架 <iframe src="/i/eg_landscape.jpg"></iframe>
可以在body里面使用
  跳转至框架内的一个指定的节 锚点  <frame src="/example/html/link.html#C10">
 

Iframe - 删除边框

 <frame frameborder="0"/>
  在iframe中打开链接  
  图像文件不应该超过 10k
 

Definition list
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
 

Entities
&lt; is the same as <
&gt; is the same as >
© is the same as ©
  如何使用 base 标签使页面中的所有标签在新窗口中打开。 <head>
<base target="_blank" />
</head>
  用meta来记录文档信息 <meta name="revised"
content="David Yang,8/1/07">
  5 秒内被重定向到新的地址
<meta http-equiv="Refresh" content="3;url=http://www.baidu.com">
  <base>的作用
<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>
  外联样式表的方法
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
  noscript的使用 <noscript>Sorry, your browser does not support JavaScript!</noscript>

<p>不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。</p>
 

如何应付老式的浏览器

如何应付老式的浏览器

如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。
 

HTML 实体

 如需显示小于号，我们必须这样写：&lt; 或 <
http://www.w3school.com.cn/html/html_entities.asp
 

不间断空格

non-breaking space
 &nbsp;
  嵌入flash
<embed src="bookmark.swf" width="400" height="40"></embed>
  嵌入mp3
<embed height="100" width="400" src="/i/horse.mp3"></embed>
<object height="100" width="100" data="song.mp3"></object>
  html5中的audio标签 <audio controls="controls">
  <source src="/i/song.mp3" type="audio/mpeg">
</audio>
  最好的音频播放方式 <audio controls="controls">
  <source src="/i/song.ogg" type="audio/ogg">
  <source src="/i/song.mp3" type="audio/mpeg">
<embed height="100" width="100" src="/i/song.mp3" />
</audio>
  使用  雅虎的媒体播放器 向网页添加音频 <p><a href="/i/song.mp3">播放 mp3</a></p>
<p><a href="/i/bird.wav">播放 wav</a></p>

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js" target="iframe_name"></script>
  video

最好的html解决方案

HTML 5 + <object> + <embed>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240" />
</object>
</video>
 

优酷解决方案
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"
width="480" height="400"
type="application/x-shockwave-flash">
</embed>
 

使用超链接

“辅助应用程序
<a href="movie.swf">Play a video file</a>
  XHTML  是以xml格式编写的html
  xhtml检查器 https://validator.w3.org/nu/
  xhtml文件的文档声明
<html xmlns="http://www.w3.org/1999/xhtml"/>
 

文本区标签

 <textarea/>
  HTML5是什么的新标准 html xhtml dom
  html5的video支持三种视频文件 ogg  mpeg4 webM
  video <video src="/i/movie.ogg"  width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
  video的属性 controls 显示播放控制
autoplay="autoplay"自动播放
loop="loop"循环播放
preload="preload"预备加载
  video的方法 属性 事件 请见：
方法 属性 事件
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error
  duration timeupdate
  ended ended
  error abort
  paused empty
  muted emptied
  seeking waiting
  volume loadedmetadata
  height  
  width  
在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。
  audio可以播放的音频格式有哪些 mp3 ogg wav
  ogg文件适用的浏览器
使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器
 
 MPEG4文件适用的浏览器
Safari 
   我发现Ogg 文件 在chrome里好像播放不了
 

设置元素为可拖放

 <img dragable="true"/>
 
HTML5 定了 8 个新的 HTML 语义（semantic） 元素
header, section, footer, aside, nav, main, article, figure 
 
为 HTML 添加新的元素
document.createElement("myHero")
  样式里的  display:block; 表示是块级元素，即会占领一整行到边缘
  如果ie6到ie8并不支持html5 可以在<head>里加上
<!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js">
  </script>
  <![endif]-->
  html5包括的新多媒体元素 audio video source embed track
  新表单元素 datalist keyken output
  新的语义和结构元素 article 独立的内容区域 
aside 定义页面的侧边栏内容
bdi 文本方向
command 定义命令按钮
details 描述细节
dialog 定义对话框
summary 标签包括details元素的标题
figure 规定独立的流内容
figcaption figure元素的标题
footer 定义section 或 document的页脚
header 定义文档的头部区域
mark 定义带有标记的文档
meter 定义度量衡
nav 定义运行中的进度
progress 定义任务进度
ruby 定义ruby注释
rt 定义字符的解释或发音
rp 定义不支持ruby注释 
  section 定义文档中的节
  time 定义日期或时间
  wbr 规定在文本中的何处适合添加换行符
  canvas
绘图
以下代码得放到<canvas>标签之后
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
  canvas画直线
var canvas =document.getElementById("myCanvas");
var context = canvas.getContext("2d") ;
context.moveTo( 0, 10 ) ;
context.lineTo( 50, 50 ) ;
context.stroke() ;
  canvas画圆圈  
  canvas画实心文本
context.font = "50px Arial" ;
context.fillText( "我是测试员", 10,50 ) ;
  canvas画空心文本
context.font = "50px Arial" ;
context.strokeText( "我是测试员", 10,50 ) ;
  canvas画渐变色
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d") ;

var gradient = context.createLinearGradient(0,0,200,100) ;
gradient.addColorStop( 0, "red" );
gradient.addColorStop( 1, "white" ) ;

context.fillStyle = gradient ;
context.fillRect( 10,10,200,90 ) ;
  canvas 径向圆渐变
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d") ;

var gradient = context.createRadialGradient(100,50,50,100,50,100);
gradient.addColorStop( 0, "#ff0000" ) ;
gradient.addColorStop( 1, "#ffffff" ) ;
context.fillStyle = gradient ;
context.fillRect( 0, 0, 200, 100 ) ;
  把一幅图放置在画布上
var canvas0 = document.getElementById("myCanvas") ;
var context0 = canvas0.getContext("2d") ;

var imgGirl = document.getElementById("img_girl") ;

context0.drawImage( imgGirl, -100, 0 ) ;

 
为毛刷新一下页面，才能看到效果!!
  什么是svg 是 scalable vector graphics 
定义网络的基于矢量的图形
使用xml来定义图形
在放在或缩小情形小图片质量不会发生变化
它是W3C标准
  canvas和svg
 
Canvas SVG
  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  • 不适合游戏应用
 
 
拖拽功能
 
显示用户经纬度
 
html5视频
 
html5音频
 
html5 input类型
color time　等等
 
html5 表单元素
其中包括 output这一表单元素 
 
 
html5表单新属性
 http://www.runoob.com/html/html5-form-attributes.html
 
html5语义元素
header nav section article aside figcaption figure footer
 
html5 web存储
localStorage
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
 
html5 应用程序缓存
 
应用程序缓存为应用带来三个优势
  1. 离线浏览 - 用户可在应用离线时使用它们
  2. 速度 - 已缓存资源加载得更快
  3. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
 
web worker
web worker 是运行在后台的 JavaScript，不会影响页面的性能。
web worker 无法访问到 windows document parent 
 
HTML5 服务器发送事件（server-sent event）
EventSource 对象用于接收服务器发送事件通知
 
 
 
 
 
 

Html5 自学笔记的更多相关文章

  1. HTML5自学笔记&lbrack; 11 &rsqb;canvas绘图基础1

    html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...

  2. HTML5自学笔记&lbrack; 10 &rsqb;简单的购物车拖拽

    用html5拖拽功能实现了一个简单的购物车,样式简陋,得学学画画提高下审美了T^T: <!doctype html> <html> <head> <meta ...

  3. HTML5自学笔记&lbrack; 9 &rsqb;HTML5实现元素的拖放

    要想在html5中实现元素的拖放,被拖放元素就必须设置属性draggable="true";被拖放元素被放置的地方是另外一个元素,该元素是目标元素:这两个元素在拖放过程中都会触发不 ...

  4. HTML5自学笔记&lbrack; 24 &rsqb;canvas绘图之星空草地

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. HTML5自学笔记&lbrack; 23 &rsqb;canvas绘图基础7

    变换矩阵: transform(a,b,c,d,e,f),多次使用该函数,效果是多次状态改变的累加: setTransform(a,b,c,d,e,f),会忽略之前的变换,从起始状态开始改变.

  6. HTML5自学笔记&lbrack; 15 &rsqb;canvas绘图基础6

    关于线条的一些属性: lineCap,这个属性表示的是线条两端的样式,值有butt(默认)/round/square. lineJoin,这个属性表示线条相交的方式,值有miter(默认)/bevel ...

  7. HTML5自学笔记&lbrack; 21 &rsqb;canvas绘图实例之马赛克

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. HTML5自学笔记&lbrack; 20 &rsqb;canvas绘图实例之绘制倒影

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. HTML5自学笔记&lbrack; 19 &rsqb;canvas绘图实例之炫彩时钟

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. IDEA设置代码大小以及菜单栏大小

    IntelliJ IDEA设置菜单栏大小的方法:File --Settings --Appearance & Behavior -- Appearance ,右边Override defaul ...

  2. Mac OS X 系统12个常用的文本编辑快捷键（移动、选中）

    经常和文字处理打交道?如果多多使用下面这 12 个快捷键,在移动.选择.复制等操作文字时效率会大大提升. 6 个移动光标的快捷键第一组快捷键可以用来在文本中快速移动光标: 跳到本行开头 – Comma ...

  3. HDU 1069---背包---Monkey and Banana

    HDU 1069 Description A group of researchers are designing an experiment to test the IQ of a monkey. ...

  4. jquery checkBox的问题

    在新版的jquery中选择ckeckbox最好使用prop方法,否则会出现一些问题.比如手动点击取消,再使用代码全选或者反选时候就不好使啦!!!

  5. 用正则表达式替换内容 php

    以前做一个项目,就是有一个问答的页面,比如说在回答或者提问的内容中插入表情.写到内容里的是表情图片的名字(而且是不带后缀的,比如:f_002.png)表情包放在项目里,我需要在取除内容的时候将里面的表 ...

  6. Tomcat&lpar;&period;jsp&rpar;

    定义: Tomcat服务器是一个免费的开放源代码的Web应用服务器.Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由 ...

  7. Python笔记 in 机器学习

    Python3的函数实在太多了,在机器学习的过程中,总会一不留神就学到一个python的高效率用法,怕自己会忘记,所以更新在这篇随笔中. 更新至:2018.5.23 字符串str的前缀或者后缀识别 s ...

  8. 超详细的java集合讲解

    1 集合 1.1 为什么会出现集合框架 [1] 之前的数组作为容器时,不能自动拓容 [2] 数值在进行添加和删除操作时,需要开发者自己实现添加和删除. 1.2 Collection接口 1.2.1 C ...

  9. Python第七章（北理国家精品课 嵩天等）

    7.1文件的使用 1.1文本类型 文本文件:由单一特定编码组成的文件,如.txt 二进制文件:如.png,.avi 1.2文件的打开和关闭 打开-操作-关闭 <变量名> = open(&l ...

  10. Spring使用内存数据库

    有时候为了做些测试需要创建数据库及相关表,安装MySQL等轻量数据库虽然简单但还是有点麻烦?而且用于自己临时测试的数据库对象一般不会被多次使用,还是浪费?内存数据库结合ORM可以很好解决这个问题. H ...

相关文章