1:基本结构
<!doctype html>
<html>
<head>
<title>rollover</title>
<script src = "rollover.js"></script>
<link rel = "stylesheet" href = "rollover.css">
</head>
<body>
<p>your content</p>
</body>
</html>
2:注释格式:<!--注释-->
3:如何在title中显示一个icon小图标
在这个网址http://www.bitbug.net/上传图片,然后生成ico格式的图标,然后再使用
<head>
<title>Pofar</title>
<link rel = "icon" href = "img/ico/title_image.ico" type = "image/x-icon">
<!--icon显示在title的左侧-->
<link rel = "shortcut icon" href = "img/ico/title_image.ico" type = "image/x-icon">
<!--在收藏夹中显示的icon图标-->
</head>
<body>
4:块级元素和内联元素
a:所有的块级元素在默认情况下都是新行开始,并且新行结束(如果后面跟一个内联元素,会自动换行)。内联元素不会
b:块级元素内部可以包含新的内俩元素和块级元素,内联元素只能嵌套内联元素和文本
c:块级元素可以可以控制宽度和边距
5:文本格式化http://www.w3school.com.cn/html/html_formatting.asp
a:格式化文本标签:<b>粗体 、<big>/<small>大/小号字、 <em>着重 、<i>斜体 、
<sub>/<sup> 下/上标字 、<ins>插入字 、 <del> 删除字
b:计算机代码格式:<code>、<kbd>、<samp>计算机代码、<tt>、<var>、<pre>
c:其他格式(鼠标放于上方会有提示):<abr>定义缩写、<acronym>定义首字母缩写、<address>、<bdo>、<blockquote>、<q>、
<cite>、<dfn>
6、链接<a>
<a href = "xiong.html/" (需要在后面再加一个/,否则会发出两次请求)target = ""(规定在哪打开链接:_blank\_parent\_self\_top\framename)>规定链接
<a name = "name1">规定锚点 <-------- <a href = "所在.html#name1">如果是本页面的锚点则<a href = "#name1">
<a id = "id2">规定锚点 <----------- <a href = "所在.html.id2">
<a href = "mailto:邮箱地址?subject = 内容">
7、图片<img>
<img src = "" alt = "" title = "">
a、图片与文字混合 <p>图像 <img src="" align="bottom(文本相对于图片的位置)"> 在文本中</p>
<p>图像 <img src ="" align="middle"> 在文本中</p>
<p>图像 <img src ="" align="top"> 在文本中</p>
<p><img src ="" align="left/right">在文中</p>图片的位置
b、把一副图像的不同区域划分成不同的链接
<img src = "" usemap = "#mapname" alt = "">
<map name = "mapname">
<area shape = "circle" coords = " x, y, r" href = "" target = "" alt = "">
<area shape = "rect" coords = "x1 ,y1,x2,y2" href = "" target = "" alt = "">
</map>
8、表格
td的colspan跨列 rowspan跨行
table的cellpadding 内容到边框的距离 cellspacing单元格之间的距离
<table border = "6">
<caption>标题</caption>
<tr>
<td>row1 cell1</td>
<td>row1 cell2</td>
</tr>
<tr>
<td>row2 cell1</td>
<td>row2 cell2</td>
</tr>
</table>
9、列表
有序列表<ol> 无序列表 <ul> 定义列表<dl>
<ol type = ""> (A a I i)
<li></li>
<li></li>
</ol>
<ul type = ""> (circle square disc)
<li></li>
<li></li>
</ul>
<dl>
<dt> </dt>
<dd> </dd>
<dt> </dt>
<dd> </dd>
</dl>
9、容器
<div></div>属于块级元素,主要用于布局
<span></span> 属于内联元素,主要用于在行内定义一个新的格式的文本
10、表单
<form>
<select>
<option value = "a">abtion</option>
<option value = "b" selected = "selected">buiding</option>
<option value = "c">care</option>
</select>
<br/>
<textarea name="inputtext" id="xiong" cols="30" rows="10" >xiongshiyuan</textarea>
<br/>
<button type = "button">click</button>
<br/>
input 属性 placeholder = "" 用于输入前显示的提示信息
required = "required" 表示提交前必须输入
step = "2" 每次增加2
<input list = "datalist">
<datalist id = "datalist">
<option value = "a">a</option>
<option value = "b">b</option>
</datalist>
type = "submit"点击之后会将form中的数据至form中的action程序,value默认为submint<br/>
<input type = "submit" vlaue = "提交"><br/>
type = text 单行输入<br/>
<input type = "text"><br/>
type = "password"<br/>
<input type ="password"><br/>
type = "radio"单选按钮,同一组radio必须是拥有相同的name<br/>
<input type = "radio" name = "sex" value = "0" checked>male<br/>
<input type = "radio" name = "sex" value = "1" >female<br/>
type = checkbox 复选框 <br/>
<input type = "checkbox" name = "love" value = "1">jim<br/>
<input type = "checkbox" name = "love" value = "2">tom<br/>
<input type = "checkbox" name = "love" value = "3">thon<br/>
type = button 按钮<br/>
<input type = "button" value = "button111"><br/>
type = data<br/>
<input type = "date" name = "dd">
</form>
还有其他的表单输入,可以自行百度,其中存在浏览器不支持的情况。
11、 其他元素
canvas 画布 利用js在上面作图,可以定义宽度和高度属于块级元素
SVG 画布,与canvas不同,适合渲染速度快,适合游戏和地图类的图形显示
12、多媒体的嵌入,主要是音频和视频
添加音频:a:<audio controls = "controls">
<source src="####.mp3" type="audio/mp3/>
<source src="##.ogg" type = "audio/ogg"/>
tips(如果不能显示音频的话就会显示tips)
</audio>
添加视频文件:<video width="" height="" controls = "controls">
<source src = "###.mp4" type = "video/mp4"/>
</video>
<!doctype html>
<html>
<head>
<title>rollover</title>
<script src = "rollover.js"></script>
<link rel = "stylesheet" href = "rollover.css">
</head>
<body>
<p>your content</p>
</body>
</html>
2:注释格式:<!--注释-->
3:如何在title中显示一个icon小图标
在这个网址http://www.bitbug.net/上传图片,然后生成ico格式的图标,然后再使用
<head>
<title>Pofar</title>
<link rel = "icon" href = "img/ico/title_image.ico" type = "image/x-icon">
<!--icon显示在title的左侧-->
<link rel = "shortcut icon" href = "img/ico/title_image.ico" type = "image/x-icon">
<!--在收藏夹中显示的icon图标-->
</head>
<body>
4:块级元素和内联元素
a:所有的块级元素在默认情况下都是新行开始,并且新行结束(如果后面跟一个内联元素,会自动换行)。内联元素不会
b:块级元素内部可以包含新的内俩元素和块级元素,内联元素只能嵌套内联元素和文本
c:块级元素可以可以控制宽度和边距
5:文本格式化http://www.w3school.com.cn/html/html_formatting.asp
a:格式化文本标签:<b>粗体 、<big>/<small>大/小号字、 <em>着重 、<i>斜体 、
<sub>/<sup> 下/上标字 、<ins>插入字 、 <del> 删除字
b:计算机代码格式:<code>、<kbd>、<samp>计算机代码、<tt>、<var>、<pre>
c:其他格式(鼠标放于上方会有提示):<abr>定义缩写、<acronym>定义首字母缩写、<address>、<bdo>、<blockquote>、<q>、
<cite>、<dfn>
6、链接<a>
<a href = "xiong.html/" (需要在后面再加一个/,否则会发出两次请求)target = ""(规定在哪打开链接:_blank\_parent\_self\_top\framename)>规定链接
<a name = "name1">规定锚点 <-------- <a href = "所在.html#name1">如果是本页面的锚点则<a href = "#name1">
<a id = "id2">规定锚点 <----------- <a href = "所在.html.id2">
<a href = "mailto:邮箱地址?subject = 内容">
7、图片<img>
<img src = "" alt = "" title = "">
a、图片与文字混合 <p>图像 <img src="" align="bottom(文本相对于图片的位置)"> 在文本中</p>
<p>图像 <img src ="" align="middle"> 在文本中</p>
<p>图像 <img src ="" align="top"> 在文本中</p>
<p><img src ="" align="left/right">在文中</p>图片的位置
b、把一副图像的不同区域划分成不同的链接
<img src = "" usemap = "#mapname" alt = "">
<map name = "mapname">
<area shape = "circle" coords = " x, y, r" href = "" target = "" alt = "">
<area shape = "rect" coords = "x1 ,y1,x2,y2" href = "" target = "" alt = "">
</map>
8、表格
td的colspan跨列 rowspan跨行
table的cellpadding 内容到边框的距离 cellspacing单元格之间的距离
<table border = "6">
<caption>标题</caption>
<tr>
<td>row1 cell1</td>
<td>row1 cell2</td>
</tr>
<tr>
<td>row2 cell1</td>
<td>row2 cell2</td>
</tr>
</table>
9、列表
有序列表<ol> 无序列表 <ul> 定义列表<dl>
<ol type = ""> (A a I i)
<li></li>
<li></li>
</ol>
<ul type = ""> (circle square disc)
<li></li>
<li></li>
</ul>
<dl>
<dt> </dt>
<dd> </dd>
<dt> </dt>
<dd> </dd>
</dl>
9、容器
<div></div>属于块级元素,主要用于布局
<span></span> 属于内联元素,主要用于在行内定义一个新的格式的文本
10、表单
<form>
<select>
<option value = "a">abtion</option>
<option value = "b" selected = "selected">buiding</option>
<option value = "c">care</option>
</select>
<br/>
<textarea name="inputtext" id="xiong" cols="30" rows="10" >xiongshiyuan</textarea>
<br/>
<button type = "button">click</button>
<br/>
input 属性 placeholder = "" 用于输入前显示的提示信息
required = "required" 表示提交前必须输入
step = "2" 每次增加2
<input list = "datalist">
<datalist id = "datalist">
<option value = "a">a</option>
<option value = "b">b</option>
</datalist>
type = "submit"点击之后会将form中的数据至form中的action程序,value默认为submint<br/>
<input type = "submit" vlaue = "提交"><br/>
type = text 单行输入<br/>
<input type = "text"><br/>
type = "password"<br/>
<input type ="password"><br/>
type = "radio"单选按钮,同一组radio必须是拥有相同的name<br/>
<input type = "radio" name = "sex" value = "0" checked>male<br/>
<input type = "radio" name = "sex" value = "1" >female<br/>
type = checkbox 复选框 <br/>
<input type = "checkbox" name = "love" value = "1">jim<br/>
<input type = "checkbox" name = "love" value = "2">tom<br/>
<input type = "checkbox" name = "love" value = "3">thon<br/>
type = button 按钮<br/>
<input type = "button" value = "button111"><br/>
type = data<br/>
<input type = "date" name = "dd">
</form>
还有其他的表单输入,可以自行百度,其中存在浏览器不支持的情况。
11、 其他元素
canvas 画布 利用js在上面作图,可以定义宽度和高度属于块级元素
SVG 画布,与canvas不同,适合渲染速度快,适合游戏和地图类的图形显示
12、多媒体的嵌入,主要是音频和视频
添加音频:a:<audio controls = "controls">
<source src="####.mp3" type="audio/mp3/>
<source src="##.ogg" type = "audio/ogg"/>
tips(如果不能显示音频的话就会显示tips)
</audio>
添加视频文件:<video width="" height="" controls = "controls">
<source src = "###.mp4" type = "video/mp4"/>
</video>