web前端学习1-45集

article/2025/7/14 16:24:50

web前端1-45集

  • ==第一集== 课程划分
    • 1.HTML+CSS系列教程1之拨云见日
    • 2.HTML+CSS系列教程2之溯本求源
    • 3.HTML+CSS系列教程3之风声水起
    • 4.HTML+CSS系列教程4之巧夺天工
    • 如何学好web前端
  • ==第二集== 拨云见日
    • 1. 什么是HTML、CSS:
    • 2. 代码跟网站的关系:
    • 3.写到哪里:
    • 4.怎样创建一个.html文件:
    • 作业
  • ==第三集== 宇宙第一编译器VS Code
    • 1.学习编辑器基本使用:(操作方面)
    • 练习
  • ==第四集== 续上集
    • 2.多光标操作:
    • 3.搜索图标:
    • 4.Chrome浏览器(谷歌浏览器):
    • 练习:
  • ==第五集== 深入了解网站开发
    • 1.UI设计师:
    • 2.web前端开发工程师(H5开发):
    • 3.web后端开发工程师:
    • 练习
  • ==第六集== web前端三大核心技术
    • 1.html:
    • 2.css:
    • 3.JavaScript:
    • 4.操作方面
  • ==第七集== HTML基础结构与属性
    • 1.超文本:
    • 2.标记(标签):
    • 3.创建标签快捷键操作:
    • 4.*[HTML5标签含义之元素周期表](https://www.juanzan.com/cha/html5/)*
    • 练习
  • ==第八集== ***HTML初始代码***
    • 1.初始代码快捷创建方式:
    • 2.手写初始代码:基本结构:
    • 练习
  • ==第九集== HTML注释
    • 1.写法:
    • 2.意义:
    • 3.快捷添加注释与删除注释:
    • 练习
  • ==第十集== HTML语义化
    • 1.好处
    • 2.具体操作:
  • ==第十一集== 标题与段落
    • 1.h标签:
    • 2.p标签:
    • 练习
  • ==第十二集== 文本修饰标签
    • 1.常见文本修饰标签
      • 1.1 ````:表示强调,会对文本进行加粗
      • 1.2````:表示强调,会使文本斜体
      • 1.3````、````:下标文本、上标文本(都是双标签)
      • 1.4````:删除文本、插入文本
  • ==第十三集== 图片标签与图片属性
    • 1. ````:图片(单标签)
    • 2.````属性:
    • 3.Tip
    • 练习
  • ==第十四集== 引入文件的地址途径
    • 1.相对路径
    • 例子
    • 2.绝对路径(暂时不用)
  • ==第十五集== 跳转链接
    • 1.````标签(双标签)
      • 标签属性含义
        • 1.1href属性:链接的地址
        • 1.2target属性:可以改变链接打开的方式
    • 2. ````标签(单标签)
    • 练习(重要)
  • ==第十六集== 跳转锚点
    • 1.实现方案一
    • 2.实现方案二
    • 练习
  • ==第十七集== 特殊符号
  • ==第十八集 无序列表==
    • 1.列表标签
    • 2.列表标签的type属性:
    • 练习(重要)
  • ==第十九集== 有序列表(不重要)
  • ==第二十集== 定义列表
    • 1.三个标签:
  • 练习
  • ==第二十一集== 嵌套列表
    • 1.例子
    • 练习
  • ==第二十二集== 表格标签
    • 1.基本
    • 2.语义化标签:````
  • ==第二十三集==表格属性
    • 1.属性
    • 练习
  • ==第二十四集==表单标签
    • 1.````
    • 2.````
  • ==第二十五集==表单标签
    • 1.````:多行文本框
    • 2.```` ````:下拉菜单
    • 3.``
    • 4.常见属性
    • 练习(重要)
  • ==第二十六集==表格表单组合
  • ==第二十七集==``
    ``与`` ``
  • ==第28集== css基础语法
    • 1.格式
    • 2.单位
    • 3.基本样式
    • 4.针对以上注释
    • 5.css注释
  • ==第29集== 内联样式与内部样式
    • css样式引入方式
      • 1.内联(行内、行间)样式
      • 2.内部样式[代码可以复用]
  • ==第30集== 外部样式
  • ==第31集== css中的颜色表示法
    • 1.单词表示法(局限色种)
    • 2.十六进制表示法
    • 3.RGB三原色表示法
    • 4.(提取网页中的颜色)
    • 练习
  • ==第32集== css背景样式(赶进度)
    • background-colour:背景颜色
    • background-image:背景图
    • background-repeat:背景图片的平铺方式
    • background-position:背景图片的位置
    • background-attachment:背景图随滚动条的移动方式
  • ==第33集==练习
  • ==第34集== css边框样式
  • ==第35集==练习
  • ==第36集== css文字样式
    • 1.font-family:字体类型
    • 2.中文字体的英文名称
    • 3.衬线体与非衬线体
  • ==第37集==续
    • 1.fond-size:字体大小
    • 2.fond-weigth:字体粗细
    • 3.fond-style:字体样式
    • 4.color:字体颜色
    • 练习
  • ==第38集== css段落样式
    • 1,text-decoration:文本装饰
    • 2.text-transform:文本大小写(针对英文段落)
    • 4.text-align:文本对齐方式
  • ==第40集== 续
    • 5.line-height:定义行高
  • ==第41集==续
    • 6.letter-spacing:定义字间距
    • 7.word-spacing:定义词间距(针对英文)
    • 8.强制折行:(针对英文)
  • ==第42集==(综合针对练习)(重要)
  • ==第43集== css复合样式
  • ==第44集== css选择器
    • 1.ID选择器
  • ==第45集== 续
    • 2.CLASS选择器
    • 小技巧(检查样式是否生效)

  • 计划任务

第一集 课程划分

1.HTML+CSS系列教程1之拨云见日

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

2.HTML+CSS系列教程2之溯本求源

  1. 扩展HTML
  2. 扩展css
  3. HTML5新语法
  4. 兼容与hack

3.HTML+CSS系列教程3之风声水起

  1. 弹性布局
  2. 网格布局
  3. 移动端布局
  4. 响应式布局 Bootstrap

4.HTML+CSS系列教程4之巧夺天工

  1. 预编译css
  2. postcss
  3. css架构
  4. 高级功能
  5. css与js交互

如何学好web前端

感兴趣
够努力

第二集 拨云见日

1. 什么是HTML、CSS:

两种编程语言、一般配合使用,是网站开发的两种基础语言(做网站的编程语言)。

2. 代码跟网站的关系:

浏览器对代码进行解析,然后就呈现出这样一个网站,网站是解析之后的代码。
查看网页源代码,淘宝对应的原始代码。前面一部分是HTML,后面一部分是css。
写代码、运行
(浏览器把代码解析之后的样子就是我们看到的网站,如何看到网站的原始代码呢?通过鼠标右键查看网页源代码)

3.写到哪里:

一个网站是由N多个网页组成的,
电视剧,40集,每一集都是MP4文件
每一个网页都是一个.html文件

4.怎样创建一个.html文件:

在指定目录下,点击右键,创建文本文档,把整体重新命个名,比如“01-demo.html”

作业

百度百科:HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。 [1]
超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。 [1]
百度百科:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。 [2]

第三集 宇宙第一编译器VS Code

全称Visual Studio Code,来自微软,是一个开源的、基于Electron的轻量代码编译器。
下载后是一个.exe文件
在最左侧拓展搜索关键词下载插件,安装语言包,显示中文。
再安装两个插件:open in browser、view in borwser,能够在编辑器中运行网页。

1.学习编辑器基本使用:(操作方面)

保存:ctrl+s
创建文件,创建文件夹
全选:ctrl+a
剪切:ctrl+x
复制:ctrl+c
粘贴:ctrl+v
撤销:ctrl+z 前进:ctrl+y
自动折行:文件->首选项->设置->搜索word->word
wrap->on
从头选中一行:shift+end
从尾部选中一行:shift+home
快速复制一行:shift+alt+↓
快速移动一行:alt+↑/↓
向后缩进:tab
向前缩进:tab+shift

练习

熟练使用vs code 基础操作

第四集 续上集

2.多光标操作:

点一下光标,按一下alt键,(控制多光标移动)ctrl+D:选择相同元素的下一个

3.搜索图标:

文件多的时候使用方便

4.Chrome浏览器(谷歌浏览器):

市场份额最多,对代码支持最好。
安装方式

练习:

了解五大浏览器

第五集 深入了解网站开发

需要团队的配合,各个岗位不可缺失:

1.UI设计师:

给开发人员一个图片

2.web前端开发工程师(H5开发):

把设计稿转成代码、数据库里数据显示到页面、写html.css。
html:负责结构
css:负责样式(美化)
(F12开发工具挑出Chrome开发工具,可以把样式去掉(删除),(未经css的html))

3.web后端开发工程师:

把数据存储起来(例如把购物数据存储起来)

练习

了解前端另一项技:JavaScrip,与HTML、css之间的关系

第六集 web前端三大核心技术

1.html:

结构

2.css:

样式

3.JavaScript:

行为
(与用户交互。例如输入。。。后,自动显示多种选项)(做法:打开Chrome浏览器,选择设置,在设置中找到高级设置,内容项目,关闭JS,则网页不能交互)

4.操作方面

在part1创建文件,

中间加文字就可以输入到界面
,右键找运行。
ctrl+鼠标滚轮:就可以放大缩小文字
Ctrl+0:就可以回归初始大小。
写好结构就可以给他加样式,就是css的作用。
加颜色;斜体div{color:red;font-style:italic;},返回刷新就可以得到红色的文字、斜体的文字
(演示JS:加一个行为)

第七集 HTML基础结构与属性

超文本 标记 语言(HyperText Markup Language),标准通用语言下的一个应用。是网页制作必备的编程语言。

1.超文本:

文本内容+非文本内容(音频视频)

2.标记(标签):

<单词>
标记也叫标签:
<header><footer>
写法分成两种:
单标签<header>
双标签<header></header>

3.创建标签快捷键操作:

先写单词,然后按下tab键,就会自动完成标签创建。
会自动区分生成单标签或双标签
结构生成举例:<header>hello world</header>
标签是可以上下排列也可以组合嵌套

4.HTML5标签含义之元素周期表

标签属性:来修饰标签的,设置当前标签的一些功能
<标签 属性 =“值” 属性2=‘’值2‘’>(只要通过空格把它隔开就行)一个标签可以加很多个属性

练习

练习书写基本结构和属性

第八集 HTML初始代码

每一个html文件都需要添加初始代码,初始代码就是无论你些什么样的网页,这些代码都是要有的,这就是初始代码。(每个html文件都有的代码,因为要符合html文件的规范写法)

1.初始代码快捷创建方式:

!+Tab键

2.手写初始代码:基本结构:

<!DOCTYPE html>   文档声明:告诉浏览器这是一个html文件
<html lang="en">  html文件的最外层标签:包裹着所有html标签代码   lang-"en"表示是一个英文网站 lang-"zh-CN"表示是一个中文网站
<head><meta charset="UTF-8"> 元信息:是编写网页中的一些赋值信息  charset="UTF-8"国际编码,让网页不出现乱码的情况(或许可以添加多个meta的这种代码吧,但添加的内容不确定)<title>Document</title>设置网页的标题
</head>
<body>显示网页内容区域
</body>
</html>        

练习

手写初始代码和快速创建初始代码

第九集 HTML注释

注释的代码,只有在文件中看得到,但是浏览器显示不出来

1.写法:

 <!--注释内容-->

2.意义:

    1.把暂时不用的代码注释起来,方便以后使用2.提示当时代码的意义

3.快捷添加注释与删除注释:

  1. ctrl+/
  2. shift+alt+a

练习

手写注释和快捷键添加删除注释

第十集 HTML语义化

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

1.好处

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

2.具体操作:

网页标题,chrome,书签,点开显示书签栏,把拖到书签栏,就添加了一个书签,先显示出来,切到其他网页,再点击刚刚的书签,就显示提取相关的信息
常用标签的使用↓

第十一集 标题与段落

(在body中添加)

1.h标签:

用来表示网页内容区域的标题(区别)

2.p标签:

用来表示段落

  1. 标题 ——>双标签 :<h1></h1>...<h6></h6>
    在一个网页中,h1标题最重要,并且一个html文件中,只能存在一个h1,其他的可以出现多次。
    (h5.h6不经常使用)
    先创建初始结构:
<!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>        
  1. 一段一段的文字就用p标签,
    段落——>双标签:<p></p>,p标签内就是一独单一段的内容。
    查看原文件可以搜索
    右键检查就可以看到内容标签和结构

练习

做一个带有标题和段落的个人简介
个人简介页面
解:在初始代码的body中分行输入h标签和p标签即可
手写(熟能生巧)

第十二集 文本修饰标签

1.常见文本修饰标签

1.1 <strong>:表示强调,会对文本进行加粗

: 是一个双标签,写法:<strong></strong>

<!DOCTYPE html>  
<html lang="en">
<head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><p><strong>这是一段需要强调的文本</strong><em>这是一段需要强调的文本</em></p>    
</body>
</html>

点击右键运行,文本就加粗了。

1.2<em>:表示强调,会使文本斜体

strong、em 区别
  1. 写法和展示不同
  2. strong强调性更强,en更弱

1.3<sub><sup>:下标文本、上标文本(都是双标签)

下标:<sub></sub>
上标:<sup></sup>

例子
上标:数字的平方,勾股定理a 2 + b 2 = c 2
下标:水分子H 2o
<!DOCTYPE html>  
<html lang="en">
<head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><p>......</p><p>a <sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>   H<sub>2</sub>o</p>
</body>
</html>

写好刷新网页

1.4<del>、<ins>:删除文本、插入文本

(一般配合使用)
场景:

<!DOCTYPE html>  
<html lang="en">
<head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><p><strong>这是一段需要强调的文本</strong><em>这是一段需要强调的文本</em></p>   <p>促销:原价<del>300</del>,现价<ins>100</ins></p> 
</body>
</html>

展示效果:
展示效果

第十三集 图片标签与图片属性

1. <img>:图片(单标签)

: src
alt
title
width、height

<!DOCTYPE html>  
<html lang="en">
<head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><img src="http:。。。" alt="。。。"title="..."width="300"heigth="300">
</body>
</html>

2.<img>属性:

  1. src:引入图片的地址(查看图片地址,在新窗口中查看图片,把图片地址考一下,放到src当中(src附属的引号)保存,预览)
  2. alt:当图片出现问题的时候,可以显示一段友好的提示文字,提示图片的内容之类;如果图片没有问题,则该文字不会显示。
  3. title:提示信息(光标放到到图片上就会提示图片信息)
  4. widyh、height:控制图片大小(像素)(设置图片大小也可以用css)

3.Tip

(如果不在html中加上宽高,当网速很慢时,网页内容会移动,用户体验感很差。
调网速方法:chrome浏览器,Network选项,Online选项,选择网络)

练习

在文章中添加图片

第十四集 引入文件的地址途径

1.相对路径

(相对于某一个文件来进行引入的)
.在路径中表示当前路径
··在路径中表示上一级路径

例子

<!DOCTYPE html>  
<html lang="en">
<head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><img src="./dog.jpg" alt="">相对路径的引用方法
</body>
</html>

刷新

<!DOCTYPE html>  
<html lang="en">
<head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><img src="./img/dog.jpg">添加了当前文件所处文件夹img
</body>
</html>

刷新

<!DOCTYPE html>  
<html lang="en">
<head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><img src="./img/animal/dog.jpg">又加了一个同级的文件animal
</body>
</html>

刷新

<!DOCTYPE html>  
<html lang="en">
<head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><img src="../img/animal/dog.jpg">..就是跳到了外面的一层
</body>
</html>

2.绝对路径(暂时不用)

在任何一个html文件中都可以引用到。
绝对路径盘符可以不用写,系统自动找到。

第十五集 跳转链接

1.<a>标签(双标签)

重要属性:href 、 target

标签属性含义

1.1href属性:链接的地址

可以是文字链接,也可以是图片链接

<!DOCTYPE html>  
<html lang="en">
<head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><a href="http://www.baidu.com">访问百度</a>打开网页就会出现一个访问百度字样的链接
</body>
</html>

1.2target属性:可以改变链接打开的方式

默认情况下,在当前页面打开_self 新窗口打开_blank

<!DOCTYPE html>  
<html lang="en">
<head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><a href="http://www.baidu.com"target="_blank">访问百度</a>这样就会在顶部新出现一个网页,非常方便(新窗口打开)
</body>
</html>

2. <base>标签(单标签)

用来改变链接的默认行为的(让所有的链接跳转方式默认统一为一种方式)

<!DOCTYPE html>  
<html lang="en">
<head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><base target="-blank">这样就全部都默认以blank方式打开
</head>
<body><a href="http://www.baidu.com">
</body>
</html>

练习(重要)

练习
创建一个文件夹,链接的综合练习

第十六集 跳转锚点

利用a标签做到的。
在body里面:
#号<a href="#html(这个是对应id值举例)">HTML</a>

1.实现方案一

#号 + id属性<h2 id="html(id值举例)">HTML超文本标记语言</h2>

  • “#”后跟着的是要跳转到的标签身上的id值
  • 对应id值是自定义的

2.实现方案二

#号 + name属性<a name="html"></a>

  • 在你要跳的内容上再写一个a
  • 可以用这玩意做那个返回到顶部

练习

操作

第十七集 特殊符号

输入法无法输入的字符,注册商标符、版权符、解析不出多个空格。html提供了专门代码。
在这里插入图片描述
特殊字符:
&+字符
解决冲突,左右尖括号,添加多个空格
(可以查阅文献了解)
<!DOCTYPE html>  
<html lang="en">
<head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><p>&lt;html&gt;    展示出来的效果是一个html标签hello     world     网页中只能出现一个空格,解析出来是被忽略掉的空格hello&nbsp;&nbsp;world 这就是两个空格,复制几个就有几个空格</p>    
</body>
</html>

第十八集 无序列表

<ul>、<li>:列表的最外层容器、列表项
注:ui和li必须是组合出现的,它们之间是不能有其他标签的

1.列表标签

  1. 无序列表-><ui> <li> 符合嵌套规范
  • 之间不允许有其他标签
<!DOCTYPE html>  
<html lang="en">
<head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><ul> <li>第一项</li><li>第二项</li></ul>                  正确的写法
</body>
</html>

2.列表标签的type属性:

改变前面标记的样式(一般都是用css去控制)
<ul type="circle">这样写(只改变这一个标签)
改变样式查文档链接

练习(重要)

创建无序列表
一行例子:
<li><a herf="#"><strong>文本</strong></a></li>

第十九集 有序列表(不重要)

<ol>、<li>:列表的最外层容器、列表项
注:有序列表用的非常少,经常用的是无序列表,无序列表可以去替代有序列表。

第二十集 定义列表

1.三个标签:

<dl>:定义列表
<dt>:定义专业术语或名词
<dd>:对名词进行解释和描述

  • 列表项需要添加标题和对标题进行描述的内容时用定义列表
<!DOCTYPE html>  
<html lang="en">
<head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><dl><dt>HTML</dt><dd>超文本标记语言</dd>这两行样就产生列表的第一项,两行为一组       。。。<dl>
</body>
</html>

练习

创建定义列表

第二十一集 嵌套列表

列表之间可以互相嵌套形成多层级列表

1.例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul><li>辽宁省<ul><li>大连</li><li>沈阳</li><li>丹东</li></ul></li></ul></body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><dl><dt>美国</dt><dd>洛杉矶</dd><dd>芝加哥</dd></dl></body>
</html>

在这里插入图片描述

练习

在这里插入图片描述

第二十二集 表格标签

1.基本

<table>:表格的最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题
(要符合嵌套规范)

2.语义化标签:<tHead><tBody><tFood>

(tBody是可以出现多次的,但tHead、tFood只能出现一次 )

第二十三集表格属性

1.属性

border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式:left、center、right
valign:上下对齐方式:top、middle、bottom

练习

创建表格

第二十四集表单标签

1.<form>

表单的最外层容器

2.<input>

(单标签)标签用于搜索用户信息,根据不同的type属性值,展示不同的控件,如输入框、密码框、复选框。【单选框通过name变成一组】
在这里插入图片描述
常见范例

第二十五集表单标签

1.<textarea>:多行文本框

在这里插入图片描述
在这里插入图片描述

  • 通过改变行列改变大小
    cols(行)
    rows(列)

2.<select> <option>:下拉菜单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h2><select><option>北京</option><option>上海</option><option>深圳</option></select></h2>
</body>
</html>

在这里插入图片描述

在这里插入图片描述
2.加上“请选择”
在这里插入图片描述
在这里插入图片描述
禁止选择“请选择”:
在这里插入图片描述
在这里插入图片描述

3.加上size属性

在这里插入图片描述在这里插入图片描述
4.多选属性
在这里插入图片描述在这里插入图片描述

  • 与单选属性另一区别(使文件也可以多选)在这里插入图片描述

在这里插入图片描述

3.<label>:辅助表单

使选中范围更大:
在这里插入图片描述
添加了label标签就能使 点击文字也显示选中选项(能点击范围更大)
在这里插入图片描述

4.常见属性

  • checked、disabled、name、for…

练习(重要)

在这里插入图片描述

第二十六集表格表单组合

表格表单可以相互组合形成数据展示效果

在这里插入图片描述

第二十七集<div><span>

<div>(块)
全称division,“分割、分区”的意思,该标签用来划分一个区域1,相当于一块区域容器,可以容纳段落、标题、表格、图像等各种网页元素。html中的大多数标签都可以嵌套在该标签中,该标签中还可以嵌套多层该标签,用来将网页分成独立的、不同部分,用来实现网页的规划和布局。
<span>(内联 )
用来修饰文字的,div和span都是没有任何默认样式的,需要配合css。

未添加css:

在这里插入图片描述

添加了css:
在这里插入图片描述

第28集 css基础语法

1.格式

选择器{属性1:值1;属性2:值2}

  • 写在哪

在这里插入图片描述

  • 举例
  • 在这里插入图片描述

在这里插入图片描述

2.单位

  1. px(像素pixel)
    (横向的像素*纵向的像素=屏幕分辨率)

  2. %(百分比)
    表示一个相对单位,会跟他的父容器大小
    按照外容器大小的百分比来

  • 举例在这里插入图片描述

3.基本样式

width宽
heigth高
background-color背景颜色

4.针对以上注释

css中的div标签对应所有html中div标签
同理,span对应所有span标签
在这里插入图片描述

5.css注释

/*css注释内容*/

  1. 快捷键shift、alt+A(提供一组注释符)
  2. 快捷键ctrl+/(对当前行注释、对选择内容所在行注释)

第29集 内联样式与内部样式

css样式引入方式

1.内联(行内、行间)样式

  • 通过style属性
    (在html标签上添加style属性来实现的)
    在这里插入图片描述

2.内部样式[代码可以复用]

  • 通过style标签
    (在<style>标签内添加样式)
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/6d28aa09a9ec4a2a93da44d15d77f554.png
注:内部样式的优点,可以复用代码
例如:
在这里插入图片描述

第30集 外部样式

引入一个单独的css文件,文件的后缀名,name.css
有两种写法:
<link>标签(当前页面与一个外部资源的映射关系)

  • rel属性指定资源跟页面的关系
  • href属性资源的地址
    在这里插入图片描述
    (以下方式不建议使用)
    在这里插入图片描述

第31集 css中的颜色表示法

1.单词表示法(局限色种)

red、green

2.十六进制表示法

0123456789abcdef(共十六个)
#000000(最小)
在这里插入图片描述

#ffffff(最大)
在这里插入图片描述

3.RGB三原色表示法

(RGB红绿蓝)

  • 写法:rgb(255,255,255);(这个是白色)
  • 取值范围0~255

4.(提取网页中的颜色)

工具:1.FeHelper(Chrome Extension)
下载地址
(必须在网络环境下)
2.ps(photoshop)

练习

在这里插入图片描述

第32集 css背景样式(赶进度)

background-colour:背景颜色

background-image:背景图

url(背景地址)
默认:会水平垂直都铺满在这里插入图片描述

background-repeat:背景图片的平铺方式

repeat-x在这里插入图片描述

repeat-y在这里插入图片描述

repeat(x,y都进行平铺,默认值)
no-repeat:都不平铺

background-position:背景图片的位置

x y在这里插入图片描述
在这里插入图片描述
x y:number 单词
x:left.center.right
y:top.center.bottom

在这里插入图片描述
在这里插入图片描述

background-attachment:背景图随滚动条的移动方式

  1. scroll:默认值(背景位置按照当前元素偏移)在这里插入图片描述
    背景图跟随容器移动。

  2. fixed:(背景位置按照浏览器偏移)
    在这里插入图片描述
    背景图不跟随容器移动

第33集练习

利用滚动条移动方式实现网页视觉差
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

第34集 css边框样式

border-style:边框样式
solid:实线
dashed:虚线
dotted:点线
border-width:边框大小
px···
border-color:边框颜色
red #f00···

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

  • 针对某一条边单独设置
    border-left-style:中间是方向left、right、top、bottom

在这里插入图片描述
在这里插入图片描述

第35集练习

利用边框实现三角形
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

第36集 css文字样式

1.font-family:字体类型

: 英文字体:Arial,‘Times New Roman’
中文字体:微软雅黑,宋体
在这里插入图片描述

在这里插入图片描述

2.中文字体的英文名称

: 微软雅黑:‘Microsoft YaHei’
宋体:SimSun

在这里插入图片描述

3.衬线体与非衬线体

在这里插入图片描述
有菱角和比较平滑的区别

注意事项
设置多字体方式
引号的问题

第37集

1.fond-size:字体大小

默认大小 : 16px
写法:number(px) 单词(small larger···不推荐使用)

在这里插入图片描述
注:字体大小一般为偶数

2.fond-weigth:字体粗细

两种模式
正常(normal) 加粗(bold)
写法
单词(normal、bold)number(100 200···900,100到500都是正常的,600到900都是加粗的)

在这里插入图片描述
在这里插入图片描述

3.fond-style:字体样式

模式:正常(normal)斜体(italic)
写法:单词(normal、italic)
注:oblique也是斜体,用的比较少

区别:带有属性倾斜字体才能.没有倾斜属性字体也能
可以设置倾斜操作

4.color:字体颜色

在这里插入图片描述

练习

通过文字修饰完成个人简历
在这里插入图片描述

第38集 css段落样式

1,text-decoration:文本装饰

下划线:underline
删除线:line-through
上划线 :overline
不添加任何装饰:none

注:可以添加多个文本修饰:

2.text-transform:文本大小写(针对英文段落)

em单位:相对单位,1em永远都是跟字体大小相同
在这里插入图片描述

(则2em代表36px)

4.text-align:文本对齐方式

对齐方式
left
right
center
justify(两端点对齐)

第40集

5.line-height:定义行高

在这里插入图片描述

  • 什么是行高:一行文字的高度,上边距和下边距是等价关系
  • 默认行高并不是固定值,是变化的,根据当前字体大小变化。
    p{ line-heigth: 40px;}
  • 取值:1.number(px) scale(比例值,跟文字大小成比例)
    -

第41集

6.letter-spacing:定义字间距

在这里插入图片描述

7.word-spacing:定义词间距(针对英文)

在这里插入图片描述
在中文中没有此效果

8.强制折行:(针对英文)

  1. word-break:break-all;(非常强烈的折行)
  2. word-wrap:break-word;(不是那么强烈)(会产生一些折行问题)
  • 为了防止英文和数字溢出
    在这里插入图片描述

第42集(综合针对练习)(重要)

第43集 css复合样式

一个css属性只控制一种样式,叫做单一样式。
一个css属性控制多种样式,叫做复合样式。

复合样式(复合的写法是通过空格实现的)(复合写法有的不需要关心顺序,例如1.2.有的需要关心样式,例如3.)
1.background:red url() repeat 0 0{背景颜色,背景图片,平铺方式,位置。。。}
在这里插入图片描述
可以节省很多代码量

2.border:1px red solid(边框 的大小、颜色、样式)
3.font:weigth style size family(注:最少要有两个值 size family{字体 大小、类型})在这里插入图片描述

在这里插入图片描述
font中不可以掉换位置

  • 单一样式复合样式尽量不要混写
  • 如果非要混写,那么一定要先写复合样式在写单一样式,这样样式才不会被覆盖掉。
( 复合写法)
在这里插入图片描述

第44集 css选择器

1.ID选择器

  • css:#elem{}
  • html:id=“elem”

在这里插入图片描述
在这里插入图片描述
一旦写了id,上面就要用#组成cp

: 1.在一个页面中,ID值是唯一的(在一个页面中,只能出现一次,否则不符合规范 )
2.命名规范,由字母_-数字组成(命名的第一位不能是数字)
错误示范

  1. 命名方式,驼峰式、下划线式、短线式
  • 快捷创建:div#xiaoming1+Tab键
    在这里插入图片描述

第45集

2.CLASS选择器

  • css:.elem{}
  • html : class = “elem”

在这里插入图片描述
在这里插入图片描述

1.class选择器是可以复用的(和id选择器的区别)
在这里插入图片描述
在这里插入图片描述

2.可以添加多个class样式
在这里插入图片描述
在这里插入图片描述

3.多个样式的时候,样式的优先级根据css决定,而不是class属性中的顺序

4.标签+类的写法
在这里插入图片描述
这就会对标签进行选择

小技巧(检查样式是否生效)

打开Chrome控制台,style选项,勾勾

  • 错误也会报错

http://chatgpt.dhexx.cn/article/j9x3x0pF.shtml

相关文章

应用服务器语言,web服务器 语言

C语言进行CGI程序设计 也就是CGI程序接受Web浏览器发送给Web服务器的信息,进行处理,将响应结果再回送给Web服务器及Web浏览器。CGI程序一般完成Web网页中表单(Form)数据的处理、数据库查询和实现与传统应用系统的集成等工作。CGI程序可以用... 文章 技术让梦想更伟大-李肖遥 20…

web前端从入门到精通

web前端从入门到精通 HTMLCSS系列一、拨云见日如何创建.html文件--网页1.安装插件2.编辑器基本使用3.Chrome浏览器 &#xff08;市场份额最大&#xff09;4.深入了解网站开发5.web三大核心技术6.HTML基础结构与属性7.HTML初始代码8.HTML注释9.HTML语义化10.标题(h)与段落(p )11…

html5游戏视频UI框架,推荐几个精致的web UI框架

Aliceui是支付宝的样式解决方案&#xff0c;是一套精选的基于 spm 生态圈的样式模块集合&#xff0c;是 Arale 的子集&#xff0c;也是一套模块化的样式命名和组织规范&#xff0c;是写 CSS 的更好方式。 2.Amazeui Amaze UI 是一个轻量级、 Mobile first 的前端框架, 基于开源…

【蓝桥杯Web】2022年第十三届蓝桥杯Web大学组省赛真题解析(完整版)

&#x1f9d1;‍&#x1f4bc; 个人简介&#xff1a;一个不甘平庸的平凡人&#x1f36c; &#x1f5a5;️ Nodejs专栏&#xff1a;Node.js从入门到精通 &#x1f5a5;️ TS知识总结&#xff1a;十万字TS知识点总结 &#x1f449; 你的一键三连是我更新的最大动力❤️&#xff0…

万字详述 Web3 彻底颠覆品牌行业的底层叙事

序言 尽管 Web3 品牌是一个被普遍看好的方向&#xff0c;但目前缺乏一个从底层逻辑上完全不同于 Web2 的叙事逻辑&#xff0c;Web3 品牌在当前现状更多以营销策略的方式进行尝试&#xff0c;但是由于缺乏一个根本性的叙事&#xff0c;无法支撑品牌方真正的认可并将其上升到战略…

Web3 时代 传统品牌如何玩转 NFT 营销?

给你「老板看得懂&#xff0c;客户能买单」的 NFT 营销方案。 最近看了很多讲 Web3 怎么助力品牌营销的长文&#xff0c;收获颇丰。但分享给还在一线做品牌的小伙伴&#xff0c;收到的反馈却是&#xff1a;还是看不懂&#xff0c;你就直接告诉我咋搞&#xff0c;怎么搞&#x…

小程序 腾讯兔小巢 对接

小程序接第三方兔小巢 很久没有写生活记录了&#xff0c;今天写一篇关于小程序对接第三方兔小巢插件提示&#xff1a;记录美好时刻&#xff0c;把生活写成诗&#xff1b;有你的生活中&#xff0c;那必定是阳光明媚&#xff1b; 文章目录 小程序接第三方兔小巢前言一、什么是兔…

仿写“跳一跳”微信小游戏

课程简介 2017-12-28 下午&#xff0c;微信发布最新版本&#xff0c;蓄势已久的“微信小游戏”终于来了。在 2018 微信公开课 Pro 上&#xff0c;微信游戏产品总监孙春光指出&#xff0c;小游戏的累计用户达到了 3.1 亿&#xff08;微信日活超过 9 亿&#xff09;。 孙春光表…

linux截图快捷键

PrtSc – 获取整个屏幕的截图并保存到 Pictures 目录。 Shift PrtSc – 获取屏幕的某个区域截图并保存到 Pictures 目录。 Alt PrtSc –获取当前窗口的截图并保存到 Pictures 目录。 Ctrl PrtSc – 获取整个屏幕的截图并存放到剪贴板。 Shift Ctrl PrtSc – 获取屏幕的某个…

linux截图工具

step1: 添加flameshot sudo apt-get install flameshot step1: 设置快捷键

[flameshot]一款超级好用的linux截图软件

一、下载 下载地址&#xff1a;https://github.com/flameshot-org/flameshot/releases 选择自己的版本下载&#xff0c;然后安装。 sudo dppkg -i flameshot-0.10.2-1.ubuntu-18.04.amd64.deb注意事项&#xff1a;尽量不要用sudo apt install flameshot&#xff0c;命令行安…

如何在LINUX系统下截图和编辑

如何在LINUX系统下截图和编辑 在 Linux 中截图的默认方式在 Linux 中使用 Flameshot 获取屏幕截图并编辑在 Linux 中使用 Shutter 获取屏幕截图并编辑在 Linux 中使用 GIMP 获取屏幕截图在 Linux 中使用命令行工具获取屏幕截图 在 Linux 中截图的默认方式 如果只需要获取一张屏…

linux下命令行截图

在linux下如果要想截图&#xff0c;有很多种方法&#xff0c;例如KDE里面的KSnapshot&#xff0c;GNOME里面的gnome-screenshot等&#xff0c;在这里我推荐在命令行上很好的截图工具scrot. ubuntu和debian系统可用apt命令安装&#xff1a; $ sudo apt install scrot下图中可以…

Linux截图工具安装

简介&#xff1a; Flameshot 是一款功能强大但易于使用的屏幕截图软件&#xff0c;中文名称火焰截图。 Flameshot 自带一系列非常好的功能&#xff0c;例如&#xff1a; 可以进行手写 可以划直线 可以画长方形或者圆形框 可以进行长方形区域选择 可以画箭头 可以对要点进行标…

Linux下的截图操作

Linux系统快捷键 PrtSc – 获取整个屏幕的截图并保存到 Pictures 目录。Shift PrtSc – 获取屏幕的某个区域截图并保存到 Pictures 目录。Alt PrtSc –获取当前窗口的截图并保存到 Pictures 目录。Ctrl PrtSc –获取整个屏幕的截图并存放到剪贴板。Shift Ctrl PrtSc – 获…

Linux截图和屏幕视频录制软工具Kazam使用攻略

转载&#xff1a;https://www.jianshu.com/p/e1f6177dba3a Linux截图和屏幕视频录制软件Kazam Conca_ 关注 一、安装 Ubuntu下安装Kazam $ sudo apt-get install kazam或者使用ppa安装 $ sudo add-apt-repository ppa:kazam-team/stable-series $ sudo apt-get update $ sudo a…

linux 系统截图命令,linux系统下的截图工具的使用

关于截图的工具的一个使用&#xff0c;我们在Windows中操作也算是非常的熟练的&#xff0c;也许你会经常使用到的工具是QQ截图&#xff0c;又或者是第三方的一些截图软件进行截图&#xff0c;一般在我们的键盘上都有一个printscreensysrq就可以截取屏幕&#xff0c;让后再用工具…

Linux安装截图工具(Ubuntu18.04+火焰截图)

在Ubuntu下&#xff0c;系统自带的截图工具虽说很好用&#xff0c;但是多少不太方便&#xff0c;所以打算装个第三方的截图软件来用&#xff0c;找了一下找到了火焰截图&#xff0c;下面记录一下安装过程 软件官网&#xff1a;Flameshot | Open Source Screenshot Software 软…

linux系统怎么电脑截图,linux怎么截图

电脑操作系统中一般都有自带截图快捷键&#xff0c;而很多软件业有截图的功能&#xff0c;那么Linux操作系统要如何截图呢? 在linux系统上怎么截图&#xff1a; (推荐学习&#xff1a;linux运维) 键盘上的截图键还可以用&#xff0c;不过那是截取一整个屏幕的&#xff0c;想要…

linux下截屏工具

如果linux安装了gnome&#xff0c;那么系统自带了一款截屏软件 gnome-screenshot,使用起来很方便&#xff0c;功能齐备&#xff0c;支持命令行。简单介绍如下。 功能对屏幕&#xff0c;窗口&#xff0c;或自定义的区域进行截图。 选项-w 抓取当前活动窗口-a …