web前端开发的基础学习日记1

zkd1094692863

已于 2022-10-20 19:57:47 修改

阅读量1k

点赞数 4

文章标签：前端学习 html 学习方法职场和发展

于 2022-10-20 19:42:53 首次发布

本文链接：https://blog.csdn.net/zkd1094692863/article/details/127428574

版权

这篇博客是关于web前端开发的学习笔记，主要涵盖了HTML的基础知识，包括HTML+CSS系列导言、HTML和CSS的介绍、使用VsCode作为编译器、Chrome浏览器的使用，以及HTML的基本结构、注释、语义化、标题和段落、文本修饰、图片标签、链接、锚点等内容。此外，还介绍了网站开发的职位角色和工作流程。

摘要由CSDN通过智能技术生成

一、HTML+CSS系列导言

1、拨云见日

基础：HTML+CSS
切图流程
实战：PC企业站布局、PC游戏站布局

2、溯本求源

扩展：HTML和CSS
新语法：HTML5和CSS3
兼容与hack

3、风生水起

-布局：弹性布局，网格布局，移动端布局，响应式布局（Bootstrap）

4、巧夺天工

工程架构：预编译CSS，postcss，CSS架构
高级功能以及CSS与JS交互

二、什么是HTML和CSS？

1、是做网站的编程语言，浏览器把代码解析以后的样子就是我们看到的网站

2、HTML（结构层）:超文本语言，决定网页的结构与内容

3、CSS（表现层）：层叠样式层，设定网页的表现样式

4、如何查看网站的原始代码呢？

通过鼠标右键选择查看网页源代码

三、编译器

1、宇宙第一编译器VsCode

全称Visual Studio Code,来自微软，是一个开源的、基于Electron的轻量代码编辑器
优点：体积小，启动速度快
下载地址：https://code.visualstudio.com/
需安装的插件：语言包、open in browser、view in browser(方便直接进入网页）

2、编译器的基本使用

设置：文件 --> 首选项 --> 设置（大小、是否换行 word warp）
新建文件/文件夹（对应目录上也会显示）、重命名、删除、搜索
ctrl+s：保存
ctrl+a：全选
ctrl+x：剪切
ctrl+c：复制
ctrl+v：粘贴
ctrl+z：撤销
ctrl+y：前进
shift+end：从开头选中一行（光标放在开头位置）
shift+home：从尾部选中一行（光标放在尾部位置）
shift+alt+ ↓ ：快速复制一行
alt+ ↑ 或 ↓：快速移动一行
tab：向后缩进
tab+shift：向前缩进
alt+鼠标左键：多光标（同时进行修改）
crtl+d：选中相同元素的下一个

四、chrome浏览器

谷歌浏览器（Google Chrome）是一款可让您更快速、轻松且安全的使用网络的浏览器。市场分额占比过半。
Chrome下载地址：https://www.google.cn/intl/zh-CN/chrome/
百度统计浏览器市场份额：https://tongji.baidu.com/data/browser chrome:68.88%
五大浏览器：
1、Internet Explorer浏览器（IE）
2、Opera浏览器（欧朋）
3、Safari浏览器（苹果）
4、Mozilla Firefox浏览器（火狐）
5、Google Chrome浏览器（谷歌）

五、深入了解网站开发

1、UI设计师

设计稿

2、web前端开发工程师（H5开发）

设计稿->代码
数据库里的数据->显示到页面
HTML+CSS

3、web后端开发工程师

整理数据库的数据

六、HTML的基本结构和属性

HTML超文本标记语言，标记通用标记语言的下一个应用，是网页制作必备的编程语言。

1.超文本

文本内容+非文本内容（图片、视频、音频等）

2.语言

编程语言（语法格式、书写格式）

3.标记（标签）

<单词>比如：
写法：单标签，双标签
快捷方式：单词+Tab快速打出双标签
标签是可以上下排列，也可以组合嵌套
HTML常见标签：https://www.juanzan.com/cha/html5/

4、标签的属性

修饰标签，设置当前标签的一些功能
例：<标签属性 =“值” 属性2 =“值2”> 一个标签可以加若干属性

七、HTML初始代码

每一个html文件都需要添加初始代码，，初始代码就是无论你你写什么样的代码，这些代码都是有的，要符合html文件的规范写法。
！+Tab键：快速创建html的初始代码，不添加初始代码也能正常解析

<!DOCTYPE html>         文档声明︰告诉浏览器这是一个html文件
<html lang= "en" >      html文件的最外层标签:包裹着所有html标签代码
                        lang ="en"表示是一个英文网站lang-"zh-CN"表示一个中文网站
    <head>
        <meta charset="UTF-8">     元信息:是编写网页中的一些赋值信息
        <title>Document</title>    设置网页标题
    </head>
    <body>
        显示网页内容的区域
    </body>
</html>