Web前端学习

xietaojun666

已于 2022-10-29 11:40:43 修改

阅读量2.3k

点赞数

文章标签： css javascript html

于 2022-10-16 01:50:22 首次发布

本文链接：https://blog.csdn.net/xietaojun666/article/details/127343293

版权

Web前端入门学习基础知识

导言第一集

第一步：拔云见日

拨开云雾见提天日，守得云开见月明

基础部分：HTML、CSS；
切图流程：传统切图、智能切图、公司流行切图；
实战阶段：PC企业站布局、PC游戏战布局；

·第二步：溯本求源

基础部分的扩展：HTML的扩展、CSS的扩展；
新语法：HTML5、CSS3；
浏览器的兼容与解决方案：hack；

·第三步：风生水起

布局：弹性布局、网格布局、移动端布局、响应式布局；
布局框架：Bootstrap；

·第四步：巧夺天工

工程方面：预编译CSS、postrcss；
架构：CSS架构；
高级功能：解锁CSS的高级功能；
交互：CSS与JS的交互；

入门学习Web前端基础知识

第二集笔记:什么是HTML、CSS？

它们是两种编程语言，一般情况下需要配合使用，是作为网站开发的基础语言。一个网站是由多个网页组成的，每一个网页都是一个 .html 文件，而VScode，是进行网站开发的不二之选，是做网站的编程语言。

第三集笔记:网页编辑器VS Code

VS Code，全称Visual Studio Code，来自微软，是一个开源的、基于Electron 的轻量代码编辑器。

第四集笔记:VS Code快捷键：

ctrl +S 保存
ctrl +a 全选
ctrl + x、ctrl +c、ctrl +V:剪切、复制、粘贴
ctrl + z、ctrl +y :撤销、前进
shift +end :从头选中一行
shift + home :从尾部选中一行
shift + alt +↓:快速复制一行
alt +1或↓:快速移动一行
tab :向后缩进
tab + shift :向前缩进0
alt + 鼠标左键：多光标
ctrl + d ：选择相同元素的下一个

标题第五集笔记:深入了解网站开发

UI设计师
web前端开发工程师（H5开发）
设计稿→代码
数据库里的数据→显示到页面
HTML + CSS + JavaScript
— HTML：（结构层）
— CSS：（表现层）
— JavaScript：（行为层）

第六、七集笔记:HTM基础结构与属性

超文本标记语言（Hypertext Markup Language）标准通用标记下的一个应用，是网页制作的必备编程语言。
HTML：超文本，标记，语言

超文本：文本内容+非文本内容（图片，视频，音频等）

语言：编程语言

标记：（单词）
标记也叫标签
单标签（header）
双标签（header）（/header）

在这里插入图片描述

第八集笔记:HTML初始代码

每一个HTML文件都需要添加初始代码，初始代码，无论是你写什么样的网页，这些代码都是要用的，这就是初始代码。

！+tap键可以快速的创建html的初始代码。

Document

在这里插入图片描述

第九集笔记:HTML的注释

注释的代码，只有在文件中能看见，但是浏览器显示不出来<！——注释的内容——>

意义：

   1.把暂时不用的代码注释起来，以后方便使用.
   2.对开发人员进行提示。
   快捷添加注释与删除注释：
   1.ctrl+/
   2.shift+alt+a
   
   <!DOCTYPE html>

Document <!-hello world->

 <--登录-->
 ...........
 <--列表-->
 ............
 <--留言信息-->
 ..........
 <div>hello  HTML</div>

第十集笔记:HTML语言化

所谓HTML语义化指的是，根据网页内容中的结构，选择适合的HTML标签进行编写。
好处：

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

超链接
网页提取器的网站：https://h5o.github.io/

第十一集笔记:段落与标题

h标签实现标题
p标签实现段落

Document

标题

.............

标题

..............

标题

..............

...............

在一个网页中，h1标题最重要，并且一个.html文件中能出现一次h1标签。
h5,h6标签在网页不经常使用。
段落–>双标签:

第十二集笔记:文本修饰标签

:表示强调，会对文本加粗:表示强调，会对文体进行斜体

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

下标：
上标：

删除文本:
~~插入文本:~~
注：一般情况下，删除文本都是和插入文本配合使用的

!DOCTYPE html>

Document

a²+b²=c² H₂O

促销:原价~~999~~,现价9.9

第十三集笔记:图片标签和图片属性

