Html5 自学笔记

最新推荐文章于 2024-08-11 18:40:36 发布
最新推荐文章于 2024-08-11 18:40:36 发布
阅读量192 收藏
点赞数
文章标签： xhtml javascript php ViewUI
原文链接：http://www.cnblogs.com/jason-beijing/p/10327953.html
版权
 
1
html的全称
Hyper Text Markup Language
2
HTML的意义
使用标记标签( Markup Tag)来描述网页
3
HTML标签一定成对吗
是
4
<html> </html>
它们之间的文本用来描述网页
5
<body></body>
它们之间的文本描述网页上的可见内容
6
html标题标签
h1 到 h5
7html段落
用<p>来定义的
8html链接
 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">
11html元素常用属性class   规定元素的类名
id  元素的唯一id
style 元素的行内样式 inline style
title 元素的额外信息
12h标签的注意事项请仅使用于 标题  
13html水平线<hr/>
14html注释<!-- 我是注释 -->
15如果在不产生一个新段落的前提下换行使用<br/>
16所有连续的空格或空行都会被认为是一个空格
17文本格式化粗体 b
壮体 strong
大体  big
强调体 em
斜体 i
小体 small
上注 sup
下注 sub
18预格式文本标签<pre></pre>
19用于显示计算机代码的标签举例<code>
<kbd>
<tt>
<samp>
<var>
20描述地址<address> 
21tooltips用属性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>
41span定义一个小的块
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 >
&#169; 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; 或 &#60;
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()currentSrcplay
pause()currentTimepause
load()videoWidthprogress
canPlayTypevideoHeighterror
 durationtimeupdate
 endedended
 errorabort
 pausedempty
 mutedemptied
 seekingwaiting
 volumeloadedmetadata
 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
 
CanvasSVG
  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .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 对象用于接收服务器发送事件通知
 
 
 
 
 
 

转载于:https://www.cnblogs.com/jason-beijing/p/10327953.html

weixin_30355437
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5学习笔记
m0_61721166的博客
03-08 8943
一、网页 1.什么是网页 网站是指在因特网上根据一定的规则，使用 HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页” ，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html 后缀结尾的文件，因此将其俗称为HTML文件。 2.什么是HTML HTML指的是超文本标记语言(HyperTextMarkupLanguage)，它是用来描述网页的一种语言。HTML不
使用浏览器工具调试学习网页
qq_43276318的博客
02-01 477
1、打开网页 https://www.w3school.com.cn/tiy/t.asp?f=eg_html_imglink，作为学习调试例子。 2、按F12键，进入浏览器的调试状态。或者按照下图打开浏览器的开发者工具。 3、按照下图选中要调试的HTML元素 ①点击选中“1”处的选取元素 ②点击“2”处的“运行代码”。出现调试状态下的“代码区”、“CSS区”和“盒模型”区。 ③可以看到HTML元素“运行代码”对应的代码是 <a onclick="submitT...
HTML5学习手册
weixin_30622107的博客
08-27 1945
目录 HTML 简介 HTML 简介 什么是 HTML？ HTML 标签 HTML 文档 = 网页 基本的 HTML 标签 - 四个实例 HTML 标题 HTML 段落 HTML 链接 ...
黑马程序员 HTML5 学习笔记
susu的博客
07-14 2077
1.html语法规范2.html基本结构标签3.开发工具4.html常用标签5.html中注释和特殊字符
HTML5学习笔记（二）
m0_69772676的博客
01-20 1223
HTML5学习笔记（二） 对目录文件夹和根目录进行了解，并用vscode打开目录文件夹
整理下HTML4,HTML5学习笔记
2401_85258143的博客
05-27 807
定义描述
HTML最强入门学习笔记+GitHub小项目源码
02-29 506
HTML入门知识学习笔记
html+css入门学习笔记
m0_73662179的博客
01-24 366
html和css的入门学习笔记，适合入门的学者。
HTML学习笔记
m0_65939803的博客
07-16 2005
HTML学习笔记
HTML 学习笔记
OnionZuo的博客
03-19 1100
HTML/CSS/JS 前端学习笔记
HTML5学习笔记.docx
05-06
本笔记主要聚焦于HTML5的一些基本元素和特性，以及CSS中的常见样式规则和技巧，旨在帮助中低级开发者提升技能。 首先，HTML5是超文本标记语言的最新版本，它引入了许多新的语义化标签，如、、等，这些标签使得网页...
HTML5学习笔记.pdf
11-09
HTML5 学习笔记 HTML5 是 W3C 与 WHATWG 合作的结果，WHATWG 指 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。 HTML5 中的新特性包括： * ...
web前端HTML5学习笔记
09-07
前端笔记HTML5部分
html5学习笔记
01-17
HTML5学习笔记 HTML5是一种新型的网页标记语言，它提供了许多新的特性和元素，旨在提高网页的可用性、可读性和可访问性。本笔记将对HTML5的基本结构、标记、语义元素、表单、媒体元素和Canvas API进行详细的介绍。 ...
XHTML 简介
lly202406的博客
08-09 404
XHTML作为一种基于XML的标记语言，曾在一段时间内成为网页内容的标准格式。它的严格语法规则和良好的兼容性为网页设计和开发带来了便利。然而，随着HTML5的崛起，XHTML逐渐淡出了人们的视野。尽管如此，XHTML在推动网页技术发展方面所做出的贡献仍然值得我们铭记。
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 380
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
Arco Design for Vue 3 - 快速上手指南与实战技巧
最新发布
qq_42072014的博客
08-11 411
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 409
注释很详细，直接上代码……
ACCP8.0 S1 HTML5学习笔记：超文本标记语言与网页原理
"北大青鸟ACCP8.0 S1阶段的HTML5学习笔记，由教员整理，内容全面，适合初学者复习使用。" 在深入理解HTML之前，我们需要知道HTML是一种超文本标记语言（HyperText Markup Language），它主要用于描述网页内容的结构...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值