HTML默认结构
<!-- 注释的内容 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> #标签是Html的元信息,包含编码、跳转、刷新、关键字、描述、IE兼容....
<title>文档标题</title> #页面标题
<link rel="stylesheet" type="text/css" href="theme.css"> #链接到外部样式CSS文件
<link rel="shortcut icon" href="image/favicon.icon"> #链接到外部icon图标
<style></style> #定义css样式
<script> </script> #1.编写js代码
<script src="jquery-1.12.4.js"> </script> #2.引进jquery文件
</head>
<body>
<h1>我的第一个HTML页面</h1>
<p>我的第一个段落。</p> #段落和段落之间有间距
</body>
</html>
标签分类
自闭合标签
<meta charset="UTF-8">
主动闭合标签
<title>老男孩</title>
块级标签
H标题、p标签、div(白板:可嵌套)
行内标签
a、select、span(白板:css、js操作)
特殊符号 更多查阅网页特殊符号大全
空格
>< <>
标签
<h1>-<h6> 标题
<p> 段落
<br/> 换行(自闭合)
<a> 超链接 <a href="http://www.123.com"> </a>
1.在新的页面打开 target="_blank"
2. 锚点 <a href="#i1"></a> —— <div id="i1"></div> (ID不能重复)
<img> <img scr="地址" title="鼠标经过显示" alt="未加载显示 ">
Input系列(提交表单form)
<form action="提交地址" method="GET"/"POST">
输入框
<label for="">用户名</label> #Input中的id属性可与label关联
#(name为input名字,value为input内容)
#(require="ture"是否必填,Field="string"类型,range="4-40"长度,mobile="true"手机号格式,min-len最小长度,confirm-to关联 confirm比较name)
<input type='text' name="user" value="" id="" placeholder="请输入关键字" />
<input type='password' name="pwd" value="" id="" />
<input type='button' name="登录" />
<input type='submit' name="登录" />
<input type='reset' name="重置" /> #重置表单
选择(默认选中:属性checked="checked"或者checked="ture")
男:<input type='radio' name="相同互斥" value="值" /> #单选框
女:<input type='radio' name="相同互斥" value="值" />
篮球:<input type='checkbox' name="同系列相同" value="值" /> #复选框
足球:<input type='checkbox' name="同系列相同" value="值" />
网球:<input type='checkbox' name="同系列相同" value="值" />
</form>
文件(特定form属性enctype发送文件)
<form action="提交地址" method="GET"/"POST" enctype="multipart/form-data">
<input type='file' />
</form>
多行输入
<textarea name="meno">默认值</textarea>
下拉框
<select name="city" size="默认" multiple="multiple"> #multiple属性默认多选
<option value="值" selected="selected" />选项</option>
</select>
列表
序列 ·
<ul>
<li>内容</li>
</ul>
序列 123
<ul>
<li>内容</li>
</ul>
分组
<dl>
<dt>标题</dt>
<dd>内容</dd>
</dl>
表格
<table border="1"> #合并单元格td属性colspan="数字"(横向)/rowspan="数字"(纵向)
<tr>
<td>一行一列</td>
<td>一行二列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行二列</td>
</tr>
</table>
<table border="1">
<thead>
<tr>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容</td>
</tr>
</tbody>
</table>
H5画布Canvas参考手册
HTML5