-Heaven的博客

编程小白

HTML常见知识点
基础教程(整理自w3c,详情参见http://www.w3school.com.cn/

HTML:超文本标记语言,不是一种编程语言,而是一种标记语言,就是一套标记标签(markup tag),通过标记标签来描述网页
HTML标签:用尖括号包围的关键词,成对出现
HTML文档=网页
HTML文档也称为网页,包含HTML标签和纯文本
web浏览器读取HTML文档,以网页的形式显示,不会显示标签,而是使用标签来解释页面的内容
<h1>~<h6> 标题 数字越大字体越小
<p>       段落 <p>hello,heaven</p>
<a>       链接 <a href='http://www.w3cschool.com.cn'>This is la link</a>
<img>     图像 <img src='' width='' height='' />
<br> <br /> 有什么区别 后者表示关闭空元素的正确写法
<br />也可用来在元素中进行换行
<div> division 块级元素 可以将文档分割为独立的、不同的部分

HTML元素指的是开始标签到结束标签的所有代码(不包括标签)
HTML标签中对大小写不敏感,但推荐全部使用小写

<h1 align='center'> 对齐方式
<body bgcolor="yellow"> 背景颜色
<table border="1"> 表格边框 双引号 单引号都可双引号比较常用

常用属性:
属性      值     描述
class classname   规定元素的类名
id id 规定元素的唯一ID
style    style_definition 规定元素的行内样式(inline style)
title text   规定元素的额外信息
lang                      规定元素内容的语言

Heading:浏览器会自动地在标题的前后添加空格,最后从h1到h6使用
水平线:<hr /> 会加上一条线,注意跟br的区别
注释:<!--This is a comment --> 左边的感叹号是必须的,破折号也是不能省略的

HTML样式(style):style属性提供了一种改变所有HTML元素的样式的通用方法
一下标签和属性应避免使用:
标签:center font s u 
属性:align bgcolor color 
以上可用样式代替
<body bgcolor="yellow"></body> --><body style="background-color: yellow">
样式实例:font-family color font-size 分别定义元素中的文本的字体系列、颜色和字体尺寸
<p style="font-family: arial;color:red;font-size: 20px;">A paragraph</p>
文本对齐:<h1 style="text-align: center"> This is a heading</h1>

文本格式化标签
<b>     定义粗体文本
<big>   定义大号字
<em>    定义着重文字
<i>     定义斜体字
<small> 定义小号字
<strong>定义加重语气
<sub>   定义下标字
<sup>   定义上标字
<ins>   定义插入字
<del>   定义删除字

计算机输出标签
<code> 定义计算机代码
<kdb>  定义键盘码
<var>  定义变量
<pre>  定义预格式文本


引用、术语定义
<abbr>    定义缩写
<address> 定义地址
<cite>    定义引用
<dfn>     定义一个项目

引用(quotation):
短引用:<q>...</q>
长引用:<blockquote cite=" ">....</blockquote>
一些标签:
<abbr>:缩写
<address>:作者联系信息
<bdo>:文本方向
<blockquote>:
<dfn>:项目或缩略词的定义
<q>
<cite>

代码元素:
<code>:计算机代码文本
<kdb>:键盘文本
<samp>:计算机代码示例(无空格和折行)
<var>:变量
<pre>:预格式化文本(保留原有格式)

css:通过使用HTML4.0,所有的格式化代码均可移出HTML文档,放在独立的样式表中
style="text-decoration:none"可以去掉超链接的下滑线
样式表:
外部:<link rel="stylesheet" type="text/css" href=" ">
内部:<head><style type="text/css"> ...</style></head>
内联样式:在标签中使用样式属性<p style=" "></p>

链接:与网络上的另一个文档相连
<a href=" " target=" ">文本/图像</a>
target="_blank" 链接会在新窗口打开
<a>:定义锚,在其他地方可以跳到这里
<p><a href="#C4">查看chapter 4</a>
...
<h2><a name="C4">chapter 4</a></h2>


图像:<img src=" " alt="Big Boat" width=" " height=" ">,没有闭合标签
src是source的缩写
alt:替换文本属性,当浏览器无法加载图像时显示此信息
align:排列图像,可选值:bottom middle top left right 
<map>:定义图像地图
<area>:定义图像地图中的可点击区域
图像映射这部分没看懂?

表格:
<table>:表格
<tr>:行
<td>:table data,可以认为是列
<th>:表头
<caption>:标题
<thead>:页眉
<tbody>:主体
<tfoot>:页脚
<col>:列的属性

列表:
<ol>:有序列表
<ul>:无序列表
<li>:列表项
<dl>:自定义列表,不仅是一列项目,而是项目及其注释的组合
<dt>:自定义项目
<dd>:自定义的描述
<dir> <menu>已弃用 用<ul>代替

块:
<div>:块级元素,block level element,定义文档中的分区或节,通常以新行开始
<span>:内敛元素,inline element,用来组合文档中的行内元素,不以新行开始

类:对HTML进行分类,就能够为元素的类定义css样式
<span> 分类行内元素,能够用作文本的容器

布局:?
<div> 块元素 
css 
HTML语义元素
header  定义文档或节的页眉
nav     定义导航链接的容器
section 定义文档中的节
article
aside
footer  页脚
details
summary 

<table>不是作为布局工具二设计的,作用是显示表格化的数据,通过css设置表格元素的样式

响应web设计:RWD(responsive web design)响应式网页设计能够以可变尺寸传递网页,对于平板和移动设备是必需的
两种方法实现RWD
自己设计
使用Bootstrap:流行的开发响应式web的HTML,CSS和JS框架

框架:在同一个浏览器窗口中显示多个页面 ?
frameset:将窗口分隔为框架 frame:定义放置在框架中的HTML文档
<frameset cols="25%,75%"> //行 rows
<frame src=" ">//示例中没有闭合标签?
<frame src=" ">
</frameset>
内联框架:HTML Iframe,在一个网页中显示另一个网页 <iframe src="url"></iframe>
height和width用于规定iframe的高度和宽度 单位默认为像素,也可以用百分比来表示
<iframe src="...html" width="200" height=" "></iframe>
删除边框: frameborder="0" 设置大点除了有边框好像没有其他影响
使用iframe作为链接的目标(target) target的属性必须引用iframe的name属性?
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

背景:好的背景使网站更漂亮
背景颜色:bgcolor
背景:background 背景图片gif jpg

脚本:
<script></script>
<noscript>Your browser does not support JavaScript</noscript>:在无法使用脚本时的替代内容(如浏览器禁用)

头部:
<title>:定义文档的标题,在HTML中必须有
<base>:为页面上的所有链接规定默认地址或默认目标(target)
<base href="">    <base target="">
<link>:定义文档与外部资源的关系,最常用于连接层叠样式表  <link rel="stylesheet" type="text/css" href=" ">
<style>:为HTML文档定义样式信息
<meta>:元数据(metadata)是关于数据的信息,不会显示在页面上,但对于机器是可读的
meta元素被用于规定页面的描述、关键词、文档的作者、最后修改时间
还是不是太懂是干嘛的?
<script>:定义客户端脚本

 URL编码:将字符转换成可通过因特网传输的格式,URL只能使用ASCII字符集来通过因特网进行发送,其他字符会被替换成带%的两位十六进制数来替换,URL不能包含空格(可用+代替空格)

 HTML Web Server:如果希望发布自己的网站,必须存放在web服务器上,可以自己搭建,需要硬件、软件、和人工费,也可以使用因特网服务提供商(ISP)

 HTML颜色:颜色由红绿蓝混合而成(RGB),颜色用一个十六进制符号来定义,每种颜色的最小值是0(#00),最大值是255(#FF)
 一共256种颜色,216种跨平台色(安全色),其余40种被微软和Mac系统用作固定的系统颜色

 HTML颜色名:可以用名字表示(blue white yellow),也可以用16进制表示(#00FFFF)

 HTML文档:web世界有许多不同(版本)的文档,必须告诉浏览器使用的版本,浏览器才能正确的显示
 <!DOCTYPE>声明,告诉浏览器HTML是用什么版本写的  <!DOCTYPE html> html5

 XHTML:可扩展超文本标记语言,以XML格式编写的HTML,是更严格更纯净的HTML版本
 元素语法
   XHTML元素必须正确嵌套
   XHTML元素必须始终关闭
   XHTML元素必须小写
   XHTML文档必须有一个根元素
   XHTML属性值必须用引号包围
   <!DOCTYPE..>是强制性的
   <html> <head> <title> <body>必须存在

 HTML表单:用于搜集不同类型的用户输入
 form元素:input元素 复选框 单选按钮 提交按钮等
 <input> type类型
  text:文本输入
  radio:单选按钮,跟name值有关,同样的name只能选中一个
  submit:提交按钮,向表单提交程序提交表单

form 属性的列表
accept_charset:提交表单中使用的字符集
action:规定向何处提交表单的地址(URL),若省略则默认为当前页面
autocomplete:规定浏览器自动完成表单
enctype:规定被提交的数据的编码
method:提交时使用的HTTP方法
name:识别表单的名称,不设置name的数据不会被提交//每个需提交的字段必须都有一个name属性
novalidate:规定浏览器不验证表单
target :规定action属性中地址的目标

表单元素:
<input>:最重要的元素
<select>:下拉列表
<option>:定义待选择的选项,和select配合使用,可以通过selected定义默认选项
<textarea>:定义一个文本域 <textarea name="message" rows="10" cols="30">
<button>:定义可点击的按钮,可跟onclick配合使用
<datalist>:设置预定义值得<input>元素

HTML输入类型:
text:文本框
password:密码,会被掩码处理
submit:提交
radio:单选
checkbox:复选,可选择0个或多个
button:按钮
number:包含数字值得输入字段,也可以对数字进行限制
date:日期
color:颜色选择器
range:输入字段显示为滑块控件
month:选择月份和年份
week:选择周和年
time:选择时间(无时区)
datetime:选择时间和日期(有时区)
datetime-local:选择时间和日期(无时区)
email:电子邮件
search:搜索字段
tel:电话号码
url:URL地址

Input属性:
value:规定输入字段的初始值
readonly:只读,输入值已指定,无法修改
disabled:规定输入字段被禁用,类似于只读,无法修改,而且不会被提交
size:规定输入字段的尺寸(以字符计)输入了很多字符也没出现什么意外?
maxlength:规定输入字段允许的最大长度,超过指定长度就输入不了了
HTML5新增属性:
autocomplete:规定表单或输入字段是否应该自动完成?
novalidate:属于<form>属性,设置后在提交表单时不对表单数据进行验证
autofoucus:布尔属性,设置后当页面加载<input>元素应该自动获得焦点
form:规定<input>元素所属的一个或多个表单
...
...待补充
required:布尔属性,设置后在提交表单前必须填写输入字段
step:规定<input>元素的合法数字间隔

HTML5浏览器支持
HTML5中的八个新的语义HTML元素:
header section footer aside nav main article figure
可以自定义新元素
完整的shiv解决方案

HTML图形 像素
画布:canvas元素用JavaScript在网页上绘制图形,画布是一个矩形区域,可以控制其中的每一个像素
创建canvas元素:<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>

HTML内联SVG
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)//一种图像格式,还有JPEG、GIF
SVG 用于定义用于网络的基于矢量的图形//还有基于像素的?
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

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

两者都允许在浏览器中创建图形,但有很多不同之处
Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏,其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序(比如谷歌地图)
复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
不适合游戏应用

HTML多媒体:音乐、视频和动画
视频格式:
AVI:.avi 微软开发
WMV:.wmv 微软开发
MPEG:跨平台
QuickTime:.mov 苹果开发
Flash:.flv .swf
Mpeg-4:.mp4 越来月流行 YouTube使用的.mp4格式

声音格式
MIDI:.mid .midi 比较轻巧
wave:.wav 无压缩声音格式

HTML Object元素:
<object>的作用是支持HTML助手(插件)
<embed>播放视频 音频

HTML5多媒体标签
<video>标签定义声音
<embed>定义嵌入的内容

HTML API
地理定位(Geolocation)用于定位用户的位置
对于拥有GPS的设备,如iPhone,地理位置更加精确
getCurrentPosition()

拖放(drag and drop):抓取某物并拖入不同的位置

阅读更多
个人分类: 前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

HTML常见知识点

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