- 思维导图
HTML.png
- 文档结构类型
- HTML元素
- 图像和链接
- 表格
- 列表
- 结构标记
- 表单
文档结构类型
<!DOCTYPE HTML>
<html>
<head>
<title>我的第一个html文档</title>
<meta charset=”utf-8”>
</head>
<body></body>
</html>
HTML元素
<hn>标题元素</hn>
<p>段落元素</p>
<br>换行元素
<span>行内分区元素</span>
<div>块级分区元素</div>
<hr>分割线元素</hr>
行内元素与块级元素:
行内元素：<span><b><i><u>不会换行，与其他元素在同一行
块级元素:<div><p><hn>单独占一行，元素前后都会自动换行
文本样式元素:
<b>加粗</b>
<i>倾斜</i>
<s>删除</s>
<u>下划线</u>
<sup>下标</sup>
<sub>上标</sub>
图像和链接
图像
标签<img>
属性src width height
链接
标签:<a></a>
属性href target name
锚点
定义锚点<a name=”name1”></a>
链接锚点<a href=”#name1”></a>
表格(以两行两列为例)
<table border=”1” width=”300px”>
<caption>我的表格</caption>
<thead>
<tr>
<td>年龄</td>
<td>姓名</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table>属性
Width
Height
Align
Border
Cellpadding
Cellspacing
Bgcolor
<td>属性
Width
Height
Colspan:单元格跨列
Rowspan:单元格跨行
列表
有序列表:
<ol type="A"start="3">
<li>苹果<li>
<li>栗子</li>
<li>香蕉</li>
</ol>
无序列表:
<ul type="disc">
<li>苹果<li>
<li>栗子</li>
<li>香蕉</li>
</ul>
定义列表:
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器</dd>
</dl>
结构标记
<body>
<header>
<img src=”image/flower.jpg”>
<h1>welcome to my homepage</h1>
</header>
<nav>
<ul>
<li ><a href=”#”>rose</a></li>
<li ><a href=”#”>Dasiy</a></li>
<li ><a href=”#”>candy</a></li>
</ul>
</nav>
<section>
<h1>标题一</h1>
<p>段落一</p>
</section>
<footer>
<ul>
<li ><a href=”#”>关于我们</a></li>
<li ><a href=”#”>联系我们</a></li>
<li ><a href=”#”>帮助</a></li>
</ul>
</footer>
</body>
表单
<form method="get or post" name="">
<input type="数据类型" name="空间的名称" value="空间的数据" disabled>
<input type="text" name="" value="mary" maxlength="6" readonly>文本框
<input type="password" name="" maxlength="8" readonly>/*密码框*/
<input type="radio" name="" value="mary" checked>/*单选框*/
<input type="CheckBox" name="" value="mary" checked>/*复选框*/
<input type="submit">/*提交按钮*/
<input type="reset">/*重置按钮*/
<input type="button" value=按钮的标题文本"'>/*普通按钮*/
<input type="file" name="">/*文件选择框*/
<textarea name="" cols="列数" rows="行数'>文本<textarea>/*多行输入文本*/
<select size="4" name="选择课程" multiple>/*大于1位滚动列表*/
<option value="1">web</option>
<option value="2">java</option>
<option value="3" selected>c++</option>/*预选*/
</select>
</form>
备注： <input type="radio" name="gender" value="1" id="nan">
<label for="nan">男</label>
