1.HTML、CSS系列之导学
HTML
CSS
2.什么是HTML、CSS?
是做网站的编程语言。
浏览器把代码解析后的样子就是我们看到的网站,如何看到网站的原始代码呢?通过鼠标右键选择查看网页源代码
如何去写代码?写到哪里呢?
一个网站是由N多个网页组成的。 每一个网页 .html文件
如一部电视剧,40集。 .mp4文件
3.宇宙第一编辑器VSCode
VS code下载地址:https://code.visualstudio.com/
如何安装插件? 语言包、open in browser、view in browser
学习编辑器基本使用?
设置:文件->首选项->设置 (大小、是否换行 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 :向前缩进
多光标:alt + 鼠标左键
ctrl + d:选择相同元素的下一个
4.chrome浏览器
下载地址:https://www.google.cn/intl/zh-CN/chrome/
5.深入了解网站开发
UI设计师:设计稿
web前端开发工程师:(H5开发)
设计稿->代码
数据库里的数据->显示到页面
HTML + CSS
HTML:结构
CSS:样式
web后端开发工程师
6.web三大核心技术
HTML
CSS
JavaScript
HTML的一些基本内容
7.HTML基本结构和属性
HTML:超文本 标记 语言
超文本:文本内容+非文本内容(图片、视频、音频等)
标记:<单词>
语言:编程语言
8.HTML初始代码
每个.html文件都有的代码叫做初始代码,要符合html文件的规范写法。
!+tab键:快速创建html初始代码。
文档声明:告诉浏览器这是一个html文件 html文件的最外层标签 “lang”="en、zh-CN"表示是一个英文/中文网站 元信息:是编写网页中的一些赋值信息
9.HTML注释
写法:<–注释的内容–> 在浏览器中看不到,只能在代码中看到注释的内容。
意义:
1.把暂时不用的代码注释起来,方便以后使用。
2.对开发人员进行提示。
快捷添加与删除注释:
1.ctrl+/
2.shift+alt+a
10.HTML语义化
根据网页中内容的结构,选择合适的HTML标签进行编写
好处:
1.在没有CSS的情况下,页面也能呈现出很好的内容结构;
2.有利于SEO,让搜索引擎爬虫更好的理解网页;
3.方便其他设备解析(如屏幕阅读器、盲人阅读器等);
4.便于团队开发与维护。
11.标题与段落
标题 title 双标签:<h1></h1>...<h6></h6>
在一个网页中,h1标题最重要,并且一个.html文件中只能出现一次h1标签。
h5、h6标签在网页中不经常使用。
段落->双标签:<p></p>
12.文本修饰标签
强调->双标签:<strong></strong>、<em></em>
区别:
1.写法和展示效果有区别,一个加粗一个斜体。
2.strong的强调性稍强,em的强调性稍弱。
13.图片标签与图片属性
img->单标签
src:引入图片的地址。
alt:当图片出现问题的时候,可以显示一段友好的提示文字。
title:提示信息
width、height:图片的大小
![坤坤!](http//aiyou.niganma.com)
14.引入文件的地址路径
相对路径:. 在路径中表示当前路径
. . 在路径中表示上一级路径
绝对路径:C:\Users\Administrator\Desktop\千锋教育\img\en
15.跳转链接
a->双标签 <a></a>
href属性:连接的地址
target属性:可以改变链接打开的方式,默认情况下:在当前页面打开 _self 新窗口打开 _blank
base->单标签:作用就是改变链接的默认行为的。
16.跳转锚点
两种做法
1.#号+id属性
2.#号+name属性(注意name属性加给的是a标签)
17.特殊字符
1.&+字符
2.解决冲突啊 左右尖括号、添加多个空格的实现
3.<>
![一些特殊字符](https://img-blog.csdnimg.cn/d1c27faa4ae840789bb6454e471c5c1b.png)
18.无序列表
ul li 符合嵌套的规范 (ul中间不能插入其他标签如p)
type属性:改变前面标记的样式(一般用CSS控制)
19.有序列表
ol li 一般用的比较少,可以用无序列表来实现
20.定义列表
dl dt dd 列表项需要添加标题和对标题进行描述的内容
21.嵌套列表
列表之间可以互相嵌套形成多层级列表
示例:
<ul>
<li>
江苏省
<ul>
<li>南京市<>
<li>宿迁市<>
<li>盐城市<>
</ul>
<>
<li>
山东省
<>
</ul>
22.表格标签
< table > : 表格的最外层容器
< tr > : 定义表格行
< th > : 定义表头
< td > : 定义表格单元
< caption > : 定义表格标题
注:之间有嵌套关系,注意嵌套规范。
语义化标签:< tHead > < tBody > < tFood >
注:在一个< table >中,< tBody >可以出现多次,而< tHead > < tFood >只能出现一次
示例:
<body>
<table>
<caption>天气预报</caption>
<tHead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr>
<td>2022年10月22日</td>
<td>15°C阴</td>
<td>适宜室内运动</td>
</tr>
<tr>
<td>2022年10月23日</td>
<td>16°C阴</td>
<td>适宜室内运动</td>
</tr>
</tBody>
<tFood>
</tFood>
</table>
</body>
23.表格属性
border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式(left center right)
valign:上下对齐方式(top middle bottom)
24.表单input标签
< form > :表单最外层容器
< input > (单标签):标签用于搜集用户信息,根据不同type属性值,展示不同的控件,如输入框,密码框,复选框等,其type属性如下:
示例:
<form action="http://www.baidu.com">
<h2>输入框</h2>
<input type="text">
<h2>密码框</h2>
<input type="password">
<h2>复选框</h2>
<input type="checkbox" checked>苹果
<input type="checkbox" checked>香蕉
<input type="checkbox" disabled>葡萄
<h2>单选框</h2>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h2>上传文件</h2>
<input type="file">
<h2>提交和重置</h2>
<input type="submit">
<input type="reset">
</form>
25.表单相关标签
<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea><!--cols表示行,rows表示列-->
<h2>下拉菜单</h2>
<select><!--单选-->
<option selected disabled>请选择</option>
<option>北京</option>
<option>上海</option>
<option>南京</option>
<lect>
<select size="2"><!--显示多项-->
<option>北京</option>
<option>上海</option>
<option>南京</option>
<lect>
<select multiple><!--多选-->
<option>北京</option>
<option>上海</option>
<option>南京</option>
<lect>
<input type="file" multiple><!--文件多选-->
<input type="radio" name="gender" id="man"><label for="man">男</label><!--扩大选择范围提升用户体验-->
<input type="radio" name="gender" id="woman"><label for="woman">女</label>
26.表格表单组合实例
<form>
<table border="1" cellpadding="30">
<tbody>
<tr align="center">
<td rowspan="4">总体信息</td>
<td colspan="2">用户注册</td>
</tr>
<tr align="right">
<td>用户名:</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr align="right">
<td>密码:</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit">
<input type="reset">
</td>
</tr>
</tbody>
</table>
</form>
注:注意表格表单的嵌套关系
27.< div > 与 < span >
1.div(块):
div全称为division,"分割、分区"的意思,< div > 标签用来划分一个区域,相当于一块区域容器,可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在 < div > 标签中,< div > 中还可以嵌套多层 < div >,用来将网页分割成独立的、不同的部分,来实现网页的规划和布局。
2.span(内联) :
用来修饰文字的,div 与span都是没有任何默认样式的,需要配合CSS才行。
28.CSS语法格式
1.格式:
选择器{属性1:值1;属性2:值2}
2.单位:
px -> 像素(pixel)、% -> 百分比(相对单位,与其父容器对应)
3.基本样式:
width、height、background-color
4.CSS注释:
/* 注释内容 */
5.例子:
<head>
<style>
div{ width: 100px ; height: 25% ; background-color: aqua;}
span{ background-color: aquamarine;}
/* span{ background-color: bisque;} */
<yle>
</head>
<body>
<div>第一个块</div>
<div>第二个块</div>
<span>一个内联</span>
</body>
29内联样式与内部样式
1.内联(行内、行间)样式:
在html标签上添加style属性来实现
2.内部样式:
在style标签内添加的样式
注:内部样式的优点,可以复用代码
3.以上两者的区别:
内部样式的代码可以复用,符合W3C的规范标准,尽量让结构和样式分开处理
4.示例:
内联:
<body>
<div style=" width:100px; height:100px; background-color:aqua">第一个块</div>
<div style=" width:100px; height:150px; background-color:aquamarine">第一个块</div>
</body>
内部:
<head>
<style>
div{ width: 100px; height: 100px; background-color: aqua;}
<yle>
</head>
<body>
<div>第一个块</div>
<div>第二个块</div>
</body>
30.外部样式及两种写法
第一种写法:
引入一个单独的css文件,name.css
通过link标签引入外部资源,rel属性指定资源跟页面的关系,href属性是资源的地址
示例:
css文件:
div{ width: 100px; height: 100px; background-color: aqua;}
第二种写法:
@import
示例:
<head>
<style>
@import url('./common.css')
<yle>
</head>
<body>
<div>一个块</div>
</body>
注:这种方式存在许多问题,不建议使用
link与@import的区别
31.CSS颜色表示法
1.单词表示法:red、blue、green…
2.十六进制表示法:#000000(0 1 2 3…f)
3.RGB三原色表示法:RGB(255,255,255);
取值范围:(0~255)
4.取色方法:FE浏览器插件,PS
5.示例:
32.CSS背景样式
1.基本属性
- background-color 背景颜色
- background-image 背景图片
- url背景地址,默认水平垂直都铺满
- background-repeat 背景图片的平铺方式
- repeat-x x轴平铺
- repeat-y y轴平铺
- repeat(x,y) 默认x,y都进行平铺
- no-repeat 都不平铺
- background-position 背景位置
- x y:number|单词
- x:left、center、right
- y:top、center、bottom
- background-attachment 背景图随滚动条的移动方式
- scroll:默认值(背景位置是按照当前元素进行偏移的)
- fixed:背景位置是按照浏览器进行偏移的
示例:
<style>
body{height: 20000px;}
div{ width:1440px;height:800px;background-color: red;
background-image: url(./CSDN/pic/450e9bd96dcdb0f1.jpg);
background-repeat: no-repeat;
background-position: 50% 50% ;
background-attachment: fixed;
}
<yle>
33.背景实现视觉差效果
<head>
<style>
#div1{width: 1400px; height: 800px; background-image: url(./CSDN/pic/450e9bd96dcdb0f1.jpg);background-attachment: fixed;}
#div2{width: 1400px; height: 800px; background-image: url(./CSDN/pic/\(YEJ_4QF_98KXB~YXP7_BUF.png);background-attachment: fixed;}
#div3{width: 1400px; height: 800px; background-image: url(./CSDN/pic/pc0_1g05e36mr.jpg.q_70.jpg);background-attachment: fixed;}
<yle>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
34.CSS边框样式
border-style:边框的样式
solid:实线
dashed:虚线
dotted:点线
border-width:边框的大小
px…
border-color:边框的颜色
red #f00…
注:针对某一条边进行单独设置
border-left-style(中间是方向:left、right、top、bottom)
示例:
<style>
div{width:300px;height:300px;border-style:solid;border-color:red;border-width: 1px;}
div{width:300px;height:300px;
border-right-style:dotted;border-right-width:10px;border-right-color:red;
border-top-style:solid;border-top-width: 10px;border-top-color:green;}
<yle>
35.边框实现三角形
示例:
<style>
body{background-color: bisque;}
div{width: 0px; height: 0px;
border-top-color: transparent;
border-top-style:solid;
border-top-width:30px;
border-right-color: rgb(0, 255, 213);
border-right-style:solid;
border-right-width:30px;
border-bottom-color: transparent;
border-bottom-style:solid;
border-bottom-width:30px;
border-left-color: transparent;
border-left-style:solid;
border-left-width:30px;
}
<yle>
注:透明颜色 transparent
36.family字体类型
-
font-family:字体类型 英文:Arial、‘Times New Roman’ 中文:微软雅黑(‘Microsoft
YaHei’)、宋体(Simsun) -
示例:
<style> div{font-family: 宋体;} <yle> </head> <body> <div>一段文字</div> </body> ```
-
衬线体与非衬线体 从电脑中识别字体
注:1.设置多个字体时按顺序识别各字体,若第一种字体未识别则识别第二种,以此类推
2.若字体名中含空格则需添加引号
37.字体大小粗细样式
1.font-size:字体大小 默认大小:16px
2.写法:
注:字体大小一般是偶数(方便文字对齐)
3.font-weight:字体粗细
模式:正常(normal)、加粗(bold)
写法:单词(normal、bold)| number(100、200…900;100 ~ 500都是正常,600 ~ 900都是加粗)
4.font-style:字体样式
模式:正常(normal)、斜体(italic)
写法:单词(normal、italic)注:oblique也是斜体,使用较少
区别:1.italic 只有带有倾斜字体的才可以设置
2.oblique 没有倾斜属性的字体也可以设置倾斜
5.color:字体颜色
38.文本修饰与文本大小写
1.text-decoration:文本修饰(可添加多个) 下划线:underline 删除线:line-through
上划线:overline 不添加任何装饰:none
- text-transform:文本大小写(针对英文) 小写:lowercase 大写:uppercase
只针对首字母大写:capitalize
39.文本缩进与文本对齐
-
text-indent:文本缩进 首行缩进 em单位:相对单位,1em与字体大小相同 (主要针对中文)
-
text-align:文本对齐方式 对齐方式:center、left、right、justify(两端点对齐)
40.文本的行高
line-height:定义行高
定义:一行文字的高度,上边距和下边距的等价关系
默认:不固定,根据当前字体大小不断变化
取值:number(px)| scale(比例值,跟文字大小成比例)
41.文本间距与英文折行
letter-spacing:定义字间距
word-spacing:定义词间距(针对英文)
英文和数字强制折行(针对英文):
word-break:break-all;(强烈)
word-wrap:break-word;(不强烈,会产生一些空白区域)
42.文本与段落实现个人简介
无笔记。
43.CSS复合样式
1.一个CSS属性只控制一种样式:单一样式
一个CSS属性控制多种样式:复合样式
2.复合样式:
background
border
font
3.复合写法(通过空格实现,有的属性不用在意顺序,如background、border,有的需要,如font)
background:red url()repeat 0 0;
border:1px red solid;
font:weight style size family
style weight size family
weight style sizene-height family
(最少要有值 size 和 family)
注:单一样式与复合样式尽量不要混写,若非要混写,要先写复合样式再写单一样式,以避免样式被覆盖
44.ID选择器及注意事项
-
ID选择器 css:#elem{} html:id=“elem” 注:在一个页面中,ID值是唯一的;
-
命名规范:字母 _ - 数字(命名第一位不能是数字); 命名方式:驼峰式、下划线式、短线式;
驼峰写法:searchButton(小驼峰)| SearchButton(大驼峰)| searchSmallButton
短线写法:search-small-button 下划线写法:search_small_button
45.CLASS选择器及注意事项
CLASS选择器
css:.elem{}
html:class=“elem”
注:class选择器可以复用
可以添加多个class样式
多个样式的时候,样式的优先级根据CSS决定,而不是class属性中的顺序
标签+类的写法(如p.box)