前端入门
核心基础 HTML+CSS+JAVASCRIPT
HTML
- 教程：菜鸟教程-HTML
- 练习检测：慕课网-HTML+CSS课程，freeCodeCamp，实验楼前端路径
- 总结：菜鸟教程过了一遍眼，但是没有敲代码，基本等于没学。然后就去慕课网找了类似于游戏通关的代码练习，但是章节不多，练习量不多，用处不大。freeCodeCamp上的通关教程还不错，不过是全英文的。然后，在 实验楼 的通关教程感受了一下，它自带了个在线操作环境，还不错。但还是得采用笨办法，把菜鸟教程上所有的代码全部敲一敲。
基础标签
- 文档类型的声明
- 双标签，告诉浏览器这是html文档
标题，双标签，显示在浏览器工具栏中，只有一个</li> <li><body> 双标签,定义文档主体</li> <li><h1-h6> 双标签，head标题，重要程度递减，显示的大小也递减</li> <li><p> 双标签，paragraph段落</li> <li><br /> 空标签，break换行</li> <li><hr /> 单标签，horizontal rule水平线</li> <li> 注释</li> <li><img> 单标签，src：地址，alt:图片加载失败时显示的文本，width:宽度，height高度</li> <li><abbr> 双标签，abbreviation缩写</li> </ul> <pre><code><p>The <abbr title="National Basketball Association">NBA</abbr> is exstremely famous in China.</p> </code></pre> <ul> <li><address> 双标签，地址,倾斜效果</li> </ul> <pre><code><address>武大吉奥信息技术有限公司<br/>武大园一路9号</address> </code></pre> <ul> <li><b> 双标签，加粗</li> </ul> <pre><code><p>我的第一个<b>专业加粗</b>段落。</p> </code></pre> <ul> <li><blockquote> 双标签，大段引用</li> <li><q> 双标签，短引用，会加上双引号</li> <li><cite> 双标签，标记作品，如期刊，电影之类，（便于浏览器摘录所引用的参考书籍-<em>待研究</em>）</li> <li><code> 双标签，标记为代码</li> <li><em> 双标签，强调，倾斜效果</li> <li><strong> 双标签，加粗</li> <li><dfn> 双标签，定义项目，倾斜效果，感觉跟em的效果差不多</li> <li><samp> 双标签，计算机样本，不明觉厉</li> <li><kbd> 双标签，标记键盘输入的内容格式</li> <li><var> 双标签，定义变量，倾斜效果</li> <li><del> 双标签，删除效果，给字体中间加一条删除线</li> <li><ins> 双标签，表示插入的字体，加条下划线</li> <li>< sup> 双标签，上标</li> <li>< sub> 双标签，下标</li> <li><pre> 双标签，保留空行和空格</li> </ul> <h5>HTML样式</h5> <ul> <li>background-color:背景色；</li> <li>opacity:透明度；</li> <li>position:定位(absolute ,relative,fixed)；</li> <li>width：宽度；</li> <li>height：高度；</li> <li>font-famil：字体；</li> <li>font-size：字体大小；</li> <li>text-align：对齐方式（left，right ，center）</li> <li>text-decoration:设置文本修饰（overline,line-through,underline,blink）</li> </ul> <h5>HTML表格</h5> <ul> <li><table> 双标签，表格</li> <li><tr> 双标签，行，</li> <li><td> 双标签，table data行中的数据</li> <li><th> 双标签，表头</li> <li><caption> 双标签，表格标题</li> <li><thead> 双标签,页眉</li> <li><tbody> 双标签，表格主体</li> <li><tfoot> 双标签，页脚</li> <li><colspan> 双标签，跨列合并，左上原则</li> <li><rowspan> 双标签，跨行合并</li> <li><ul> 双标签，无序列表</li> <li><ol> 双标签，有序列表<br> -<li> 双标签，具体列表内容</li> <li><dl> 双标签，自定义列表</li> <li><dt> 双标签，自定义列表项</li> <li><dd> 双标签，自定义列表项描述</li> </ul> <h5>HTML forms and input</h5> <ul> <li><select> 双标签，下拉框，和<option>一起食用,还有selected 配菜</li> <li><input> 单标签，表单输入</li> </ul> <pre><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题 Title
我的第一个专业加粗段落。
大段引用，如古诗：
前无古人,后无来者。
念天地之悠悠，独怆然而涕下。这首诗摘自唐诗三百首，我更喜欢王勃的
落霞与孤鹜齐飞，秋水共长天一色。
的意境。
The Scream by Edward Munch.Painted in 1893.
var a=3; var b="study";
来个强调吧。 这是未强调的，倾斜效果
来个加粗吧。 这是未加粗的
来个定义吧。 这个是未定义的
来个样本吧。 这不是计算机样本
来个键盘输入吧。 这不是键盘输入
来个变量吧。 这不是变量
来个删除吧。这不是删除
来个插入吧。 这不是插入 来个斜体的 这不是斜体
上标正常
下标正常保留空行 和 空格 格式保留
LWY geostar -smart city-the third teamLook! That is welson
Manipulate Cookbookwelson is a valleyball.and more....
first paragraph
paragraph
paragraph
second paragraph
this is a link of email: to wenyuan
a gif：
click sun and other planets:
table 表示表格，
tr 标示行，td标签内存数据one column:
100 one row with three columns:
100 200 300 two rows with three columns:
100 200 300 400 500 600 horizontal title :
NAME TELPHONE Nevin 4580111 4630222 vertical title:
student NAME Jack TEL 031 050 paragraph 1
paragraph 2
another table test
1 2 3 4 a list: - A
- B
- C
last