Web前端学习

m0_74438342

已于 2022-10-21 20:54:22 修改

阅读量1.4k

点赞数

文章标签：前端学习

于 2022-10-21 20:45:24 首次发布

本文链接：https://blog.csdn.net/m0_74438342/article/details/127453485

版权

一、HTML、CSS系列教程

拨云见日

1.HTML
2. CSS
3. 切图流程
4. PC企业站布局
5. PC游戏站布局

溯本求源

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

巧夺天工

预编译CSS
postcss
CSS架构
高级功能
CSS与JS交互

二、了解什么是HTML和CSS

1.是做网站的编程语言。一个网站由很多网页组成。网页 .html
2.新建一个txt文件,然后在该文件中添加html代码并保存,最后将文件扩展名改为“html”
3. 打开HBuilder编辑器，依次点击“文件”-“新建”-“html文件”，然后设置 HTML文件名和保存路径，点击“创建”

三、宇宙第一编译器VS Code

下载地址：https://code.visualstudio.com
投置：文件﹣＞首速项﹣＞设置（大小，是香换行 word wrap )创建文件、创建文件夹、重命名和删除
 ctrl + S ：保存
 ctrl + a ：全选
 ctrl + x、ctrl + C 、 ctrl + V ：剪切、复制、粘贴 
 ctrl +z、 ctrl + y ：撤销、前进
 shift + end ：从头选中一行
 shift + home ：从尾部选中一行 
 shift + alt +↓  ：快速复制一行
 alt +↑或↓：快速移动一行
 tab ：向后缩进
 tab + shift ：向前缩进

四、chrome浏览器

爱淘宝PC新版

五、深入了解网站开发

随着HTML 5和ECMAScript 6的正式发布，大量的前端业务逻辑
极大地增加了前端的代码量，前端代码的模块化、按需加载和
依赖管理势在必行，因此Web前端越来越被人们重视。

第一阶段：需求分析
这一阶段是最基础的阶段。首先需要和客户沟通，了解客户需求，分析项目的可行性，撰写需求文档。分模块、分步骤进行规划，分析项目进度安排和所需要的成本。通过原型设计，更有效的还原需求，降低犯错概率，降低沟通成本。原型设计包括页面布局、页面逻辑流程、说明文档。

六、Web前端的三大核心技术

HTML ：结构
CSS ：样式
JavaScript ：行为

七、HTML基本结构与属性

HTML ：超文本、标记、语言
超文本：文本内容、非文本内容（图片、视频、音频）
标记：<单词>
语言：编程语言
标记也叫作标签

创建标签的快捷键：单词 + tab键 → <单词>
标签是可以上下排列，也可以组合嵌套。
风蚀地貌

标签的属性：来修饰标签的，设置当前标签的一些功能

八、HTML初始代码

每个HTML文件都有的代码，要符合HTML文件的规范写法。

意义
（1）把暂时不用的代码注释起来，方便以后使用。
（2）对开发人员进行提示。

快捷添加注释与删除注释
（1）ctrl + /
（2）shift + alt + a

九、HTML语义化

好处：

在没有CSS的情况下，页面也能呈现出很好的内容结构。
有利于SEO，让搜索引擎爬虫更好的理解网页。
方便其他设备解析（如屏幕阅读器、盲人阅读器）。
便于团队开发与维护。

十一、标题与段落

在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签
h5、h6标签在网页中不常用

十二、文本修饰标签

强调->双标签：、
区别：
1.写法和展示效果是有区别的，一个加粗，一个斜体
2.strong的强调性更强，em的强调性较弱。

  下标：<sub></sub>
  上标：<sup></sup>
  删除文本：<del></del>
  插入文本：<ins></ins>
  注：一般情况下，删除文本都是和插入文本配合使用的。

十三、图片标签与图片属性

img——>单标签 eg：<img src=“XXX.jpg”
src:引入图片的地址
alt:当图片出现问题的时候，可以显示一段友好的提示文字
title:提示信息
width:height:图片的大小

十四、引入文件的地址和路径

a→双标签：
href属性：链接的地址。
target属性：可以改变链接打开的方式，默认情况下:在当前页面打开 _self ;新窗口打开 _blank 。
base→单标签：
作用就是改变连接的默认行为的

十五、跳转链接

href属性

十六、跳转锚点

方法一：#号 + id属性
方法二：#号 + name属性

十七、特殊字符

1.1特殊符号
在编写一些文本的时候，经常会遇到输入法无法正常输入的情况，这个时候用html中的代码来表示这些特殊字符。
1.&+字符
2.解决冲突：左右尖括号，添加多个空格的实现
在这里插入图片描述

十八、无序列表

、
列表的最外层容器、列表项。（符合嵌套的规范）

ul和li必须是组合出现的，他们之间是不能有其他标签的。

十九、有序列表

ol li 一般用的比较少，可以用无序列表来实现

有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表

二十、定义列表

dl dt dd 列表项需要添加标题和对标题进行描述的内容