html 超文本标记语言,它的结构标准如下:
<!DOCTYPE html> 声明文档类型
<html lang="en"> 根标签
<head> 头标签
<meta charset="UTF-8">
<title>Document</title> 标题标签
</head>
<body> 主体标签
</body>
</html>
<hr>
<br>
<p>文本内容</p>
,特点:上下自动生成空白行,而<br>
标签换行不会生成空白行<font>文本内容</font>
<strong></strong>
和 <b></b>
,前者更具语义化
2.文本倾斜标签<em></em>
和 <i></i>
,前者更具语义化
3.删除线标签<del></del>
和 <s></s>
,前者更具语义化
4.下划线标签<ins></ins>
和 <u></u>
,前者更具语义化<img src="" alt="" title="" width="" height="">
<a href="" title="" target=""></a>
_self
为默认值,在自身页面打开(关闭自身页面,打开链接页面);_blank
打开新页面 (自身页面不关闭,打开一个新的链接页面)<ul type="square">
<li>d</li>
<li>a</li>
<li>c</li>
<li>e</li>
</ul>
type:disc
默认 实心小圆圈;square
小方块;circle
空心小圆圈
<ol type="i" start="2">
<li>e</li>
<li>re</li>
<li>a</li>
<li>f</li>
</ol>
<dl>
<!-- 小标题 -->
<dt>帮助中心</dt>
<!-- 解释标题 -->
<dd>购物指南</dd>
<dd>订单操作</dd>
<dd>账户管理</dd>
<dt>帮助中心1</dt>
<dd>购物指南2</dd>
<dd>订单操作3</dd>
<dd>账户管理4</dd>
</dl>
<meta name="keywords" content="html">
<meta name="description" content="html">
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
<link rel="stylesheet" href="1.css">
<link rel="icon" href="1.png">
表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
<!-- 4行3列表格 -->
<table border="4" width="300" height="400" cellspacing="2" cellpadding="10"
align="center" bgcolor="yellow" bordercolor="red">
<caption>标题</caption>
<!-- 行 -->
<tr align="left" >
<!-- 列 -->
<td align="right">1</td>
<td valign="bottom">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
<caption>标题</caption>
colspan=”2”
合并同一行上的单元格;rowspan=”2”
合并同一列上的单元格valign="top | middle | bottom"
<!-- 4行3列表格 -->
<table border="4" width="300" height="400" cellspacing="2" cellpadding="10"
align="center" bgcolor="yellow" bordercolor="red">
<caption>标题</caption>
<!-- 行 -->
<tr align="left" >
<!-- 列 -->
<td align="right">1</td>
<td valign="bottom">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td colspan="2" valign="top">7</td>
<!-- <td>8</td> -->
<td rowspan="2">9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<!-- <td>12</td> -->
</tr>
</table>
<form action="form.php" method="get"></form>
<form action="form.php" method="get">
<!-- 文本输入框 -->
用户名:
<input type="text" maxlength="6" readonly="readonly" disabled="disabled" name="username" value="html">
<br>
<!-- 密码输入框 -->
密码:
<input type="password" name="pwd">
</form>
<input type="radio" name="gender" checked="checked"> 男
<input type="radio" name="gender" > 女
<input type="checkbox" checked="checked"> 1
<input type="checkbox" > 2
<input type="checkbox" > 3
<select >
<optgroup label="水果">
<option >苹果</option>
<option >香蕉</option>
</optgroup>
<optgroup label="电器">
<option >电脑</option>
<option selected="selected">冰箱</option>
</optgroup>
</select>
<select multiple="multiple">
<optgroup label="水果">
<option >苹果</option>
<option selected="selected">香蕉</option>
</optgroup>
<optgroup label="电器">
<option >电脑</option>
<option >冰箱</option>
</optgroup>
</select>
<optgroup></optgroup>
对下拉列表进行分组, label=“”
分组名称<textarea cols="30" rows="10"></textarea>
<input type="file">
<input type="reset">
<input type="submit">
,可以实现信息提交功能<input type="button" value="普通提交">
,不能提交信息,配合JS使用<input type="image" src="1.png">
,图片按钮可实现信息提交功能<form action="1.php" method="get">
<fieldset>
<legend>分组1</legend>
<input type="text">
</fieldset>
<fieldset>
<legend>分组2</legend>
<select >
<optgroup label="水果">
<option >苹果</option>
<option >香蕉</option>
</optgroup>
<optgroup label="电器">
<option >电脑</option>
<option selected="selected">冰箱</option>
</optgroup>
</select>
</fieldset>
</form>
示意图
<fieldset></fieldset>
对表单信息分组<legend></legend>
表单信息分组名称<form action="1.php" method="get">
<!-- 网址控件 -->
<input type="url">
<br>
<br>
<!-- 日期控件 -->
<input type="date">
<br>
<br>
<!-- 时间控件 -->
<input type="time">
<br>
<br>
<!-- 邮件控件 -->
<input type="email">
<br>
<br>
<!-- 数字控件 -->
<input type="number" step="5">
<br>
<br>
<!-- 滑块控件 -->
<input type="range" >
</form>
特殊字符
好的语义化的网站标准就是去掉样式表文件之后,结构依然很清晰。