html的主体结构
代码分为三部分
<html>
<head></head>
<body></body>
</html>
一 <head>中可以放置的标签
1.<title></title>只能有一个,定义网页标题,显示在浏览器的标题栏
<title>csdn博客</title>
2.<base/> 只能有一个,是基底网址标记,用于设定浏览器中文件的绝对路径,网页中的文件只需要写相对路径即可
<base href="C:/Users/fortune/Desktop/学习/"/>
3.<meat> 可以有多个,有 <meta http-equiv="" Content=""> 或 <meta name="" Content=""> 两种形式
3.1<meta http-equiv="" Content="">
http-equiv :用于在html文档中模拟http协议的响应消息头,例如告诉浏览器使用什么样的字符集显示网页内容
属性有:
Content-Type 字符集类型
Refresh 刷新
Expires 用于设定网页的过期时间,一旦过期就必须从服务器上重新加载
Windos-Target
Pragma
Page-Entenr 设定计入和离开页面是的特殊效果
应用
<Meta http-equiv="Content-Type" Content="text/html;charset=utf-8"> //设置字符集 为 utf-8
<Meta http-equiv=“Refresh” Content="5">
4.<link>可以有多个,用于设置外部文件的链接,用于确定 本页面和其它文档之间的关系
<link ref="stylesheet" type="text/css" href="test.css">
5.<style>
6.<script>
二.<body>中放置所以网页显示的内容,包括的属性如下:
Text
Bgcolor
Background
Link
Alink 设置活动链接的状态(当链接被点击时,该链接就处于活动状态)
Vlink 设置访问过的链接
topmargin 设置到顶端的距离,指的是容器和容器之间的距离
leftmargin
id
name
class
style
其中 id、那么、class、style 是通用属性,即所有的元素都可以使用,其余的则为 body自己使用的属性,但这些属性都可以通过css来实现
三.html常用标签
<br> 换行
<p> 段落(即换行后再插入空行)
<center> 居中
<pre> 保留文字在源代码中的格式
<ul><li> 无序列表
<ol><li> 有序列表
<hr> 水平分隔线
四.文本标签
<h1><h2>.... 标题
<b> 粗体
<i> 斜体
<u> 下划线
<sub>下浮内容
<sup>上浮内容
<font> 字体
<tt> 打印机的字体
<cite> 输出引证举例的斜体字
<em> 输出强调的斜体字
<strong> 输出强调的粗体字
<small> 输出小型字体
<big> 输出大型字体
五.超链接标签
<a href="URL">XX</a> URL 可以是绝对路径或相对路径
设定打开链接窗口的方式
<a href="URL" target="_self/_blank/_parent/_top">
六.设定锚点
<a href="#锚点名称">XX</a>
例如:点选“第一段”则显示 “adfajks”
<a name="#one">第一段</a>
<a name="#one">第二段</a>
<a name="one">adfajks</a>
七.图像超链接<img>
<img>属性有
src 图片位置
border 边框
alt a. mouseover时有黄色小图标 b.若图像不存在,则出现它指定的文字 c.搜索引擎可以通过此文字来搜索
width 宽度
heiht 高度
应用:用图片做链接
<a href="http://www.baidu.com"><img src="c:\\img\\logo.jpg"></a>
八.图像地图
把一张图片分为多个区域,然后在每个区域设定链接,在<img>中使用 usermap 属性来使用热点
<map> 定义热点区域
<area>指定每个人多区域 ,area 中的属性有 shape(指定形状)、coords(指定形状的位置确定形状)、href(指定链接的位置)
应用:
<img src="logo.jpg" usemap="#mymap" border="0"/>
<map name="mymap">
<area shape="rect/circle/poly" coords="x,y,x,y/ x,y,r,/ x,y,x,y,...x,y" href="http://www.baidu.com" target="_blank">
</map>
九. 表格标签
<table>
<caption><h1>我的表格</h1></caption>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
..
</tr>
</table>
1.table的 属性有:
align:left right center
border
width
height
cellspacing:格子与格子之间的距离
cellpadding:格子和边框直接的距离
应用:
<table border=1 width=100 align="center" cellspacing="0" cellpadding="0" bgcolor="red" bordercolor="greent" bordercolorlight="" bodercolordark="">
<caption><h1>我的表格</h1></caption>
2.定义标题<caption> : 要放在<tr>标签之前,放在table 的内部使用,有属性 align(水平对齐) valign(垂直对齐)
定义字段<th> : 用来定义列名,和<td>的用法一致,文字是以粗体居中显示
3. 定义跨行、跨列
使用td的属性 colspan、rowspan
<td colspan="3">
<td rowspan="3">
<td colspan="3" rowspan="3">
4.表格之间可以互相嵌套,table也可以设定 head body
<thead></thead>
<tbody></tbody>
十.窗口分帧技术
1.<frameset >标签, 可以嵌套使用 ,不能和body标签及内容体共存
属性:rows 、cols(值可以使用固定值、百分比 或*)、border、frameborder
应用:设定一个3行3列的
<frameset rows="20,30,50" cols="100,100,100">
<frame>
<frame>
..
<frame>
</frameset>
2.<frame>的属性
src 指定URL
name 指定名称,当链接需要显示此frame时,可通过 target="名称"来指定显示在的frame
nosize 边框尺寸不可调整
scrolling 是否出现滚动条
<frame src="www.baidu.com" name="left"></frame>
<a href="logo.jpg" target="left">点击链接打开left frame</a>
3.<iframe>可以在body共存,不在 frameset中
案例待补充
十一.表单标签<form>
属性有:
action 用来设置接受和处理浏览器
method post(隐藏信息) get(不隐藏信息)
target
title
enctype
表单字段<input>的属性
size 文本框长度
maxlength 文本框运行输入的最大长度
readonly
value 文本框显示内容
type submit/reset/button/text/password/img/checkbox/radio/hidden/file/select/textarea/label
应用:
<input type="checkbox" checked name="我是被选中的">
<input type="button" value="提交" οnclick="js调用">
<input type ="radio" checked name="sex">男
<input type="radio" name="sex">女
<select name="选择水果" size="5" multiple>//只显示5个 其余滚动条显示,可多选
<option>--请选择</option>
<option value="1">苹果</option>
<option selected>香蕉</option>
</select>
<input type="file" name="picture">