</form>
②<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
• 链接到同一个页面的不同位置（锚标 签）：
<a href=“#prh”>查看第十八章</a>
<a name=“prh”>第十八章</a>
2020/12/10
5
表单标记
• <form>...</form> 表单区段的开始与结束
• <input />产生单行文本框、单选按钮、复选 框等
• <textarea>...</textarea>产生多行输入文本 框
• Class选择符--------“.”
• 群组选择符
eg：h1，h2，p，span{}
h1，h2，p，span具有相同的样式定义
• 包含选择符
eg：#main li{}表示对main中的li子对象进行了样
HTML的基本语法
• 字符格式标记 • 文本区段格式标记 • 列表标记 • 表格标记 • 链接标记 • 表单标记 • 层标记（定位标记）
2020/12/10
1
列表标记
• <ul>...</ul> 无编号列表 • <ol>...</ol> 有编号列表（type） • <li>...</li> 列表项目 • <dl>...</dl> 定义式列表 • <dt>...</dt> 定义项目 • <dd>...</dd> 定义项目
action="/html/html_form_action.asp" method="get">
2020/12/10
9
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" checked="checked" />
<br />
<input type="submit" value="Submit" />
</form>
2020/12/10
10
⒈<!--…-->
定义注释
<!--这是一段注释。注释不会在浏览器 中显示。--> <p>这是一段普通的段落。
</p>
⒉<!DOCTYPE> 定义文档类型
<!DOCTYPE> 声明位于文档中的最前 面的位置，处于 <html> 标签之前。此 标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
border="0" src="/i/eg_buttonnext.gif"
/></a>
2020/12/10
4
• 在新的浏览器窗口打开链接（ target 属性）：
<a href=“p.html" target="_blank">最 后一页</a> <p>如果把链接的 target 属性设置为 "_blank"，该链接会在新 窗口中打开。</p>
2020/12/10
2
表格标记
• <table>...</table> 定义表格区段
• <caption>...</caption> 表格标题
• <th>...</th>
表头
• <tr>...</tr>
表格行
• <td>...</td>
表格单元格
• 横跨两列colspan=“2”
• 横跨两行rowspan=“2”
<p>First name: <input type="text“ name="fname" /></p>
<p>Last name: <input type="text“ name="lname" /></p>
<input type="submit" value="Submit" />
</form> ⑥带有复选框的表单<form name="input"
2020/12/10
11
CSS的知识
• Css的语法结构由3部分组成：选 择符、属性、值。 selector { property：value；}
2020/12/10
12
选择符
• 类型选择符：以网页中已有的标签类型作为名称 的选择符。例如：body、div、span等。
• ID选择符--------“#”
<option value="audi">Audi</option>
</select>
</form>
2020/12/10
7
③<form>
<input type="button" value="Hello world!">
</form>
④<fieldset>
<legend>健康信息：</legend>
2020/12/10
3
链接标记（超级链接和锚）
• 创建超级链接：①<a href=“index.html”>本文本</a> 是一个指 向本网站中的一个页面的链接。②<a href=“”>接：您也可以使用图像来作
链接： <a href=“pengyou.html"><img
<form>
<label>身高：<input type="text" /></label>
<label>体重：<input type="text" /></label>
</form>
</fieldset>
2020/12/10
8
⑤带有输入框和确认按钮的表单 <form action="/example/html/form_action.asp" method="get">
• <select>...</select>表明下拉列表的开始与 结束
• <option>...</option>下拉列表中产生一个选 择项目
2020/12/10
6
举例
①<பைடு நூலகம்orm>
用户：<input type="text" name="user"><br>
密码：<input type="password" name="password">
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
<br /><br />
![[PPT模板]CSS+DIV_教程_OK](https://img.taocdn.com/s1/m/017f42f3de80d4d8d05a4f24.png)
