前端教程笔记

这里写目录标题

**前端教程笔记**
笔记1
- 1.什么是HTML,CSS?
- 2.如何去写代码？写到哪里？
笔记2
- 1.VSCode编辑器
- 2.如何安装插件？安装什么插件？
- 3.学习编辑器的基本使用
- 4.chrome浏览器
- 5.深入了解网站开发
- 6.web的三大核心技术
笔记3
- 1.HTML的基本结构和属性
- 2.HTML初始代码？
- 3.HTML的注释
- 4.HTML的语义化
- - 好处：
笔记4
- 1.标题与段落
- 2.文本修饰标签
- 3.图片的标签
- 4.引入文件的路径
- - 相对路径
  - 另外路径：绝对路径
- 5.链接标签
- 6.跳转锚点
- 7.特殊字符
- 8.列表的标签
- 9.定义列表

笔记1

1.什么是HTML,CSS?

是做网站的编程语言。浏览器把代码解析后的样子就是我们看到网站的原本是代码

2.如何去写代码？写到哪里？

一个网站是由多个网页组成的。（每一个网页是由.html组成的）
将文件的扩展名打开，然后将扩展名改为，html

笔记2

1.VSCode编辑器

vs code下载地址: https://code.visualstudio.com/

2.如何安装插件？安装什么插件？

1.点击左侧插件扩展可以找到插件
2.建议安装CHines，open in browers view in browers

3.学习编辑器的基本使用

ctrl+s:保存 crtl+c:复制
ctrl+a:全选 crtl+z:撤销
crtl+x:剪切 crtl+y:恢复
crtl+v:粘贴 shift+end:从头选到尾
shift+home:从尾选到头
shift+alt+下箭头：快速复制一行
alt+上箭头或者下箭头：快速移动一行
多光标：alt+鼠标左键
crtl+d:选择相同元素的下一个

在vscode左侧可以新建文件和文件夹，重命名和删除文件，搜索。
设置：文件->首选项->设置（大小，是否换行等word warp）

4.chrome浏览器

下载地址：http://chrome.zxianedu.cn/

5.深入了解网站开发

UI设计师 web前端开发（H5开发）设计稿->代码数据显示到页面
HTML+CSS html:结构 css:样式 Javascript:行为
web后端开发

6.web的三大核心技术

HTML,CSS,JAVASCRIPT

笔记3

1.HTML的基本结构和属性

HTML：超文本，标记，语言
超文本：文本内内容+非文本的内容（图片，视频，音频等）
标记：<单词>标记也叫做标签
语言：编程语言
标记也叫做标签；语言的写法分为两种：单标签+双标签
创建标签的快捷键：单词+tab键-><单词>
标签可以上下排列，也可以组合嵌套。
HTML常见的标签：http://www.html5stare.com/manual/html5able-meaning/

标签的属性:来修饰标签的，设置标签的一些当前功能。
<标签属性=“值1” 属性=“值2”>

2.HTML初始代码？

每个.html文件都有的代码叫做初始代码，要符合。html文件的规范写法。
初始代码的快捷键：！+tab键

《!DOCTYPE html>           文档声明：告诉浏览器这是一个html文件《html lang="en"> heml 文件的最外层标签：包裹着html标签代码 lang="en"表示是一个英文网站   lang="zh-CN"表示一个中文网站<head><meta charse="UTF-8">   元信息：是编写网页中的一些附着信息charset="UIF-8"国际编码，让网页不出现乱码的情况<title>Document</title>  设置网页的标题</head><head>显示网页内容的区域</body></html

3.HTML的注释

写法： 在浏览器中看不到，只能在代码中看到注释的内容。
意义：1.把暂时不用的代码隐藏起来，方便以后查看
2.对开发人员进行提示
快捷添加注释与删除注释：ctrl+/ 和shift+alt+a

4.HTML的语义化

指的是网页的内容，选择合适的HTML去标签进行编写。

好处：

1.在没有css的情况下也能呈现很好的内容结构
2.有利于seo，让搜算引擎爬虫更好的理解网页
3.方便其他设备解析（屏幕阅读器或者盲人阅读器等）
4.便于团都的开发与维护

笔记4

1.标题与段落

标题：->双标题 <h1></h1>到h6等
在一个网页中和h1标题只能用一次，且最重要。h5，h6标题不怎么用。

