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之拨云见日
- HTML:
- CSS:
- 切图流程
- PC企业站布局
- PC游戏站布局
2.HTML+CSS系列教程2之溯本求源
- 扩展HTML
- 扩展css
- HTML5新语法
- 兼容与hack
3.HTML+CSS系列教程3之风声水起
- 弹性布局
- 网格布局
- 移动端布局
- 响应式布局 Bootstrap
4.HTML+CSS系列教程4之巧夺天工
- 预编译css
- postcss
- css架构
- 高级功能
- 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.快捷添加注释与删除注释:
- ctrl+/
- shift+alt+a
练习
手写注释和快捷键添加删除注释
第十集 HTML语义化
指的是,根据网页中内容的结构,选择合适的HTML标签进行编写。
1.好处
- 在没有css的情况下,页面也能呈现出很好的内容结构。
- 有利于SEO,让搜索引擎爬虫更好的理解网页。
- 方便其他设备解析(如屏幕阅读器、盲人阅读器)
- 便于团队开发和维护
2.具体操作:
网页标题,chrome,书签,点开显示书签栏,把他拖到书签栏,就添加了一个书签,先显示出来,切到其他网页,再点击刚刚的书签,就显示提取相关的信息
常用标签的使用↓
第十一集 标题与段落
(在body中添加)
1.h标签:
用来表示网页内容区域的标题(区别)
2.p标签:
用来表示段落
- 标题 ——>双标签 :
<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>
- 一段一段的文字就用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 区别
-
- 写法和展示不同
- 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>
属性:
- src:引入图片的地址(查看图片地址,在新窗口中查看图片,把图片地址考一下,放到src当中(src附属的引号)保存,预览)
- alt:当图片出现问题的时候,可以显示一段友好的提示文字,提示图片的内容之类;如果图片没有问题,则该文字不会显示。
- title:提示信息(光标放到到图片上就会提示图片信息)
- 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><html> 展示出来的效果是一个html标签hello world 网页中只能出现一个空格,解析出来是被忽略掉的空格hello world 这就是两个空格,复制几个就有几个空格</p>
</body>
</html>
第十八集 无序列表
- 注:ui和li必须是组合出现的,它们之间是不能有其他标签的
<ul>、<li>
:列表的最外层容器、列表项 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>
- 全称division,“分割、分区”的意思,该标签用来划分一个区域1,相当于一块区域容器,可以容纳段落、标题、表格、图像等各种网页元素。html中的大多数标签都可以嵌套在该标签中,该标签中还可以嵌套多层该标签,用来将网页分成独立的、不同部分,用来实现网页的规划和布局。
- 用来修饰文字的,div和span都是没有任何默认样式的,需要配合css。
<div>
(块) <span>
(内联 ) 未添加css:
添加了css:
第28集 css基础语法
1.格式
选择器{属性1:值1;属性2:值2}
- 写在哪
- 举例
2.单位
-
px(像素pixel)
(横向的像素*纵向的像素=屏幕分辨率) -
%(百分比)
表示一个相对单位,会跟他的父容器大小
按照外容器大小的百分比来
- 举例
3.基本样式
width宽
heigth高
background-color背景颜色
4.针对以上注释
css中的div标签对应所有html中div标签
同理,span对应所有span标签
5.css注释
/*css注释内容*/
- 快捷键shift、alt+A(提供一组注释符)
- 快捷键ctrl+/(对当前行注释、对选择内容所在行注释)
第29集 内联样式与内部样式
css样式引入方式
1.内联(行内、行间)样式
- 通过style属性
(在html标签上添加style属性来实现的)
2.内部样式[代码可以复用]
- 通过style标签
(在<style>
标签内添加样式)

- 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:背景图随滚动条的移动方式
-
scroll:默认值(背景位置按照当前元素偏移)
背景图跟随容器移动。 -
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.强制折行:(针对英文)
- word-break:break-all;(非常强烈的折行)
- 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.命名规范,由字母_-数字组成(命名的第一位不能是数字)
- 命名方式,驼峰式、下划线式、短线式
- 快捷创建:div#xiaoming1+Tab键
第45集 续
2.CLASS选择器
- css:.elem{}
- html : class = “elem”
- 注
- 1.class选择器是可以复用的(和id选择器的区别)
2.可以添加多个class样式
3.多个样式的时候,样式的优先级根据css决定,而不是class属性中的顺序
4.标签+类的写法
这就会对标签进行选择
小技巧(检查样式是否生效)
打开Chrome控制台,style选项,勾勾
- 错误也会报错