前端入门记录

总想写些什么,但总感觉不知道要写些什么。

自己稍微整理了下,可能有点乱,勿介意。。。哈哈哈!

可能会有遗漏,也可能不一定是对的,欢迎指出错误。。。

1:html是什么 css是什么js是什么?

什么是 HTML?
HTML 指的是超文本标记语言(Hyper Text Markup Language)

什么是CSS ?
CSS 指层叠样式表(Cascading Style Sheets)

什么是JS ?
Js指一种网页的脚本语言(JavaScript)

如果将html,css,js 通过房子来形象的展示出来,那么html就是房屋的框架结构(如房梁,地基等等),CSS则是内外的装修的元素(如沙子,水泥,染料等等),js是则是门窗(人们通过门窗外界互动)…

如果把HTML比作舞台,CSS就是舞台上的各种装饰和道具,JavaScript则是剧本,这三者结合,再加上演员(即网页上的实际内容)的倾情演出,一台大戏才有可能上演。

2:编程工具有哪些,辅助工具又有哪些相关的?
俗话说,工欲善其事,必利其器。则事达倍成也!

可能用到的(软件)有:

作图软件:Phptoshop
作为一个前端者会这个总没错,切图,制作小元素都可以自己完成。

编码工具:notepad++,webstorm,Sublime Text 2
编码工具有好多,各有各的优点,青菜萝卜各有喜爱,找出一款符合自己用的编码工具!
本人用sublime text ,青睐他一个特点是
你写的代码没保存下来,就关闭了软件,当你再次打开软件,代码依旧存在。
其实我对webstorm也比较喜欢,因为软件右侧会完整的展示出整个文档的结构,一目了然。

版本控制工具:GIT,github等
一个完整的网站,不是你一个人作战,它有设计师,前端人员,后端人员等等分工完成的。那么当我做完我自己这部分,如何整合其他同事做好的代码呢,那么必然需要有一些版本控制的系统工具出现。

调试工具:谷歌,火狐,IE等等
通常做出的页面都会在这几个游览器中看一下是否有什么错的地方,有什么BUG,然后再通过修改把这些BUG修复。通常都是通过审查元素(F12或者对着需要查看的元素右键找到审查元素的按钮点击下)来查看的。

查看手册:w3c,mdn 谷歌,百度等等
在学习的路上,会遇上很多不懂的东西,那么需要百度,谷歌来搜索自己的疑惑!

网页的基本框架

<!DOCTYPE html>

<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="../jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$(document).scroll(function(){
if($(document).scrollTop() > 150)
{
$(".header-fix").fadeIn();
}else{
$(".header-fix").fadeOut();
}
})
})
</script>
</head>
<body>
<div class="header" style="display: none;">
<div class="wrap">
<ul class="nav ">
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">SERVICES</a></li>
</ul>
<div class="logo"><a href="#"><img src="images/logo.png" alt=""></a> </div>
</div>
</div>
</body>
</html>

<!DOCTYPE>
定义和用法
<!DOCTYPE> 声明必须是HTML 文档的第一行,位于 <html> 标签之前。
<!DOCTYPE> 声明不是HTML 标签;它是指示 web 浏览器关于页面使用哪个HTML 版本进行编写的指令。

提示:请始终向 HTML 文档添加<!DOCTYPE> 声明,这样浏览器才能获知文档类型。

<html>….</html>
定义和用法
此元素可告知浏览器其自身是一个 HTML 文档。
<html> 与</html> 标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。正如您所了解的那样,文档的头部由<head>标签定义,而主体由<body>标签定义。

<head>…<head>
定义和用法
<head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息,包括文档的标题、在Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分:<base>, <link>, <meta>, <script>, <style>,
以及 <title>,<title> 定义文档的标题,它是head 部分中唯一必需的元素。

<title>..</title>
定义和用法
<title> 元素可定义文档的标题。
浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样,当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。
如:
<title>好搜 —用好搜,特顺手</title>

<meta>
定义和用法
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
如:
<meta name="keywords" content="好搜,360搜索,网页搜索,视频搜索,图片搜索,音乐搜索,新闻搜索,软件搜索,学术搜索">

<meta name="description" content="好搜是奇虎360公司推出的独立搜索品牌,致力于为您提供更精准、更快捷、更安全的搜索服务。用好搜,特顺手。">

<link>
定义和用法
<link> 标签定义文档与外部资源的关系。
<link> 标签最常见的用途是链接样式表。

<style>…<style>
定义和用法
<style> 标签用于为HTML 文档定义样式信息。
在 style 中,您可以规定在浏览器中如何呈现HTML 文档,style 元素位于head 部分中。
如:
<link rel="stylesheet"
href="css/style.css"> //指向外部CSS样式表
<style type="text/css">//内部编写CSS样式表
h1 {color: red}
p {color: blue}
</style>

<script>…</script>
定义和用法
<script> 标签用于定义客户端脚本,比如JavaScript。
script 元素既可以包含脚本语句,也可以通过src 属性指向外部脚本文件。
如:
<script src="../jquery-1.11.3.min.js"></script> //外部引用
<script> //内部编写JS代码
$(document).ready(function(){
$(document).scroll(function(){
if($(document).scrollTop() > 150)
{
$(".header-fix").fadeIn();
}else{
$(".header-fix").fadeOut();
}
})
})
</script>

<body>…<body>
定义和用法
body 元素定义文档的主体。
body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)
如:
<body>
<div class="wrap">
<ul class="nav ">
<li><a href="">HOME</a></li>
</ul>
</div>
</body>

呼呼,百度了好多些内容,然后添加进来不知不觉都1500+字了,但好像干货不多耶!!

呼呼,先写这么多吧,下次是HTML然后CSS,再JS把。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,463评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,868评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,213评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,666评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,759评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,725评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,716评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,484评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,928评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,233评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,393评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,073评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,718评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,308评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,538评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,338评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,260评论 2 352

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,747评论 1 92
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 2,348评论 0 25
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 114,344评论 24 450
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,467评论 1 19
  • 早晨六点,对亮哥是个巨大的挑战。要早晨六点赶到公园柳树下的长椅旁,亮哥计算了一下,最迟最迟也要5点45分起床。这个...
    鲁郡阅读 284评论 0 1