段落：->双标签 p标签

2.文本修饰标签

强调-> 双标签:<strong></strong> <em></em>
区别：1.前面的表示加粗，后面表示斜体 2.strong的强调性更强一点，而em的强调性稍微弱一点
下标:<sub></sub>
上标：<sup></sup>

删除文本：<del></del>
插入文本：<ins></ins>
一般情况下插入文本与删除文本都是配合使用的

3.图片的标签

img->单标签
src:引入图片的地址
alt：当图片出现问题的时候，可以提示一段友好的文字
title:提示信息
width heigth:图片的宽度和高度

4.引入文件的路径

相对路径

.在路径中表示当前的路径
…在路径中表示上一级的路径

另外路径：绝对路径

5.链接标签

a-> 双标签
href属性：链接的地址
target属性：可以改变链接打开的方式，默认情况下，在当前页面打开_self，在新页面打开_blank
base ->单标签，改变链接默认行为的

6.跳转锚点

实现一：#号 id属性
实现二：#号 name属性（name的属性是是加给a标签的)

7.特殊字符

编写一些文本时。经常会遇到输入法无法输入的字符，在HTML中专门准备了特殊字符的代码
1.&+字符
2.解决冲突，添加多个空格的实现
3.&lt,:&gt:&nbsp等等

8.列表的标签

1.无序列表 ->ul li 符合嵌套的规范
ul与li中不允许放置别的标签，但是li中间可以放置标签
2.无序列表-> ol li :列表的最外层容器，列表项
有序列表用的非常少，无序列表可以代替有序列表，无序列表经常被使用。

9.定义列表

定义列表：->dl,dt,dd 列表项需要添加标题和标题的内容

【web前端教程笔记】相关推荐

好程序员web前端教程分享JavaScript验证API
好程序员web前端教程分享JavaScript验证API,小编每天会分享一下干货给大家.那么今天说道的就是web前端培训课程中的章节. JavaScript验证API 约束验证DOM方法 Proper ...
Web前端开发笔记——第二章 HTML语言第四节超链接标签
目录前言一.超链接标签 (一)链接其它子网页 (二)链接其它站点 (三)虚拟超链接二.从当前页面链接到指定位置三.链接的访问情况四.在新窗口中打开链接例题结语前言本节介绍超链接标签即 ...
前后端解析_好程序员Web前端教程分享前后端分离接口
随着互联网的高速发展以及IT开发技术的升级,前后端分离已成为互联网项目开发的业界标准使用方式.在实际工作中,前后端的接口联调对接工作量占Web前端人员日常工作的30%-50%,甚至会更高.接下来的好程 ...
好程序员Web前端教程分享Vue学习心得
为什么80%的码农都做不了架构师?>>> 好程序员Web前端教程分享Vue学习心得,Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向 ...
js怎么定义combobox_好程序员web前端教程分享新手应该怎么学习webpack
好程序员web前端教程分享新手应该怎么学习webpack,什么是webpack?一句话概括:webpack是一个模块打包工具(module bundler).重点在于两个关键词"模块&quo ...
好程序员Web前端教程分享JavaScript开发技巧
好程序员Web前端教程分享JavaScript开发技巧,相信知道Web前端的小伙伴都熟悉,Javascript的很多扩展的特性是的它变得更加的犀利,同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站 ...
window 程序报错自动重启_好程序员web前端教程之详解JavaScript严格模式
好程序员web前端教程之详解JavaScript严格模式,严格模式(Strict mode)是由ECMA-262规范定义的新兴JavaScript标准,发布于2009年12月第五版.旨在改善错误检查功 ...
零基础带你飞web前端教程带你探究web前端趋势
web前端教程带你探究web前端趋势,IT行业发展迅速,瞬息万变,很多想要学习Web前端进入IT行业的人都会担忧Web前端行业发展趋势如何.下面,老师就带大家了解一下2021年Web前端行业发展趋势如 ...
vue如何获取年月日_好程序员web前端教程分享Vue相关面试题
好程序员web前端教程分享Vue相关面试题,Vue是一套构建用户界面的渐进式框架,具有简单易用.性能好.前后端分离等优势,是web前端工程师工作的好帮手,也是企业选拔人才时考察的重点技能.接下来好程序 ...

【web前端教程笔记】