图片：(单标签）
src:引入图片的地址。
alt:当图片出现问题的时候，可以显示一段友好的提升文字
title:表示提示信息
width、height:控制图片大小（单位：像素）

!DOCTYPE html>

Document

第一个段落

第十四集笔记:引入文件的地址路径

相对路径：

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

绝对路径

“C:\Users\86198.vscode\img\DOAX-VenusVacation_221013_115125.jpg”

Document

第十五集笔记:跳转链接

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

base–>单标签：作用是改变链接的的默认行为的。

Document

<!--<a href="http://www.baidu.com"target="_blank">访问百度</a>-->
<a href="http://www.baidu.com">访问百度</a>
<a href="http://www.baidu.com">访问百度</a>
<a href="http://www.baidu.com">访问百度</a>
<a href="http://www.baidu.com">访问百度</a>
<a href="http://www.baidu.com">访问百度</a>

第十六集笔记:跳转锚点

实现一
#号
id属性

实现二
#号
name属性
（在文本上重设一个)
(不占空间）

Document HTML CSS JavaScript

<h2 id="html">HTML超文本标记语言</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<h2 id="CSS">CSS的层叠样式页</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<h2 id="javascript">JS的脚本</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>

第十七集笔记:特殊符号

编写一些文档时，经常会遇到输入法无法输入的字符，如…（注册商标）、…（版权符）等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空白的字符都是特殊符号，在HTML中，为这些特殊字符准备了专门的代码。
在这里插入图片描述
1.&+字符
2.解决冲突左右尖括号、添加多个空格的实现
3.< >

第十八集笔记:无序列表

、

：列表的最外层容器、列表项—>符合嵌套的规范
注：ul和li必须是组合出现的，它们之间是不能有其他标签的，在li中可以存在其他标签。
type属性：改变前面标记的样式（一般都是用CSS去控制）
（http://www.w3school.com.cn/tags/att_ui _type.asp)
Document
- 第一项
- 第二项
```
 <ul>
    <li><a href="#"><strong>唉呃呃佛五道口</strong></a></li>
    <li><a href="#">飞机设计局额外</a></li>
    <li><a href="#">十五栋欸</a></li>
    <li><a href="#">跌幅胡文海覅</a></li>
    <li><a href="#">到底金佛忘记哦附件</a></li>
 </ul>
```
第十九集笔记:有序列表
1. 、
2. ：列表的最外层容器、列表项注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。
type属性：改变前面标记的样式（一般都是用CSS去控制）
（http://www.w3school.com.cn/tags/att_ui _type.asp)

与上述十八集相同

第二十集笔记:定义列表

定义列表对名词进行解释
对名词进行叙述列表项需要添加标题和对标题进行描述的内容。

第二十一集：嵌套列表
```
    注：列表之间可以相互嵌套，形成多层级的列表。
    <!DOCTYPE html>
```
Document
- 辽宁省
  - 沈阳
  - 大连
  - 丹东
- 山东省
  - 济南
  - 青岛
  - 烟台
```
           <dl>、<dt>和<dd>相似
```
第二十二集笔记：表格标签
：表格的最外层的容器：定义表格行
：定义表头：定义表格单元
：定义表格标题
```
     <em>注：之前是有嵌套关系的，要符合嵌套规范。
```
Document
天气预报
日期天气情况出行情况
2019年1月1日白天出大太阳天气晴朗，适合出行

第二十三集笔记：表格属性

border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式
valign：上下对齐方式

与上一笔记相同

第二十四集笔记：表单标签
：表单的最外层容器：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
Document
输入框：

密码框：

复选框：
苹果香蕉葡萄
单选框：
男女
上传文件

提交按钮和重置按钮

第二十五集笔记：表单标签

iuput（单标签）标签还有一个type属性，决定是什么控件。
还有一些常见的属性：
checked、disabled、name…
：多行文本框、：下拉菜单
：辅助表单 Document
输入框：

密码框：

复选框：
苹果香蕉葡萄
单选框：
男女
上传文件

提交按钮和重置按钮

多行文本框
```
    <h2>下拉菜单</h2>
    <select>
        <option selected disabled>请选择</option>
        <option >北京</option>
        <option >上海</option>
        <option >杭州</option>
    </select>
    <select size="3">
        <option >北京</option>
        <option >上海</option>
        <option >杭州</option>
    </select>
    <select multiple>
        <option >北京</option>
        <option >上海</option>
        <option >杭州</option>
    </select>
    <input type="file" multiple>
</form>
```
第二十六集笔记：表格表单组合

表格表单之间互相组合形成数据展示效果。
Document
总体信息用户注册
用户名
密码

第二十七集笔记：div与span

div（块）：
div全称divsion，"分割，分区"的意思，

标签用来划分一个区域，相当于一块区域的容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在
中还可以嵌套多层
，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。

span（内联）：
用来修饰文字，div和span都是没有任何默认样式的，需要配合CSS才行。
Document

千锋教育视频资料一站式下载平台-课件、笔记、技术文档

video.qfedu.com/download 2022-9-20,千锋教育资料一站式下载平台-Java、前端、大数据、Android等技术文档、课件、笔记、jar包、开发工具免费下载 Java全套资源打包下载千锋系统视频教程，每周更新，人气爆 …
video.qfedu.com/download

第二十八集笔记：CSS语法格式