HTML+CSS学习笔记 01
2020-06-10 本文已影响0人
langlangjinjin
一.邂逅软件开发
1.1 对于软件的认识
- 软件是什么?
- 软件就是application,我们日常手机上安装的qq,微信都是软件
- 一个完整的软件体系应该是什么样的?
- 服务器 (用后端语言,诸如java/node/python/php开发的能为各种客户端提供服务的电脑)
- 客户端:用户访问数据的各种终端,如,安卓端,iPhone端,ipad端,pc网页端,windows,mac上的客户端等等
- 一个完整的软件体系应该具备以上所说的所有
1.2 对于前端开发的认识
- 处于什么样的行业?
- IT互联网,软件开发
- who are you ?
- 前端开发工程师,软件 开发工程师
- 开发者,程序员,码农等
- developer,coder,programmer
- 前端开发的主要内容是什么?
- 前端开发
- 也可以做后端开发(Node.js)
1.3 疑惑解答:是否适合学习前端?
- 英文水平的要求?
- 学习前期,只要求会一些基本的词汇就可以,遇到不会的单词多用翻译软件翻译,学习,平时没事时多背单词,英语对于编程还是很重要的
- 是否要求是计算机专业?
- 并不要求,只要是会使用计算机就可以,当然是计算机专业就更好了
- 学习难度?
- 在软件开发的领域中算是简单的了,但是东西很多,很杂,技术更新速度也快,需要不断地学习
- 智商要求?
- 不管学习什么,智商都不是决定性因素,认真努力才是王道
- 行业发展前景?
- 前景非常的好,学就完了
二.对网页的认识
2.1 网页和网站的关系?
- 一个网站有N个网页组成(N>=1)
2.2 什么是网页?
- 上网浏览的页面
- 用户从网页上可以获取信息(类似新闻,报纸等)
2.3 怎样浏览网页?
- 浏览器
2.4 前端工程师要做的工作?
- 在自己的电脑上进行网站的开发
- 将开发的出来的内容进行打包(webpack/gulp)
- 上传和部署 -> 服务器
- 用户通过浏览器 -> URL -> 下载资源 -> 浏览器解析
2.5 网页的组成?
- HTML:超文本标记语言,用来描述网页的基本结构和骨架
- CSS:层叠样式表,用于对网页样式的美化
- JavaScript:网页的交互处理
2.6 浏览器的内核?
- 浏览器最核心的部分就是渲染引擎,也就是浏览器的内核
- 负责解析网页语法,渲染显示网页
- 不同浏览器渲染规则不同,所以同一个网页在不同浏览器也会有不同的展现形式
2.7 常见的浏览器内核?
- trident: IE
- gecko: Firefox
- presto ->blink: Opera
- webkit -> Safari/Android/iOS(webview)
- blink -> Chrome
建议使用chrome浏览器
三.开发第一个网页
3.1 使用记事本开发第一个网页
- 新建一个文本文档
- 编写文档结构,如下:
<!doctype html>
<head>
<title>使用记事本开发第一个网页</title>
</head>
<body>
<h1>开始学习前端的内容</h1>
</body>
</html>
- 保存文件,更改后缀名为.html,在浏览器中预览效果
3.2 开发工具的选择 vscode
- 插件安装
- Chinese
- open in browser
- atom
- vscode-icons
- 设置
- 自动保存(延迟时间)
- 字体大小
- wrap 换行
- 空格渲染 -> 点
- tab -> 4/2
3.3 元素的使用
- 对HTML的理解
- Hyper Text Mark Language ,超文本标记语言,页面中可以包含普通的文本,图片,链接,甚至可以是媒体元素,如音频和视频等,以.htm或者.html结尾,一般的,html文件也叫网页文件
- 元素的基础
- 双标签 <开始标签>内容</结束标签>,如<head></head>,<body></body>等
- 单标签 <标签名> 如<img>,<input>等
- 元素是可以相互嵌套的,代码如下:
<!doctype html> <html> <head> <title>元素的基本使用</title> </head> <body> <div> <h2>标题1</h2> <p>哈哈哈哈</p> <ul> <li>面饭</li> <li>面包</li> <li>馒头</li> <li> <strong>面条</strong> </li> </ul> </div> <div> <h2>标题2</h2> <p>呵呵呵呵</p> </div> </body> </html> - 元素的属性
- <开始标签 属性1="值1" 属性2="值2">
- 有些属性是共有的,如id,class,title
- 有些属性是特殊元素才具有的,如img的src,alt和input的placeholder等
3.4 注释的使用
- 注释的定义
- 简单来说,注释就是一段代码说明,程序执行时会跳过,是给开发者阅读的
- html中注释是这样的:
<!-- 注释内容 --> - 注释的重要性
- 帮助我们理解代码的思路,方便以后查阅
- 与他人合作开发时,添加适当的注释可以节省沟通成本
- 开发自己的框架时,添加适当的注释,有利于别人的使用和学习(开源精神)
- 适当的注释有利于代码的调试
- 注意:
- 注释不能相互嵌套
