html最基本的格式
在sublime的emmmet中输入了html:4s,在按tab或者ctrl+e就可以生成如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
html标签
1.标题
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
2.段落
<p></p>
3.链接
<a href=""></a>
4.图片
<img src="" alt="" title="">
元素和属性
<a href=""></a>
href代表a标签的一个属性,都是键值对的形式。
水平线和注释
1.水平线
<hr />
2.注释
<!-- This is a comment -->
<p>
和<br />
<p></p>
是块级元素,俗称硬换行,其实就是生成一个段落,每个<p>
之间是会有一个空行的。而<br />
是內联元素,俗称软换行,每个<br />
之间是没有换行的。
html样式
html的样式现在都是用css表示,常用的一个html标签来修改行内文字的格式<span></span>
链接
1.新窗口打开链接
<a href="#" target="_blank"></a>
2.锚标签
<a href = "#xx"></a>
<h1 name=xx></h1>
3.发送电子邮件
<a href="mailto:oliverhuangpy@163.com"></a>
ps:mailto:地址?cc&bcc&subject&content
表格
<table border="1" summary=""><!-- 表格边框与描述 -->
<tr>
<th>Heading</th><!-- 表头 -->
<th>Another Heading</th>
</tr>
<tr><!-- 单元格-行 -->
<td>row 1, cell 1</td><!-- 单元格-列 -->
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
表格标题: <caption></caption>
列表
1.无序列表
<ul>
<li>list</li>
<li>list</li>
</ul>
2.有序列表
<ol>
<li>list1</li>
<li>list2</li>
</ol>
3.定义列表
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
表单
表单标签
<form></form>
1.文本域
<input type="text" name="lastname" />
2.单选按钮
<input type="radio" name="sex" value="female" />
<input type="radio" name="sex" value="male" />
3.复选框
<input type="checkbox" name="car" />
4.表单提交
<form name="input" action="html_form_action.html" method="get">
<!-- action代表服务器的文件,method代表传送的方式 -->
Username:
<input type="text" name="user" /><!-- name是给服务器后端程序的值 -->
<input type="submit" value="Submit" />
</form>
5.下拉列表
<form>
<select name="cars"><!-- 加上mutilple代表的是多选 -->
<option value="volvo" selected="selected">Volvo</option><!-- selected是默认选中 -->
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option><!-- value是给服务器的值 -->
</select>
</form>
6.文本域
<textarea rows="10" cols="30">
7.自定义按钮
<input type="button" value="Hello world!">
8.field around data(很少用)
<fieldset>
<legend>健康信息:</legend>
<form>
<label>身高:<input type="text" /></label>
<label>体重:<input type="text" /></label>
</form>
</fieldset>
ps:增补一些内容
sublime安装了emmet后再输入html:5按Tab
出现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
短文本的引用:
<q></q>
长文本引用:
<blockquote></blockquote>
地址:
<address></address>
代码(单行):
<code></code>
代码(多行):
<pre></pre>
form的for:
<label for="xx"></label>
<input id="xx" />