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 ™ ™
· 间隔符 · ·
« 左双尖括号 « «
» 右双尖括号 » »
° 度 ° °
× 乘 × ×
÷ 除 ÷ ÷
‰ 千分比 ‰ ‰
HTML快速参考的更多相关文章
- Oracle安装部署,版本升级,应用补丁快速参考
一.Oracle安装部署 1.1 单机环境 1.2 Oracle RAC环境 1.3 Oracle DataGuard环境 1.4 主机双机 1.5 客户端部署 二.Oracle版本升级 2.1 单机 ...
- Oracle 11.2.0.4单实例打PSU,OJVM PSU补丁快速参考
写在前面: 1.Oracel打每个补丁的操作有时存在差异,所以不管多熟悉,都应该在打任何补丁之前阅读新补丁中附带的readme. 2.Oracle每季度都会更新一个最新的PSU,本文最新指的是当前最新 ...
- Oracle 11.2.0.4 DataGuard 环境打PSU,OJVM PSU补丁快速参考
环境:RHEL6.5 + Oracle 11.2.0.4 DataGuard physical standby 主库和备库都是单节点. 需求:主备库同时应用160719的PSU和OJVM PSU补丁. ...
- 数据库 PSU,SPU(CPU),Bundle Patches 和 Patchsets 补丁号码快速参考 (文档 ID 1922396.1)
数据库 PSU,SPU(CPU),Bundle Patches 和 Patchsets 补丁号码快速参考 (文档 ID 1922396.1)
- jenkins2 pipeline 语法快速参考
jenkins2 pipeline中常用的语法快速参考. 文章来自:http://www.ciandcd.com文中的代码来自可以从github下载: https://github.com/ciand ...
- oracle数据库 PSU,SPU(CPU),Bundle Patches 和 Patchsets 补丁号码快速参考 (文档 ID 1922396.1)
数据库 PSU,SPU(CPU),Bundle Patches 和 Patchsets 补丁号码快速参考 (文档 ID 1922396.1) 文档内容 用途 详细信息 Patchsets ...
- Razor 语法快速参考
Razor 语法快速参考 本文引自:http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx 语法名称 Raz ...
- 转: seajs手册与文档之 -- 快速参考 ( ~~useful )
目录 快速参考 seajs.use seajs.config define require require.async exports module.exports 快速参考 该页面列举了 SeaJS ...
- Selenium 2.0 WebDriver 自动化测试 使用教程 实例教程 API快速参考
Selenium 2.0 WebDriver 自动化测试 使用教程 实例教程 API快速参考 //System.setProperty("webdriver.firefox.bin" ...
- 【翻译】C#和.NET核心快速参考
原文:[翻译]C#和.NET核心快速参考 PS:在网上看到的一篇C#总结,英文的,总结的还可以,都是基础知识,翻译给大家学习.文章结尾有英文原版.发布地址:http://www.cnblogs.com ...
随机推荐
- CSS3 skew倾斜、rotate旋转动画
css3出现之前,我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写,脚本代码较为复杂: 若需要实现倾斜.旋转之类的动画难度将更高(我还没试过用JavaScript或Jque ...
- Gitlab服务器搭建(For fedora23)
1. Install and configure the necessary dependencies sudo yum install curl policycoreutils openssh-se ...
- php单引号和双引号的区别与用法
php里的单引号把内容当成纯文本,不会经过服务器翻译.而双引号则与此相反.里面的内容会经过服务器处理(process). 举个简单的例子: $foo="data"; echo ...
- LED汽车前大灯
一.LED汽车前大灯遇到问题.分析和解决 问题1: 当电源电压增大时,LED等闪烁,而且电源电压增大的越多闪烁的频率越低. 原因分析: 电源电压从12V升高到24V过程中,开关MOS管的Vds增大,Q ...
- xcode 必用插件二
本文大致整理了自己用过的一些插件的使用感想(就是好不好用). 在那之前先简单贴两条插件须知,知道的可以忽略. 1.Alcatraz 类似于管理第三方库的cocoapods,管理插件也有个Alcatra ...
- django中form表单的提交:
一,关于表单: 表单在百度百科的解释: 表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域 ...
- 限制sqlserver最大内存后无法连接-EXEC sp_configure max server memory
在sql server 中设置了过小的 "max server memory"最大内存后,sqlserver可启动,但是无法连接. 网络上流行的"sqlserver 内存 ...
- Codeforces Round #198 (Div. 2) —— B
B题是一个计算几何的题,虽然以前看过计算几何的ppt,但一直都没有写过: 昨晚比赛的时候本来想写的,但是怕不熟练浪费时间,太可惜了! 其实没必要选出一个最大的矩形: 以矩形的一条对角线为轴,向上或者向 ...
- linux下使用NFS挂载文件系统
转自linux如何使用NFS挂载文件系统 设备:一台服务器和一台客户端,这里我们把装在PC机上的RedHat作为服务器,而客户端则是嵌入式linux开发板. 环境:开发板已启动,连接好串口和网线,串口 ...
- UserMailbox 必须强制使用 Database---Database is mandatory on UserMailbox error
XX搞了接近一天,终于搞定. 不只是在查看用户邮箱里发现这样的情况,就连在PS里执行GET-MAILBOX之类,都有这个报错. 跟网上所有的解决方法都不一样. 重新了系统邮件都不行,重新了ADMINI ...