本文档介绍了HTML的基本使用方法，包括文档结构、文本元素、链接与图片、列表、表格、表单等核心内容，并提供了示例代码。
HTML 模版
html>
<head>
<meta charset="utf-8"/>
<title>html template</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<!-- 文档容器 -->
<div class="g-wrapper">
<!-- 头部 -->
<header>
</header>
<!-- /头部 -->
<!-- 主体容器 -->
<div class="g-body">
<!-- 侧栏 -->
<aside>
</aside>
<!-- /侧栏 -->
<!-- 主栏 -->
<div class="g-main">
<div>
<!-- /主栏 -->
<div>
<!-- /主体容器 -->
<!-- 页脚 -->
<footer>
</footer>
<!-- /页脚 -->
</div>
<!-- /文档容器 -->
</body>
</html>HTML 基本文档
<html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>HTML 文本元素
<h1>一级标题</h1>
<p>段落</p>
<br /> （换行）
<hr /> （行线）
<blockquote>长引用</blockquote>
<q>短引用</q>
<pre>预格式文本</pre>HTML 链接，图片
<a href="url">Link text</a>
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
<a name="tips">基本的注意事项 - 有用的提示</a>
<a id="tips">基本的注意事项 - 有用的提示</a>
<a href="#tips">跳到同一文本有用的提示的位置</a>
<img src="boat.gif" alt="Big Boat 当图片无法加载时的显示文本">
还可以和<map>和<area>一起制作图像地图HTML 列表
无序列表
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
有序列表
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
自定义列表
<dl> 标签定义了定义列表（definition list）。
<dl> 标签用于结合 <dt>（定义列表中的项目）和<dd>（描述列表中的项目。）
<dl>
<dt>咖啡</dt>
<dd>咖啡是利用咖啡豆制作的饮料</dd>
<dt>牛奶</dt>
<dd>牛奶是。。。</dd>
<dt>茶</dt>
<dd>茶是。。。</dd>
</dl>HTML 表格
<table border="1">
<tr> <!-- 表格的行 -->
<th>姓名</th> <!-- 表格的表头 -->
<th>电话</th>
<th>电话</th>
</tr>
<tr>
<td>Bill Gates</td> <!-- 表格的单元格data -->
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>表格边框
水平表头，垂直表头跨行rowspan，跨列colspan，单元格间距cellspacing，
边距cellpadding，边框宽度border，背景颜色，图像，内容位置，
利用border-collapse样式指定是否合并表格边框HTML 表单
<form action=" " method="post/get">
<!-- 输入类型 -->
<input type="text" name="firstname" value="Mickey" size="20" maxlength="20">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" name="sex" value="male" checked="checked">
<input type="submit" value="Submit">
<input type="reset">
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
<input type="number" name="quantity" min="1" max="5">
<input type="date" name="birthday">
<input type="color" name="favcolor">
<input type="range" name="points" min="0" max="10">
<input type="time" name="usr_time">
<input type="datetime-local" name="bdaytime">
<input type="email" name="email">
<input type="search" name="googlesearch">
<input type="url" name="homepage">
设置预定义值的 <input> 元素
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<!-- 下拉列表 -->
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<textarea name="Comment" rows="20" cols="20"></textarea>
</form>HTML 转义字符
建议用实体
" 双引号 "
& &符 &
< 左尖括号（小于号） <
> 右尖括号（大于号） >
空格
不建议用实体
¥ 元 ¥ ¥
¦ 断竖线 ¦ ¦
© 版权 © ©
® 注册商标R ® ®
™ 商标TM ™ ™
· 间隔符 · ·
« 左双尖括号 « «
» 右双尖括号 » »
° 度 ° °
× 乘 × ×
÷ 除 ÷ ÷
‰ 千分比 ‰ ‰
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
