web前端学习

m0_74116532

已于 2022-10-28 17:16:39 修改

阅读量1k

点赞数

文章标签：前端

于 2022-10-20 21:04:51 首次发布

本文链接：https://blog.csdn.net/m0_74116532/article/details/127433202

版权

web前端初步理解

总览
HTML部分
列表
表格
Css部分

总览

1、初步了解

HTML+CSS系列教程1之拨云见日
HTML，CSS，切图流程，pc企业站布局，pc游戏站布局
HTML+CSS系列教程2之溯本求源
扩展HTML,扩展CSSH,HTML5新语法，CSS3新语法,兼容与hack
HTML+CSS系列教程3之风生水起
弹性布局，网格布局，移动端布局，响应式布局，Bootstrap
HTML+CSS系列教程4之巧夺天工
预编译CSS，postcss，CSS架构，高级功能，CSS与JS交互

2、什么是html，css

html css分别是指:1、超文本标记语言，html是一种标记语言，它包括一系列标签
2、层叠样式表，css是一种用来表现HTML或XML等文件样式的计算机语言，CSS能够对网页中元素位置的排版进行像素级精确控制。
[^1]点击网页空白处，ctrl+v查看代码
在这里插入图片描述

3、宇宙第一编辑器VS Code

一款真正的跨平台编辑器
VS code下载地址：https：//code.visualstudio.com/

如何安装插件？语言包、open in browser view in browser

学习编辑器基本使用？
设置：文件->首选项->设置（大小、是否换行 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：向前缩进

4、Chrome浏览器

Google Chrome是一款由Google公司开发的网页浏览器，该浏览器基于其他开源软件撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。
软件的名称来自称作Chrome的网络浏览器GUI（图形使用者界面）。软件的beta测试版本在2008年9月2日发布，提供50种语言版本，有Microsoft Windows、macOS、Linux、Android、以及iOS版本提供下载。谷歌将在Chrome上推出“小程序”增强型网页应用（Progressive Web Apps，简称 PWA）。 2018年11月，Google宣布，将从2018年12月份开始在其Chrome 71网络浏览器上移除持续提供滥用使用体验的网站上的所有广告。
受2020年新型冠状病毒疫情影响，谷歌于2020年3月暂停向Chrome浏览器系统增加新功能，以保证软件尽可能平稳运行。
2022年2月7日讯，Google 再次修改 Chrome 浏览器图标。
改变后缀名，改变文件性质。
在这里插入图片描述

在这里插入图片描述

5、深入了解网站开发

UL设计师：设计稿
web前端开发工程师（H5开发）
设计稿->代码
数据库里的数据->显示到页面
HTML+CSS
HTML：结构
CSS：样式
web后端开发工程师

6、web前端三大核心技术

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

HTML部分

7、HTML的基本结构与属性

HTML：超文本标记语言
超文本：文本内容+非文本内容（图片、视频、音频等）
标记：<单词>
语言：编程语言
标记也叫标签
标签可以上下排列，也可以组合嵌套。

<header>
<footer>
写法分成两种：
单标签<header>
双标签<header></header>

创建标签的快捷键：单词+tab到<单词>
标签可以上下排列，也可以组合嵌套。
在这里插入图片描述
<标签属性=“值” 属性2=“值”>

8、HTML初始代码

每个HTML网页都有的代码就是初始代码,要符合HTML的书写规范,不写不会报错,但不规范.

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

9、HTML中的注释

写法：<!..注释的内容…>在浏览器中看不到，只能在代码中看到注释的内容。

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

快捷键加注释和删除注释
1.Ctrl+/
2.shift+alt+a

10、HTML语义化

根据网页中内容的结构，选择合适的HTML标签进行编写

在这里插入图片描述

11、标题与段落

h标签
在这里插入图片描述

p标签在这里插入图片描述

标题->双标签：<h1></h1>...<h6></h6>
在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签
h5、h6标签在网页中不常用
段落->双标签：<p></p>

12、文本修饰标签

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

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

13、图片标签与图片属性

：图片
src：引入图片的地址
alt：当图片出现问题时，可以显示一段友好的提示文字
title：提示图片
width、height：图片的大小

14、引入文件的地址路径

相对路径
绝对路径

15、跳转链接

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

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

16、跳转描点

