工具的配置:
sublime
安装Sublime Package Control:
使用 Ctrl+` 快捷键打开 Sublime的命令行面板,复制粘贴:
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
回车之后,就会发现在 Preferences 菜单下会多出两个子菜单:Package settings、Package Control
5、安装 Emmet 插件:
选择菜单:Preferences -> Package Control -> Install Package
输入:Emmet 回车
点击搜索结果中的 Emmet 条目,即可安装插件,完成后重启 Sublime
配置浏览器:——————————html————————————
————基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
1 / <!DOCTYPE>
文档类型,文档规范的定义
2 / <html>内容</html>
文档标记,开始标记。分别位于网页的最前端和最后端。表示开始和结束
3 / <head>内容</head>
文件头标记,用来包含文件的基本信息,比如网页的标题,关键字等。在head里面的内容不会在浏览器中显示
用于存放 title,mata,style,script,base,link
4 / <title>页面标题</title>
标题标记,网页的主题显示在窗口左上边。这个标记中不能包含其它标记。是放在head标记里面的。
5 / <meta>内容</meta>
这个标记必须放在head元素里面
1 / discription 页面描述。提供有关页面的元信息。SEO优化。
必须属性: content 值:some_text 比如针对搜索引擎和更新频度的描述和关键词
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="discription" content="页面内容描述">
<title>Document</title>
</head>
2 / keywords 关键词描述。提升排名的一种方式。必须属性: content 值:some_text 比如针对搜索引擎和更新频度的描述和关键词
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="discription" content="页面内容描述">
<meta name="keywords" content="关键词">
<title>Document</title>
</head>
3 / 字符集(编码格式)
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
6 / <body>页面主体</body>
用于存放所有的html结构标签。
————标签:
标签和被标签的内容构建html文档
格式:
<标签>内容</标签>
标签的属性:就是用来控制内容(图像,文本等)如何的显示
格式:
<标签 属性1=属性值 属性2=属性值.....> 内容 <标签>
————————————————————————————
1 / <h>内容</h>系列标签
标题标签(有默认属性)
2 / <p>段落内容</p>标签
P标签表示段落,默认段落间是有间隔的。
<p>这是一段文字</p>
3 / <hr />标签在页面上显示一条横线,默认占整行
<hr />
4 / <br />标签
换行。
这是一行 <br /> 这是第二行
5 / 文本标签:
b,u,i,s,strong,em,del,ins
<body>
<b>这是b标签</b> <!-- 加粗 -->
<i>这是i标签</i> <!-- 倾斜 -->
<u>这是u标签</u> <!-- 下划线 -->
<s>这是s标签</s> <!-- 删除线 -->
<hr />
<strong>这是strong</strong> <!-- 加粗 -->
<em>这是em</em> <!-- 倾斜 -->
<ins>这是ins</ins> <!-- 下划线 -->
<del>这是del</del> <!-- 删除线 -->
</body>
6 / img标签
<body>
<img src="images/baidu.png" title="这是一张图片" alt="这是什么" />
</body>
src属性是img特有属性。
img标签的属性:
1 / alt :图片加载不出来就显示alt里面的文字。2 / title:鼠标移动到图片上显示的文字。
7 / <a></a>标签
超链接标签
<body>
<a href="跳转路径" target="_blank">跳转的按钮</a>
</body>
其他:
1 / href = "#" //href = #的时候,a标签不跳转
2 / a标签的“锚”——当前屏幕跳转到指定位置(通过id #指定跳转到某个id的位置)
<a href="#tt" target="_blank">锚点</a>
<div id="tt" >第一章</div>
a标签的属性:
1 / href 跳转路径
2 / taget =“ _blank” :在新页面跳转
taget = "_self" 在当前页面跳转
3 / base ="_blank" 为页面中所有的a标签设置跳转,放置在head标签中
target href 是a标签独有的属性
8 / <div></div>标签
用来布局的标签。
9 / <span></span>标签
用来布局的标签。
————列表:
1 / <ul></ul>无序列表:
<li></li>
<body>
无序列表:
<ul>
<li><a href="#">列表1</a></li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
<li>标签是一个容器,可以放其他标签。
2 / <ol></ol>有序列表:
<li></li>
<body>
有序列表:
<ol>
<li><a href="#">列表1</a></li>
<li>列表2</li>
<li>列表3</li>
</ol>
</body>
3 / <dl></dl>自定义列表:
<dt></dt>
<dd></dd>
<body>
自定义列表:
<dl>
<dt>大分类1</dt>
<dd>子类1</dd>
<dd>子类2</dd>
<dd>子类3</dd>
<dt>大分类2</dt>
<dd>子类1</dd>
<dd>子类2</dd>
<dd>子类3</dd>
</dl>
</body>
————表格:
1 / 表格标签
<table></tabel> 表格范围
<caption></caption> 表格标题
<tr></tr> 行
<th></th> 表头标签,放在表格的最上一行
<td></td> 列
<thead></thead> 存放当前列的表头。如果没有加css,页面默认将表头中的高度设置变小
<tbody></tbody> 存放表格中的主体数据。浏览器自动添加
<tfoot></tfoot> 一般情况不会出现
2 / 表格的属性
border = " " 表格边框
width = " " 表格宽度
height = " " 表格高度
align : 表格的显示位置:
——| left 居左显示 (默认)
——| center 居中显示
——| right 居右显示
cellspacing:单元格之间的间距,默认2px
cellpadding:单元格内容与单元格边框的显示距离。单位像素。
frame:控制表格边框最外层的四条线框
rules: 控制是否显示以及如何显示单元格之间的分割线
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="300" height = "200">
<caption>表格标题</caption>
<thead>
<tr>
<th>序号</th>
<th>序号</th>
<th>序号</th>
<th>序号</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</body>
</html>
————表单:
——表单元素:
1 / input 标签
属性:
① type 文本输入框
= text :文本输入框;
= password : 密码输入框 ;
= hidden :隐藏域;
= radio :单选框(必须给每一个radio加一个相同的name属性)
= checkbox :多选框
= button : 按钮
= reset : 重置 (只能在form标签中起作用)
= image : 图片按钮
= submit : 提交
② value = “XXXX” 设置默认显示值 (text,password,button,reset)
③ checked ="checked" 默认选择
④ name = "xxx" 相同name属性,将radio,checkbox作为一个选择集合
2 / <select></select> 下拉选单
属性:
① <option>内容</option> 选择内容
② selected= "selected" 设置默认选择
3 / <textarea></textarea>文本域
——form标签:
用来管理页面上的表单元素。表单元素必须放在form标签中。
属性:
action :将所有数据提交到action指定的页面 (必须给要提交的标签放置 name 属性)
—————————
表单范例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>注册页面</title>
</head>
<body>
<form action="页面地址">
用户名:<input type="text" value="默认显示值"><br/>
密 码:<input type="password">
<hr/>
<input type="hidden">
<hr/>
性 别:<input type="radio" name="sex">男 <input type="radio" name="sex">女 <input type="radio" name="sex" checked="checked">保密 <br/>
爱 好: <input type="checkbox">篮球 <input type="checkbox">足球 <input type="checkbox" checked="checked">台球 <input type="checkbox">游泳 <br/>
国 籍:<select>
<option>中国</option>
<option selected="selected">日本</option>
<option>韩国</option>
</select> <br/>
签 名:<textarea>这里写默认值</textarea> <br/>
<input type="button" value="点击"> <input type="reset"> <br/>
<input type="image" src="images/baidu.png"> <br/>
<input type="submit">
</form>
</body>
</html>