网页的主要内容
如<h1> <p> <a> <img> <body></body>
-
强调
<strong>显示为加粗<strong>，<em>显示为斜体</em> -
<span>没有语义，为了设置单独的样式而用<html> <head> <title></title> <style> span{ color:blue; } </style> </head> <body> <span>中国梦</span> </body> </html> -
短文本引用
<q>引用短文本</q> -
长文本引用
<blockquote>引用长文本</blockquote>（缩进样式） -
换行回车，在一行文本后加上
<br/> -
空格
-
水平横线
<hr/> -
为网页加入地址信息
<address>联系地址</address>样式默认斜体 -
插入代码
<code>一行代码</code><pre>多行代码</pre> -
没有前后顺序的信息列表
<ul> <li>信息</li> <li>信息</li> ...... </ul> -
有前后顺序的信息列表
<ol> <li>信息</li> <li>信息</li> ...... </ol> -
划分独立的逻辑部分
<div>...</div>用
id属性给div命名<div id="版块名称">…</div> -
创建表格的四个元素 table, tbody, tr, th, td
<!DOCTYPE HTML> <html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/> <title>认识table表标签</title> <styletype="text/css"> tabletrtd,th{ border:1pxsolid#000; } </style> </head> <body> <!--整个表格以<table>标记开始、</table>标记结束。--> <!--添加表格的摘要--> <tablesummary="本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量"> <caption>2012年到2013年库存记录</caption> <tr><!--表格的一行，所以有几对tr 表格就有几行。--> <th>产品名称 </th><!-- 表格的头部的一个单元格，表格表头。 --> <th>品牌 </th> <th>库存量（个） </th> <th>入库时间 </th> </tr> <tr> <td>耳机 </td><!--表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列--> <td>联想 </td> <td>500</td> <td>2013-1-2</td> </tr> <tr> <td>U盘 </td> <td>金士顿 </td> <td>120</td> <td>2013-8-10</td> </tr> <tr> <td>U盘 </td> <td>爱国者 </td> <td>133</td> <td>2013-3-25</td> </tr> </table> </body> </html>-
<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。） -
表格中列的个数，取决于一行中数据单元格的个数。
-
table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
-
表头，也就是th标签中的文本默认为粗体并且居中显示
-
添加表格摘要
<table summary="表格简介文本">摘要的内容不会在浏览器中显示出来 -
添加表格标题（用以描述表格内容，标题的显示位置：表格上方）
<table> <caption>标题文本</caption> <tr> <td>…</td> <td>…</td> … </tr> … </table>
-
-
实现超链接
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>如：
<ahref="http://www.m1905.com/mdb/star/3316/"><title>托比•马奎尔Tobey Maguire</title>托比•马奎尔Tobey Maguire</a> -
链接的网页是在新浏览器窗口中打开
<a href="目标网址"target="_blank">click here!</a> -
mailto：发送邮件
<!--> 邮箱地址：浏览器自动调用默认的客户端电子邮件程序并在收件人框中自动填上收件人的地址 </!--><a href:"mailto: yy@imooc.com">发送</a> <!--> 抄送地址：在收件人地址后用cc=地址，可以填写抄送地址 </!--><a href:"mailto:yy@imooc.com?cc=imoocAdmin@imooc.com">发送</a> <!--> 密件抄送地址：在收件人地址后用bcc=地址，可以填写抄送地址 </!--><a href:"mailto:yy@imooc.com?bcc=imoocAdmin@imooc.com">发送</a> <!--> 多个收件人，用分号隔开 </!--><a href:"mailto:yy@imooc.com;pp@imooc.com">发送</a> <!--> 邮件主题，用subject=添加邮件主题 </!--><a href:"mailto:yy@imooc.com?subject:发送电子邮件">发送</a> <!--> 邮件内容，用body=添加邮件内容 </!--><a href:"mailto:yy@imooc.com?body=欢迎！">发送</a> <!--> mailto后面同时有多个参数时第一个参数必须以"?"开头，后面的参数每一个都以“&”分隔 </!--><a href:"mailto:yy@qq.com?cc=yu@11.com&bcc=11@qq.com&subject=主题">发送</a> -
插入图片
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本" -
<img src= "myimage.gif"alt= "My Image Eorror"title= "My Image"/> -
表单标签，与用户交互
<form method="传送方式" action="服务器文件"><!--浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)--> <form method="post"action="save.php"> <!--传送方式有get和post--> <label for="username">用户名:</label> <input type="text"name="username"/> <label for="pass">密码:</label> <input type="password"name="pass"/> </form> -
文本输入框
<input type="text/password" name="名称" value="文本" />name：为文本框命名，以备后台程序ASP 、PHP使用。
value：为文本输入框设置默认值。(一般起到提示作用)
<form method="post" action="save.php"> 姓名： <input type="text"name="myName"><!--当type="text"时，输入框为文本输入框--> <br/> 密码： <input type="password"name="pass"><!--当type="password"时, 输入框为密码输入框--> </form> -
文本输入域
<textarea rows="行数" cols="列数">文本</textarea><textarea>标签成对出现cols ：``多行输入域的列数
rows ：``多行输入域的行数
在CSS中，col可用width、row可用height来代替
在
<textarea></textarea>标签之间可以输入默认值<form method="post"action="save.php"> <label>联系我们</label> <textarea cols="50"rows="10">在这里输入内容...</textarea> </form> -
选择框
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>value：提交数据到服务器的值（后台程序PHP使用）
name：为控件命名，以备后台程序 ASP、PHP 使用
checked：当设置 checked="checked" 时，该选项被默认选中
同一组的单选按钮，name 取值一定要一致
<form action="save.php"method="post"> <label>性别:</label> <label>男</label> <input type="radio"value="1" name="gender"/> <label>女</label> <input type="radio"value="2" name="gender"/> </form> -
下拉列表框
<option value='提交值'>选项</option>提交值：向服务器提交的值
选项：显示的值
单选：设置selected="selected"属性，则该选项就被默认选中
多选：设置multiple="multiple"属性，则实现多选功能（ctrl+单击）
<select> <option value="看书">看书</option> <option value="旅游"selected="selected">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select> -
提交按钮
<input type="submit" value="提交">type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字（此处为空时，按钮文字默认“提交”）
<form method="post"action="save.php"> <label for="myName">姓名：</label> <input type="text"value=" "name="myName "/> <input type="submit"value="提交"name="submitBtn"/> </form> -
重置按钮
<input type="reset" value="重置">type：只有当type值设置为reset时，按钮才有重置作用
value：按钮上显示的文字（此处为空时，按钮文字默认“还原”）
<form method="post"action="save.php"> <label for="myName">姓名：</label> <input type="text"value=" "name="myName "/> <input type="submit"value="提交"name="submitBtn"/> <input type="reset"value="重置"name="resetBtn"> </form> -
label标签
<label for="控件id名称">标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同
<form> <label for="male">男</label> <input type="radio"name="gender"id="male"/><br/> <label for="female">女</label> <input type="radio"name="gender"id="female"/> <label for="email">输入你的邮箱地址</label> <input type="email"id="email"placeholder="Enter email"> </form>
扫一扫
174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
