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