HTML
– 文档结构与基本语法
– 结构
– 头部（<head>）
– 主体（<body>）
– 语法
– 标签
– 单标签：例如换行标签 <br/>
– 双标签：例如标题标签 <h1属性及其属性值>内容</h1>
– 语法规则
– 标签名称 属性名1="属性值1" 属性名2="属性值2"…
– 属性需写在首标签内，且与标签名之间有一个空格。
– <hr size="5px" align="center" color="blue" width="80%">
– 示例
<html>
<head>
<!– 头部：在<head>与</head>之间部分，用于定义页面元信息等 –>
<title>这是网页标题</title>
</head>
<body text="blue">
<!– 主体：在<body>与</body>之间部分，用于展示页面内容 –>
<h1>这是网页内容标题<h1>
Hello,<b>world</b>!
<hr size="5px" align="left" color="red" width="50%">
你好!
</body>
</html>
– 基本标签与使用
– 注释标签
<!– 注释内容 –>
– 在 HTML 源码中插入注释，注释会被浏览器忽略
– 文本与段落标签
– 标题标签
– <h#></h#>（#=1-6
– 共 6 级，字体大小依次递减；align 属性设定对齐方式
– 黑体标签
– <b></b>
– 斜体标签
– <<i></</i>
– 字体标签
– <font></font>
– size（1-7，字体大小）、color（字体颜色，支持名字或十六进制 RGB 值）、face（字体字型，如 “宋体”“楷体”）
– 段落标签
– <p></p>
– align 属性指定对齐方式
– 水平分隔线标签
<hr color="blue" width="80%" size="2px">
– width（长度）、size（粗细）、color（颜色）、align（对齐方式）
– 插入回车换行符
– <br/>
– 超链接标签
<a href="url" target="view_window">这是超链接文字或图片，点此跳转</a>
– href：指定链接目标（另一个网页的路径）
target：规定在何处打开链接文档
– _blank 在新窗口/标签页打开
– _self 在当前窗口打开（默认值）
– _parent 在父级框架中打开
– _top 在顶级窗口打开
– _unfencedTop 在顶级无围栏上下文打开
– 图片标签
<img src="url" height="高度" width="宽度" alt="替代文本">
结合超链接：
<a href="目标链接地址" target="_blank">
<img src="图片地址" alt="图片描述">
</a>
– 定时刷新 & 自动跳转
一般放在<head>标签中
定时自刷新
<meta http-equiv="refresh" content="1">
– 页面每隔 1 秒刷新一次（content 值为刷新间隔，单位秒）
定时自动跳转
<meta http-equiv="refresh" content="3;url=http://www.sohu.com">
– 页面 3 秒后自动跳转到搜狐主页
– 表格标签
<table>
<caption>表格标题</caption>
<tr><<th>列名一</</th><<th>列名二</</th>……</tr>
<tr><td>数据一</td><td>数据二</td>……</tr>
</table>
– 表格由行、列、单元格组成，核心标签：<table>（表格）、<tr>（表格行）、<td>（单元格）、<<th>（表头单元格）、<caption>（表格标题）
– HTML 表单标签与表单设计
– 表单组成
– 表单由文本框、密码框、多行文本框、单选按钮、复选框、下拉菜单 / 列表、按钮、文件域、隐藏域等表单元素及其标签组成
<label>标签：
– <input>标签及其属性
<input name="输入域名称" type="域类型" value="输入域的值">
<input type="text" placeholder="请输入用户名">
灰色提示文字
用户开始输入时自动消失
为空时才显示
不会被表单提交
<input type="text" value="admin">
黑色实际内容
用户需要手动删除
始终显示（除非被删除）
会被表单提交
– name 和 type 是必选属性，name 属性值为响应程序中的变量名
– type：文本域-text，密码域-password，单选按钮-radio，复选框-checkbox，提交按钮-submit，重置按钮-reset，普通按钮-button，图像按钮-image，文件域-file，隐藏域-hidden，
示例：
<html>
<head>
<title>用户注册</title>
</head>
<body>
<h2>用户注册</h2>
<form>
<label>用户名：</label>
<input type="text" name="username" placeholder="请输入用户名"><br/><br/>
<label>密码：</label>
<input type="password" name="pwd" placeholder="请输入密码"><br/><br/>
<label>确认密码：</label>
<input type="password" name="repwd" placeholder="请再次输入密码"><br/><br/>
<label>性别：</label>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女<br/><br/>
<label>爱好：</label>
<input type="checkbox" name="hobby" value="music">音乐
<input type="checkbox" name="hobby" value="travel">旅游
<input type="checkbox" name="hobby" value="program">编程<br/><br/>
<label>个人简介：</label><br/>
<textarea name="intro" rows="5" cols="30"></textarea><br/><br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>
多行文本框<textarea>标签
<textarea name="" rows="" cols="" wrap="off/virtual/physical">初始值</textarea>
– HTML 框架标签与框架设计
– HTML5 之前的框架分割（<frameset>标签）
<frameset rows="高度1,高度2,…" 或者 cols="宽度1,宽度2,…">
<frame src="网页1">
<frame src="网页2">
</frameset>
– HTML5 框架实现（<iframe>标签）
<div>
<iframe style="height:30%;width:100%" src="top.html" name="top" scrolling="no"></iframe>
<iframe style="height:100%;width:30%" src="left.html" name="left" scrolling="no"></iframe>
<iframe style="height:100%;width:69%" align="right" src="right.html" name="right" scrolling="auto"></iframe>
</div>
– 将浏览器窗口分割为多个独立窗口，每个窗口可加载不同网页
– 属性说明
– style：设置 iframe 的高度（height）和宽度（width）
src：指定加载的网页路径
name：框架名称
scrolling：是否显示滚动条（no/auto）