实现一
#号
id属性
实现二
#号
那么属性

17、特殊符号

在这里插入图片描述

列表

18、无序列表

->ul li 符合嵌套的规范

19、有序列表

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

20、定义列表

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

21、嵌套列表

列表之间可以嵌套形成多层级列表。
ctrl+alt+A截屏
shift+alt+A将一段文字改为注释

在这里插入图片描述

表格

22、表格标签

<table>:表格的最外层容器
<tr>：定义表格行
<th>：定义表格表头
<td>：定义表格单元
<caption>：定义表格标题
注：以上有嵌套关系，要符合嵌套规范
语义化标签：<tHead>、<tBody>、<tFood>
注：<tBody>可以出现多次，<tHead>、<tFood>只能出现一次

在这里插入图片描述

日期	天气情况	出现情况
2019年1月1日	晴天	天气晴朗，适合出现
2019年1月2日	雨天	有小雨，出门请带伞

23、表格属性

在这里插入图片描述

24表单input标签

（from 、input（单标签））
表格嵌套有严格限制，表单没有
在这里插入图片描述
效果展示

代码

通过name=…（比如 gender）让单选框变为一组
action=某某网站就可以将数据输入到那里。

添加checked或者checked="checked"将选项在一开始就锁定

添加 placeholder="请输入用户名“”（后者看需要什么就填啥）
来提供提示信息
在这里插入图片描述

25表单相关标签

<textarea>:多行文本框
<select>、<option>:下拉菜单
<label>:辅助表单

disable:表示禁止这一项
size：显示更多选项
multiple:使选项可以多选
注意：想要多选得通过鼠标滑动。

成果展示
在这里插入图片描述
代码展示

input 也可以用multiple(多选)

通过添加“<label>"辅助，点击后面的男或女也可以进行选择
id与for 一 一 对 应

26、表格表单组合实例

表格表单组合
：表格表单之间可以互相组合形成数据展示效果。
先写表单，再写表格（表单没有规范，表格有规范（要求））
在这里插入图片描述

27、div与span

<div>(块）： 标签定义 HTML 文档中的分隔（DIVision）或部分（section）。
div属于web前端的学习内容，其中<div> 标签常用于组合块级元素，
以便通过样式表来对这些元素进行格式化。
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。
<div>内还可以多层嵌套<div>
<span>（内联）：用来修饰文字的，div和span都是没有任何默认样式的，需要配合css才行。

在这里插入图片描述

Css部分

28、CSS基础语法

选择器{ 属性1 ：值1 ；属性2 ：值2 }

width：宽
height：高
background-color：背景色

长度单位：
1.px->像素
2.%->百分比
示例： (外容器->600px 当前容量50%->300px)
Css注释：/Css注释的内容/

选择器和标签要产生映射关系。

29、内联样式于内部样式

内联（行内，行间）样式
在html标签上添加style属性来实现的
内部样式

在<style>标签内添加的样式
注：内部样式的优点，可用复写代码。

在这里插入图片描述
好的习惯：将结构和样式分离处理。

30外部样式以及两种写法

外部样式：引入一个单独的CSS文件，name.css
通过link标签引入外部资源，rel属性指定资源与页面的关系，href属性指定资源的地址。
link的位置：

在这里插入图片描述

@import
注：这种方式有很多问题，不建议使用。

31、CSS颜色表示法

1.单词表示法：red，blue，green，yellow
2.16进制表示法：#000000,#ffffff

0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f

3.rgb三原色表示法：rgb（255,255,255）

取值范围0~255

4.两种提取网页颜色的办法

下载FeHelper（必须在网络环境下）
ps（photoshop）

32、背景样式

background-color：背景颜色
background-image：背景图片

url（背景地址）（默认情况下会水平垂直铺满背景图）

background-repeat：背景图片的平铺方式
repeat-x：x轴平铺
repeat-y：y轴平铺
repeat ：（x，y轴都进行平铺，默认值）
no-repeat：都不平铺
background-position：背景图片的位置
x，y：number（px，%）|单词
x：left 、center、 right
y：top、center、bottom
background-attachment：背景图随滚动条的移动方式（主要scroll，fixed）
scroll：默认值（背景位置是按照当前元素进行偏移的）
fixed：（背景位置是按照浏览器进行偏移的）