您的位置：首页 > Web前端 > HTML

HTML笔记

2014-04-21 11:57 113 查看

1.HTML

Hypetext markup language ：超文本标记语言

是一种开发网页的技术，浏览器来解析

html的文件以.htm或.html为后缀

HTML是由W3C组织制定规则

学习网站：www.w3school.com

2.html的基本格式



<html>



<head></head>



<body></body>

</html>

3.head中的标签

3.1 title 标签

显示页面的标题

3.2 meta 标签

<meta http-equiv="Content-Type" content="text/html;charset=GBK">

模拟消息头，指定Content内容，告诉浏览器以GBK编码解析

<meta http-equiv="refresh" content="3;metaDemo01.html">

<meta http-equiv="refresh" content="3;url='http://www.baidu.com'">

隔3秒刷新

3.3 <style> <link><script>(之后讲)

4.body中的标签

4.1 a 链接

a.基本使用

<a href="" target="" title="">显示文本信息</a>

href属性:跳转到指定页面

target属性: _self 跳转当前窗口

_blank　跳转到新窗口

title属性：鼠标移上链接显示的文本信息

b.使用图片作为链接

<a href=""><img src="图片路径" width="" height="" border=""/></a>

宽度高度边框

c.使用锚点

在同一个页面跳转

<a name="top"></a>

<a href="#top">返回顶部</a>

d.热点(了解)

<img src="./images/hot.png" usemap="#m2"/>

<map name="m2">

<area shape="rect" coords="407,20,560,77" href="qiye.html"></area>

<area shape="rect" coords="580,20,730,77" href="geren.html"></area>

</map>

4.2 列表

a.无序列表

<ul><li></li>...</ul>

b.有序列表

<ol><li></li>...</ol>

c.列表嵌套

<ul>

<li></li>...

<ul><li></li>...</ul>

</ul>

--2014.04.12 am

4.3 表格

1)不规则表格

<table align="center" border="1" width="60%" cellpadding="1" cellspacing="1">

width属性:制定表格宽度可是使用百分比(占用父标签的宽度百分比)

border:边框

cellspacing:单元格之间的距离

cellpadding:单元格边框与里面的内容之间的距离

align:摆放表格在水平方向的方式 left/center/right

<td>:

colspan:跨列合并

rowspan:跨行合并

valign:垂直摆放位置

2)完整写法

<table align="" border="" width="" cellpadding="" cellspacing="">

<caption></caption>

<thead><tr><td></td></tr></thead>

<tfoot><tr><td></td></tr></tfoot>

<tbody><tr><td></td></tr></tbody>

</table>

caption : 标题 ? 0或者1次

thead: 表头 ? 0或者1次

tfoot: 表脚 ? 0或者1次

tbody:表体 + 1次或以上

3)表格嵌套

4.4 表单

收集用户数据,如登录,注册等

<form></form>

4.4.1 input 标签

<input type="" name="" value=""/>

type属性:

text 单行文本输入框

password 密码输入框

radio 单选

submit 提交

checkbox 多选

button 按钮

file 文件

hidden 隐藏

reset 重置

name属性:用于往服务器发数据时生成请求参数

value属性:默认值

4.4.2 非input标签

下拉框:

<select name="city" multiple="multiple">

<option value="">xx</option>

</select>

multiple="multiple":设置为多选

多行文本:

<textarea cols="50" rows="10"></textarea>

cols属性:占多少列

rows属性:占多少行

5.框架

5.1 frameset和frame

<frameset rows="20%,*">

<frame name="topFrame" src="top.html"/>

<frameset cols="20%,*">

<frame name="leftFrame" src="left.html"/>

<frame name="mainFrame" src="main.html"/>

</frameset>

</frameset>

rows属性:窗口以行划分

cols属性:窗口以列划分

src属性:指定加载URL

name属性:窗口名称

注意:

frameset和body不能同时使用

5.2 iframe

能和body同时使用

<iframe src="" width="" height=""/>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航