html基础
一、HTML的基本标签
1、html文件的基本结构
a、HTML : Hypertext Markup Language 超文本标记语言
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title>网页标题</title>
6 </head>
7 <body>
8 主体 9 </body>
10 </html>
b.基本结构:头部(head) 主体(body)
c.所有内容都在<html></html>标签之内
<head></head>内放的是头部信息，是对页面的描述，不会直接显示在页面中
<head></head>内的<title></title>中设置的是页面的标题，<title></title>只能放在<head></head>中
<body></body>是页面的主体，大部分显示内容都定义在这里
d.编辑工具：记事本、UltraEdit等,开发人员用VisualStudio写html就够了
2.块级标签(基本的)
a.标题标签<h1>~<h6> 段落标签<p> 水平线标签<hr />
b.常用于页面布局的块级标签：有序列表<ol> 无序列表<ul> 定义列表<dl> 表格标签<table> 表单标签<form> 分区标签<div>
3.行级标签
a.图像标签<img /> 超链接标签<a> 范围标签<span> 换行标签<br /> 输入框标签<input /> 文本域标签<textarea>
b.常见的图片格式: JPG GIF BMP PNG
C.语法:<img src="图片地址" alt="图像的替代文字" title="鼠标悬停提示文字"/>
4.常使用如下四种块状结构：
a.Div-ul(ol)-li：用于分类导航或菜单等场合
b.Div-dl-dt-dd：用于图文混编场合
c.Table-tr-td：用于规整数据的显示
d.Form-table-tr-td：用于表单布局的场合
5.XHTML1.0的基本规范：
a.标签名和属性名称必须小写
b.HTML标签必须关闭
c.属性值必须用引号括起来
d.标签必须正确嵌套
e.必须添加文档类型声明：
①该声明必须位于HTML文档的第一行
②有三种级别声明：Strict(严格类型) Transitional(过度类型) Frameset(框架类型)
二、HTML的基本标签(二)和表单
1.超链接: <a href="链接地址的路径" target="目标窗口位置"></a> (target常用取值:_self(自身窗口)和_blank(新建窗口))
2.超链接的三类应用场合:
a.页面间链接 : A页到B页,用于网站导航
b.锚链接 : A页的甲位置到A页(本页)的乙位置或A页甲位置到B页的乙位置
1 <a href = "#star">[明星专区]</a> 2 3 <!-- 链接到同一个网页的特定位置 --> 4 <a name = "star"><img src="images/adv.jpg" alt="明星专区" title="明星专区">a>
c.功能性链接 : 在页面中调用其他程序功能
1 <!--例:电子邮箱链接,mailto:创建电子邮箱链接--> 2 <a href="mailto:[email protected]">站长信箱</a>
3.HTML注释：<!-- 内容 -->
4.html中的特殊符号:
a.空格( ) 大于号(>) 小于号(<) 引呈(") 版权符号(©)
5.表单
a.语法格式:
1 <!-- 2 1.get 是指将用户填写的信息作为一个字符串连接到地址栏一起提交，连接符用"?"隔开 3 2.post 是指将用户填写的信息作为一个数据包提交，数据包是经过编码的 4 --> 5 <form action="表单提交地址" method="提交方法(1.get 2.post)"> 6 <!--文本框.按钮等表单元素--> 7 </form>
b.表单元素的基本格式:
1 <!--type可用的选项有:text\password\checkbox\radio\submit\reset\file\hidden\image\button--> 2 <input name="表单元素名称" type="类型" value="值" size="显示宽度" maxlength="能输入的最大字符长度" checked="是否选中(单选或复选才用)" />
6.表单元素介绍
a.文本框(text)
1 <form action="" method="post"> 2 <p> 用户名: 3 <input type="text" value="张三" size="20" name="userName" /> 4 </p> 5 </form>
b.密码框(password)
1 密码:<input type="password" name="pass" />
c.重置\提交与普通按钮
1 <input type="submit" value="提交按钮" name="submit" /> 2 <input type="reset" value="重置按钮" name="reset" /> 3 <input type="button" value="普通按钮" name="button" /> 4 <!--图形提交按钮--> 5 <input type="image" src=" " />
d.单选按钮(radio)
1 <input type="radio" name="gen" class="input" value="男"/>男 2 <input type="radio" name="gen" class="input" value="女"/>女
e.复选框(checkbox)
1 <input type="checkbox" name="hobby1" value="1" />运动 2 <input type="checkbox" name="hobby2" value="2" />聊天 3 <input type="checkbox" name="hobby3" value="3" />玩游戏
f.文件域(file)
1 <input type="file" name="file" />
g.下拉列表框(select)
1 <!--name:指定列表 value:可选择的值--> 2 向往月份： 3 <select name="c"> 4 <option value="0" selected="selected">请选择</option> 5 <option value="1" >1月</option> 6 <option value="2">2月</option> 7 </select>
h.多行文本域(textarea)
1 <!--cols:指定多行文本域的列数 rows:指定多行文本域的行数--> 2 <textarea name="textarea" cols="40" rows="6">初始文本内容</textarea>
i.隐藏域(hidden)
1 <!--隐藏用户ID信息333--> 2 <input type="hidden" name="userid" value="333">
j.只读和禁用属性
只读:readonly="readonly" 禁用: disabled="disabled"
7.结合表单做的简易求职表
1 <html> 2 <head> 3 <title>简单表单小结</title> 4 </head> 5 <body> 6 <div> 7 <form action="" method="post"> 8 <h3>申请表</h3> 9 <p> 10 姓名：<input type="text" name="text" size="20"/> <br /> 11 密码：<input type="password" name="pass" size="21"/> <br /> 12 照片：<input type="file" name="files"/><br /> 13 感兴趣的职位：<br /> 14 <input type="radio" name="radio" class="input" value="1"/>Web设计 15 <input type="radio" name="radio" class="input" value="2"/>Web开发 <br /> 16 喜欢的月份：<select name="c"> 17 <option value="0">请选择</option> 18 <option value="1">1月</option> 19 <option value="2">2月</option> 20 <option value="3">3月</option> 21 <option value="4">4月</option> 22 <option value="5">5月</option> 23 <option value="6">6月</option> 24 <option value="7">7月</option> 25 <option value="8">8月</option> 26 <option value="9">9月</option> 27 </select> <br /> 28 协议：<br /> 29 <textarea readonly="readonly" name="textarea" cols="20" rows="4">老鼠爱大米------</textarea> <br /> 30 <input type="checkbox" name="ckbox"/>我认真阅读并接受以上协议。<br /> 31 经验：<select name="ca"> 32 <option value="0">无经验</option> 33 <option value="1">一年</option> 34 <option value="2">三年</option> 35 <option value="3">五年</option> 36 </select> <br /> 37 <input disabled="disabled" type="submit" name="button" value=" 提交 "/> 38 <input type="reset" name="reset" value=" 重置 "/> 39 </p> 40 </form> 41 </div> 42 </body> 43 </html>
三.表格的应用和布局
1.表格的基本语法
1 <table> 2 <tr> 3 <td>第一行第一个单元格的内容</td> 4 </tr> 5 <tr> 6 <td>第二行第一个单元格的内容</td> 7 </tr> 8 </table>
2.跨行跨列
1 <!-- 2 合并单元格 1.合并列 colspan = 列数 3 2.合并行 rowspan = 行数 4 注：只能用在<td>和<th>中 5 --> 6 <table border="1" whdth="100" height = "100"> 7 <tr> 8 <td rowspan="3">合并第一列的一行和二行</td> 9 <td colspan="2">合并第一行的二列和三列</td> 10 </tr> 11 <tr> 12 <td>第二行第一个单元格的内容</td> 13 <td>第二行第二个</td> 14 </tr> 15 </table>
3.表格的高级标签
a.表格标题:<caption>
b.表格表头:<th>
c.表格数据的分组标签:<thead>页眉 <tbody>数据主体 <tfoot>页脚