看到一段觉得比较励志的话:“当年我是个很普通的屌丝,一事无成,同学都很优秀,各种奖学金拿到天上去。终于发现一件可以做得来的事情,于是有了兴趣,然后在”follow your heart”这句话的激励下,披荆斩棘在前端这天路上走了出来。”现在的你,还不算晚,加油吧!
HTML:
新增:
以http开头的链接都是绝对路径
以"/"开头:代表根目录。 "./":代表目前所在的目录。 "../":代表上一层目录。
1.<hr> 标签在 HTML 页面中创建水平线。希望在不产生一个新段落的情况下进行换行(新行)
2.<!-- 这是一个注释 --> 所有连续的空格或空行都会被算作一个空格。 <br>换行
3.<b>加粗文本</b> <i>斜体文本</i> 通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。 <strong> 或者 <em>意味着你要呈现的文本是重要的,所以要突出显示
4.<sub> 下标</sub> 和 <sup> 上标</sup>
5.<big>这个文本字体放大</big> <small>这个文本是缩小的</small>
6.<pre>里面内容格式不变 包括空格</pre>
7.地址<address> </address>里面默认打出斜体
8.<bdo dir="rtl">该段落文字从右到左显示。</bdo>
9.删除文本和插入文本。<del>blue</del>中间有个横线 <ins>red</ins>下面有个横线
10.target="_blank"链接将在新窗口打开
11.无边框的图片border="0"
12.书签 在当前页面链接到指定位置 <h2><a id="C4">章节 4</a></h2> <a href="#C4">查看章节4</a>
13.使用 <meta> 元素来描述HTML文档的描述,关键词,作者,字符集等。
<meta name="description" content="免费在线教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="runoob"> 后面是前面的描述
14.<link> 标签定义了文档与外部资源之间的关系。
<link rel="stylesheet" type="text/css" href="mystyle.css">
15.每30秒钟刷新当前页面:<meta http-equiv="refresh" content="30">
16.使用 style 属性制作一个没有下划线的链接 style="text-decoration:none;"
17.当特殊的样式需要应用到个别元素时,就可以使用内联样式。应用到很多页面的时候,
最好的方式是通过外部引用CSS文件.<link rel="stylesheet" type="text/css" href="mystyle.css">
18.font-family(字体),color(颜色),和font-size(字体大小)属性来定义字体的样式:
19.<h1 style="text-align:center;">居中对齐的标题</h1>
20.定义图像:<img src="url" alt="some_text" width="304" height="228">URL 指存储图像的位置。alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。
21.图片设置相同的大小尺寸会是相同的序列。使图片至段落的左边或右边。style="float:left"
22.创映射建图像。具体见http://www.runoob.com/try/try.php?filename=tryhtml_areamap可供点击区域的图像地图。
23.表格 <table> 标签。 <tr>行 <td>列 <th> 表头(在行标签里面可一个) 一般粗体居中。 无边框border="0" <caption> ...</caption>带标题的表格 <th colspan="2">两列合并 <th rowspan="2">两行合并 <td>表格里面可以嵌套表格、列表。</td> <table border="1" cellpadding="10">内容与边框之间有空白 <table border="1" cellspacing="10">单元格间距 <thead>、<tfoot> 和 <tbody> 也可以用。
24.无序列表<ul><li> 圆圈列表:<ul style="list-style-type:circle"> 圆点列表(黑色实心):<style="list-style-type:disc"> 正方形列表:<style="list-style-type:square"> 有序列表<ol start="50" /type="A"/"a"/"I"> <li>Coffee</li><li>Tea</li></ol> 50.Coffee51.Tea 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
25.<span> 元素也没有特定的含义。可用于为部分文本设置样式属性。把 CSS 代码存放到外部样式表中,那么站点会更易于维护。通过编辑单一的文件,就可以改变所有页面的布局。由于创建高级的布局非常耗时,使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板(您可以使用这些预先构建好的网站布局,并优化它们)。
26.<form><input type="text" name="firstname" size="30">表单输入标签文本域长度 <input type="password">密码 <input type="radio" name="sex" value="male" >单选框 相同的name属性可以让name相同的单选框位于相同的组内 value提交到后台取的值是 value里的值 <input type="checkbox"> 定义了复选框. checked默认选中 <input type="submit"> 定义了提交按钮.会传送到action指定的位置
27.带有预选值的下拉列表。<form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </select>
28.文本域中写入文本。可写入字符的字数不受限制<textarea rows="10" cols="30">文本框。</textarea>
29.在数据周围绘制一个带标题的框。<fieldset> <legend>标题</legend> <input.....> </fieldset>
30.框架<iframe src="URL" width="200" height="200" frameborder="0"></iframe>URL指向不同的网页。移除边框。 使用iframe来显示目标链接页面<a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a> 点击后内部的网页跳转
31.0 是 hex code(十六进制编码)中最小的一个,它代表颜色的完全缺失。F 是 hex code(十六进制编码)中最大的一个,它代表最大可能的亮度。前两位表示颜色中红色的数量,第三四位代表绿色的数量,第五六位代表蓝色的数量。可以缩写成三位。另一个方法是使用 rgb 值。例如 body { background-color: rgb(0, 0, 0); }。
32.<script> 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。<script>document.write("...")命令向页面输出文字</script> 只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript> 元素中的内容<noscript>抱歉,你的浏览器不支持 JavaScrip</noscript>
33. 实体名称对大小写敏感!空格 <小于< ; > 大于>
34.预定义文本。在input(输入)框输入任何东西之前放置在框中。<input type="text" placeholder="this is placeholder text">
35.action表单提交到服务器的地址。 <form action="/url-where-you-want-to-submit-form-data"></form>
36.submit(提交)表单中的数据将会被发送到你通过action属性指定的地址上。<button type="submit">button</button>
37.required把一个文本输入字段设置为必填项
<input type="text" required>
38.多选一radio。每一个单选按钮都应该嵌套在它自己的label(标签)元素中。单选按钮应该使用相同的name属性。<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
多选。checkbox规则同上。
39.按钮默认被选中。Checked。
<input type="radio" name="test-name" checked>
40.background-color 设置一个元素的背景颜色。.green-background {
background-color: green;}
41.id 属性应该是唯一的。#
42.padding内间距 越大越高 负越大越低 margin外间距 越大越窄 负越大越宽
43.集中起来指定它们padding: 10px 20px 10px 20px;这四个值以顺时针方式排列:顶部、右侧、底部、左侧
44.其他元素将继承你的 body 元素的样式。
45.class="class1 class2"第二个声明总是比第一个具有优先权。< 同一行id 属性总是具有更高的优先级。< 行内样式将覆盖style="color: white" < 指定 关键字color: pink !important;
46.hex code 表示颜色0 是 hex code(十六进制编码)中最小的一个,它代表颜色的完全缺失。
F 是 hex code(十六进制编码)中最大的一个,它代表最大可能的亮度
前两位表示颜色中红色的数量,第三四位代表绿色的数量,第五六位代表蓝色的数量。
可以缩写成三位。另一个方法是使用 rgb 值。例如 body { background-color: rgb(0, 0, 0); }。
CSS:
1.选择器(h1) 一条或多条声明{属性:值;} /*....*/注释
2.外部样式表 <head><link rel="stylesheet" type="text/css"href="mystyle.css"></head> 当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表 内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式
3.背景。默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体 只在水平方向平铺 background-repeat:repeat-x; 不平铺background-repeat:no-repeat; 改变图像在背景中的位置:background-position:right top; 右边距margin-right:200px不会打扰到文本 固定的背景图像 background-attachment: fixed;
4.文本。文本居中text-align:center; 当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐 删除链接的下划线:text-decoration:none;underline;(带下划线) 可用于所有字句变成大写或小写字母,或每个单词的首字母大写。text-transform:uppercase;lowercase;capitalize; 文本的第一行的缩进。text-indent:50px;
5.增加或减少字符之间的空间。letter-spacing:2px;/-3px; 段落中行之间的空间更小/大行高line-height:70%/200%; 文本。从右到左的书写方向direction:rtl; 增加一个段落中的单词之间的空白空间word-spacing:30px; 文本的垂直对齐图像。文字与图形上/下面对齐vertical-align:text-top/bottom; 文本阴影。text-shadow:2px 2px red;
6.字体。设置文本的字体系列。不支持第一种字体,他将尝试下一种字体。如果字体系列的名称超过一个字,它必须用引号,p{font-family:"Times New Roman", Times, serif;} 斜体font-style:italic; 字体变淡或加粗font-weight:lighter;/bold;
7.链接。a:link {color:#000000;} /* 未访问链接*/a:visited {color:#00FF00;} /* 已访问链接 */a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */a:active {color:#0000FF;} /* 鼠标点击时 */ a:hover 必须跟在 a:link 和 a:visited后面 a:active 必须跟在 a:hover后面 删除链接中的下划线:前两个text-decoration:none; 后两个text-decoration:underline; 指定链接背景色background-color:#B2FF99; 移动到链接上改变字体大小hover {font-size:150%;}
8.列表样式。{list-style-type:circle;/disc;/square;/upper-roman;/lower-alpha;}无序:小圆点、黑原点、黑方框、有序:罗马数字、字母。 作为列表项标记的图像list-style-image:url('sqpurple.gif');
9.设置垂直对齐vertical-align:bottom;/top;底部/顶部 内容与空格之间的边框:padding:15px; 边框的颜色border:1px solid green; 和th元素的文本color:red;和背景颜色background-color:green;:
10.盒子模型。总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
11.边框 可以指定不同的侧面不同的边框: border-style:dotted solid double dashed;上右底左
CSS 没有定义 3 个关键字的具体宽度,所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px,border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。border-style:solid; border-width:5px; border-color边框颜色
下边框的样式border-bottom-style:none; 左边框的宽度。border-style:solid1; border-left-width:15px;
12.轮廓。突出元素的作用。 用outline属性在元素周围画一条线。border:1px solid red outline:green dotted thick;边框外边有点线边框 。 轮廓的样式outline-style:dotted; 轮廓的颜色、宽度。outline-style:dotted; outline-color:#00ff00 outline-width:thin;;
13.指定不同的侧面不同的边距:margin-top:100px; 可以不写top默认全选 上右底左
3个元素:上,左右,下 使用厘米值的文本的顶部margin。margin-top:10cm; 使用百分比值的下边距,相对于包含的元素的宽度。margin-bottom:50%;
14.分组选择器:每个选择器用逗号分隔。h1,h2,p{} 嵌套选择器:.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
15.不同元素的高度。height:120px;/50%;