1. html页面基本框架
html:超文本标记语言
<html> <head><!-- 头部信息,不用显示在页面中的内容 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"><!-- 元信息,设置页面编码 --> <title>标题</title> <!-- 显示在浏览器标题栏 --> </head> <body> 页面显示的内容 </body> </html> |
一、 常用标签
1、 文本
<h1>列表标签:</h1><!-- 文章标题 h1~h6 --> <strong>strong文本</strong> <p>第一段</p> |
2、 列表
<ul type="circle"> <li>天猫</li> <li>聚划算</li> <li>天猫超市</li> </ul> <h2>ol---有序列表</h2> <ol type="I"> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ol> <h2>dl---定义列表</h2> <dl> <dt>列表标题1</dt> <dd>列表内容1</dd> <dt>列表标题2</dt> <dd>列表内容2</dd> <dt>列表标题3</dt> <dd>列表内容3-1</dd> <dd>列表内容3-2</dd> </dl> |
3、 图片
image和html在同一个目录中<br/> <img src="book-01.jpg" alt="alt属性" title="图片标题" /> <!-- alt属性:当你的图片不能再浏览器上正常显示,则用alt内容提示 title:图片的标题 --> <br/> image在html所在目录的子目录 <img src="images/book-02.jpg" /> <br/> image在html的父目录中 <img src="../book-03.jpg" /> <br/> image在html的兄弟目录中 <img src="../site02/logo.jpg"/> |
4、 链接
<a href="02.html">02.html</a> href中的路径写法同img中src路径的写法 <a href="http://www.baidu.com" target="_blank">百度</a> <!-- target:目标页面打开的位置,默认是_self就是当前窗口打开新的页面 可以设置为_blank在新的浏览器窗口打开页面内容 --> |
锚链接
定义锚的名称,写在body中任何一个位置 <a name="begin"/> 超链接和锚在同一个页面 <a href="#begin">锚链接回到begin</a> 超链接和锚在不同的页面,首先到你的目标页面,然后再写上锚的名称 <a href="site/03.html#begin">03.html---begin</a> |
功能链接
<a href=”mailto:oheasy@qq.com”>联系我们</a> |
二、 表格
<table width="600px" height="300px" border="1px"> <tr> <th>标题一</th> <th>标题二</th> <th>标题三</th> <th>标题四</th> </tr> <tr> <td colspan="3">1,1</td> <td rowspan="3">1,4</td> </tr> <tr> <td>2,1</td> <td>2,2</td> <td>2,3</td> </tr> <tr> <td colspan="3" rowspan="2">3,1</td> </tr> <tr> <td>4,4</td> </tr> </table> |
table:表格标签
tr:一行
th:标题列
td:单元格
td和th中的属性:colspan跨列合并单元格,rowspan:跨行合并单元格
三、 表单
<form>表单标签:action属性指定服务器端的地址 method
<input>标签:
type属性:text、password、radio,checkbox、submit、reset、button,image,file,hidden
<select>标签,option标签,默认选中的选项(selected)
<textarea>标签:多行文本框rows,cols
button:标签按钮,type属性指定按钮的类型
四、 frame/frameset/iframe(框架页面)
Ø frame和frameset沿用指定html的页面
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.html" />
<frame src="frame_b.html" />
<frame src="frame_c.html" />
</frameset>
</html>
Ø iframe
Ø <iframe src ="/index.html" align="right"
>
Ø <p>Your browser does not support iframes.</p>
Ø </iframe>
内联框架:一个页面嵌入到另一个页面的里面
注意:
l Document.getElementById().innerHTML返回的是对象
l 如果input的button写错了会自动转为text