1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head> <title>...</title> 网页标题 <meta> <link> <style>...</style> <script>...</script> </head> 3. 语义化: 明白每个标签的用途(在什么情况下我可以使用这个标签才合理) 比如,网页上的文章的标题就可以用标题标签, 网页上的各个栏目的栏目名称也可以使用标题标签。 文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用em标签表示强调等等。 4. 认识body标签: <p>段落文本</p> 有三段就放三个<p></p> <h1>标题文本</h1> h1-h6共6个标题分级 <em>斜体文本(强调)</em> 斜体文本内容 <strong>粗体文本</strong> 粗体显示文本内容 <span>单独样式文本</span> 没有语义的,它的应用就是为了 设置单独的格式用的 <q>引用的文本</q> 引用的文本内容,会自动加上双引号 <blockquote>大段引用</blockquote> 引用大段的文本内容,文本前后会加上缩进 <br/> 换行 <hr/> 水平横线 空格 <address>地址信息</address> 地址信息,通常用于公司地址显示 <code>代码内容</code> 代码,通常是一行内 <pre>多行代码</pre> 多行代码,你需要在网页中预显示格式时都可以使用它 <ul> ul-li 列表信息,以圆点显示 <li>信息1</li> <li>信息2</li> ...... </ul> <ol> ol-li 列表信息,带上序号 <li>信息</li> <li>信息</li> ...... </ol> <div>排版内容<div> 排版中使用,相当于一个容器 确定逻辑部分:逻辑部分是页面上相互关联的一组元素,如栏目版块 <div id="版块名称">…</div> div 带上ID号,使之更清晰 <table>表格内容</table> 创建表格 <caption>标题文本</caption> 为表格添加标题文本 <tbody>...</tbody> 若加此标签后,表格会一次性显示出来(而非网页加载一点显示一点) <tr>表格一行</tr> 表格中的一行 <td>表格单元格</td> 表格中的一个单元格 <th>表格表头</th> 表格头部的一个单元格,表格表头 <table summary="表格摘要">...</table> 为表格添加摘要,但不会被浏览器显示出来 <a href="目标网址" title="鼠标滑过时显示文本">链接显示文本</a> 链接标签 target="_blank" 网页将在新窗口中打开 mailto: 网页中邮件地址,可带多个参数 mailto: 邮箱地址 cc= 抄送地址 bcc= 密抄地址 ; 多个邮箱地址 subject=邮件主题 body= 邮件内容 完整举例: <a href="mailto:yy@sf.com ?cc=aa@sf.com &bcc=bb@sf.com &subject=主题 &body=邮件内容">发送邮件</a> <img scr="图片地址" alt="下载失败时替换文本" title="提示文本" /> 5. 与用户交互: 语法: <form method="传送方式" action="服务器文件"></form> 举例: <form method="post" action="save.php"> <label for="username">用户名:</label> <input type="text" name="username" /> <label for="pass">密码:</label> <input type="password" name="pass" /> </form> 表单控件: 文本框、文本域、按钮、单选框、复选框 method: post/get 1. 文本框(文本/密码) <form> <input type="text/password" name="名称" value="文本" /> </form> type:有“text”和“password”两种类型 name:为文本框命名,方便后台ASP和PHP使用 value:文本框默认值,一般起提示作用 2. 文本域(多行文本) <textarea rows="行数" cols="列数">默认文本内容</textarea> cols:多行输入域的列数 rows:多行输入域的行数 3. 单选框、复选框 <input type="radio/checkbox" value="值" name="名称" checked="checked"/> type:radio单选,checkbox复选框 value:提交数据到服务器的值,后台PHP处理使用 name:为控件命名,以备后台程序ASP和PHP使用 checked:checked="checked"时,此选项默认被选中 注意:同一组的单选按钮,name取值一定要一致 4. 下拉列表框 <form action="save.php" method="post" > <label>爱好:</label> <select multiple="multiple"> <label for="book>看书</label> <option value="看书" id="book">看书</option> <option value="旅游">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select> <input type="submit" value="提交"> <input type="reset" value="重置" /> </form> value:向服务器提交值 selected:设置selected="selected"时,默认选中 multiple:multiple="multiple"时,可以使用Ctrl多选,但很丑 label:为了改进鼠标易用性,鼠标点击文本时,选择上Radio