HTML笔记

来源：互联网发布：多核编程编辑：程序博客网时间：2024/05/18 10:39

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=""/>

0 0