学习目的
1，能改前端的模板
2，自己装修页面
3、前后端交互多个技术
4、能操作网页元素
5、能和前端开发人员沟通
开发工具:
pycharm/webStorm
EditPlus(适合初学)
sublime(各种模块，推荐)
Visual Studio/VSCode
Chrome(谷歌浏览器)
1、配置HTML模板
打开sub,crtl+alt+h 生成一个html模板 或 file->New File ->HTML
<!doctype html> ??<!-- html标准 H5标准,只能出现在第一句第一行--><html> ??????????<!--网页开始--> ???<head> ??????<!--用来设置网页的属性--> ???????<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> ??<!--网页属性值--> ???????<meta name="Keywords" content=""> ??<!--关键字 类似百度google搜索时的关键字--> ???????<meta name="description" content=""> ?<!---描述 搜索到关键字后显示的内容--> ???????<title>title</title> ????????????????<!--标签页标题--> ???????<style type="text/css"> ???????????*{margin:0;padding:0;} ???????????????????</style> ?<!--‘/‘表示严格与不严格模式--> ???????<link href="" rel="stylesheet"></head> ?<!--头部--><body> ?<!--主体、内容--> ???</body></html> ????<!--网页结束-->2、html标签:
标签是由尖括号<> 把关键词括起来，通常是成对出现
2.1HTML规范
1)由闭合的标签必须闭合
2)所有的标签一律小写
3)开发的适合，注意代码缩进(通常四个空格或两个空格)
4)特殊符号规范使用，并以分号结尾
2.2定义标题
<body> ???????<h1>Python</h1> ??<!--加粗顺序约大字体越小,一个页面当中一般来说只会出现一次h1，可以供我们的搜索引擎进行关键字匹配--> ???????<h2>Java</h2> ???<!--也有换行的功能--> ???????<h3>C++</h3> ???????<h4>C#</h4> ???????<h5>Go</h5> ???????<h6>VB</h6> ????????《Python 3程序开发指南》本书首先讲述了构成Python语言的8个关键要素，之后分章节对其进行了详尽的阐述，包括数据类型、控制结构与函数、模块、文件处理、调试、进程与线程、网络、数据库、正则表达式、GUI程序设计等各个方面，并介绍了其他一些相关主题。全书内容以实例讲解为主线，每章后面附有练习题，便于读者更好地理解和掌握所讲述的内容。 ???</body>
2.3段落标签
<p></p>,前后的元素都会被换行
<body> ???????<h1>Python</h1> ????????《Python 3程序开发指南》本书首先讲述了构成Python语言的8个关键要素，之后分章节对其进行了详尽的阐述，包括数据类型、控制结构与函数、模块、文件处理、调试、进程与线程、网络、数据库、正则表达式、GUI程序设计等各个方面，并介绍了其他一些相关主题。全书内容以实例讲解为主线，每章后面附有练习题，便于读者更好地理解和掌握所讲述的内容。 ????????<p> ???????????Mark Summerfield，Qtrac公司的所有人，同时还是一位在Python、C++、Qt以及PyQt等领域卓有专长的独立培训专家、顾问、技术编辑与作者。Mark Summerfield撰写的书籍包括《Rapid GUI Programming with Python》以及《Qt：The Definitive Guideto PyQt Programming》（Addison—Wesley，2008），并与Jasmin Blanchette共同编写了《C++GUI Programming with Qt 4》（Addison—Wesley，2006）。作为Trolltech的文档管理者，Mark创立了并负责编辑Trolltech的技术杂志《Qt Quarterly》。 ????????</p></body>
效果:
2.4特殊符号 < > amp; ©
?<h2>特殊符号使用</h2> ????<p>&lt;h1&gt;Python<;h1></p> ????<p>小于 ------&lt;</p> ????<p>大于 ------&gt;</p> ????<p>& ------&apm;</p> ????<p>版权号 ----©<p> ????<p>空格 ------ ------</p> ????<p>叉 ------ ×</p> ????<p> 换 <br/> 行 </p>
效果:
2.5标签
sub编辑器 ctrl+alt+enter 输入p等关键字，可对所选区加标签
alt+shift+w
sub编辑器 ctrl+d 多选，选中后可esc键，撤销关键词
谷歌浏览器ctrl+r 刷新
b 加粗
p 段落
strong 同加粗区别是能被SEO搜索引擎优化
a <a href="">This is a标签</a> 增加跳转
<a href="http:\\www.baidu.com">This is a标签</a> ?#跳转到百度
<a href="#">This is a标签</a> ?#跳转到当前页面
<a href="#" name="top">this is top</a> ?<!--跳转的位置--><a href="#top">This is a标签</a> ???<!--跳转到上文-->
<p id="p"> ?<!--其它类型标签跳转，只能取一次--><a href="#p">This is a标签</a> ?
2.6图片
1)BMP 点阵图，占用空间大，色彩丰富。
2)JPEG,JPG 有损压缩，在页面中一般都采用此格式
3)gif 动图
4)png 支持Alpha通道，支持透明，半透明，支持无损压缩
<img src="" alt="" width="500" height="" />
src:图片路径
width:宽度,单位像素
height:高度
alt:搜索引擎关键字
2.7列表
1)无序列表
disc:圆形黑色实心
square:方形黑色实心
circle:空心圆
???<ul type="square"> ????????<li>111</li> ????????<li>222</li> ????????<li>333</li> ????????<li>444</li> ????</ul>
2)有序列表
<ol>
????li{$@5}*3 #sub中从5开始创建创建3列
</ol>
i:小写罗马字符序列号
I:大写罗马字符序列号
A:大写字母序列号
a:小写字母序列号
????<ol type="I"> ????????<li>5</li> ????????<li>6</li> ????????<li>7</li> ????</ol>
3)定义一个列表
????<dl> ????????<dt>标题1</dt> ????????<dd>data定义数据</dd> ????</dl>
html基础1(环境准备、标签)
原文地址：http://www.cnblogs.com/Taj-Zhang/p/7521543.html