双创笔记
02
HTML CSS 是做网站的编程语言
浏览器解析代码后成为看到的网站，鼠标右键可查看网页源代码
一个网站是由多个网页组成，每一个网页一个.HTML文件
创建.HTML 文件：(新建文本文档.TXT) 重命名为demo.html
双击在浏览器中打开查看效果
03
宇宙第一编辑器VS CODE
VS CODE ，全称Visual Studio Code 来自微软，是一个开源的、基于Electron的轻量代码编辑器。https://code.visualstudio.com
改中文:左侧最后一个扩展，搜索chinese安装。安装open in browser view in browser
ctrl+s:保存
ctrl+a:全选
ctrl+x,ctrl+c,==ctrl+v ==:剪切，复制，粘贴
ctrl+z,ctrl+y:撤销，前进
shift+end:从头选中一行
shift+home:从尾部选中一行
shift+alt+下箭头：快速复制一行
alt+上箭头或下箭头：快速移动一行
tab:向后缩进
tab+shift:向前缩进
04
多光标：alt+鼠标左键
ctrl+d:选择相同元素的下一个
05
深入了解网站开发
UI设计师
web前端开发工程师（hs开发）
设计稿》》》代码 数据》》》显示到页面
html+css
html:结构 css:样式
web后端开发工程师
06
web前端的三大核心技术
HTML：结构
CSS：样式
JAVASCRIPT：行为
祛Java：
1：打开谷歌浏览器
2：点击设置
3：设置中找到高级，高级中找到内容设置，里面有一个Javascript
07
HTML基础结构与属性
超文本标记语言（hyper text markup laguage)，
语言：编程语言
超文本：文本内容+非文本内容（图片，视频，音频）
标记也叫标签：
写法分成两种
单标签
双标签
创建标签的快捷键：单词+tab>
标签可以上下排列，也可以组合嵌套
常见html标签：
标签的属性：来修饰标签的，设置当前标签的一下些功能。
<标签 属性=“值” 属性2=“值2”>
08
HTML初始代码：每个.html文件都有的代码
！+tab快捷键
文档声明：告诉浏览器这是一个html文件 html 文件的最外层标签:包裹所有html的标签代码 lang="en"表示一个英文的网站 lang="zh-CN"表示一个中文的网站 <head>
<meta charset="UTF-8"> 元信息：是编写网页中的一些赋值信息
<title>Document</title> 设置网页的标签
</head>
<body>
显示网页内容
</body>
写法： 在浏览器中看不到，只能在代码中看到注释中的内容。
意义：
1把现在暂时用不到的代码注释起来，方便以后使用。
2对开发人员进行提示。
快捷添加注释与删除注释
1.ctrl+/
2shift+alt+a
10
HTML语义化
所谓HTML语义化指的是，根据网页中内容的结构，选择合适的HTML标签进行编写。
好处：
1.在没有CSS的情况下，页面也能呈现出很好的内容结构。
2.有利于SEO，让搜索引擎爬虫更好的理解网站。
3.方便其他设备解析（如屏幕阅读器，盲人阅读器等）。
4.便于团队的开发与维护。
11
标题与段落
标题》》》双标签：
h1标题最重要，只能出现一个
12
强调 ：双标签，会对文本进行加粗
<em>：会对文本进行斜体
下标： H2O
上标： A^2
…:删除文本，插入文本
13
图片标签：img->单标签<img scr=" “alt=” “>
scr：引入图片的地址
alt：当图片出现问题时，可显示一段友好的文字。
title：提示信息
wide.height：图片大小
14
引入文件的地址路路径
1相对路径
.在路径中表示当前路径
…在路径中表示上一级路径
2绝对路径
15
链接跳转
标签：a->双标签
href属性：链接的地址
target属性：可以改变链接打开的方式，默认情况下：在当前页面打开-self 新窗口打开-blank
标签：改变默认行 ## 16 跳转锚点实现1
#号+id属性
实现2
#号+name属性
17特殊符号
无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码
18无序列表
<ul>.<li>：列表的最外层容器，列表项
ul和li必须是组合出现的，他们之间不能有其他标签的
type属性：改变前面标记的样式（一般都是CSS去控制)
19有序列表
<ol>,<li>：列表的最外层容器，列表项
有序用的少，经常用无序，无序列表可代替有序列表
20定义列表
<dl>：定义列表
<dt>：定义专业术语或名词
<dd>：对 名词进行解释和描述
列表项需要添加标题和对标题进行描述的内容
输出如下图：
第二次作业
21嵌套列表
列表之间可以互相嵌套形成多层列表
无序嵌套
<ul>
<li>
辽宁省
<ul>
<li>沈阳</li>
<li>大连</li>
<li>丹东</li>
</ul>
</li>
<li>
山东省
<ul>
<li>济南</li>
<li> 青岛</li>
<li>烟台</li>
</ul>
</li>
</u1>
输出如下图：
定义列表嵌套
22表格标签
- table :表格的最外层容器
- tr :定义表格行
- th :定义表头
- td :定义表格单元
- caption :定义表格标题
<body>
<table>
<capt ion>天气预报{/ caption)
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
<tr>
<td> 2019年1月1日</td>
<td><img src=" ./img/tianqi 1.png" alt=""></td>
<td>天气晴朗，适合出行</td>
</tr>
<tr>
<td>2019年1月2日</td>
<td><img src=" ./img/tianqi 2.png" alt=""></td>
<td>有小雨，出门请带伞</td>
</tr>
</table>
</body>
输出如下：
语义化标签：<tHead>,<tBody>,<tFood>
尽量规范
注意：在一个table中，tBody,是可以出现多次的，但另外两个只能出现一次
23表格属性
- border :表格边框
- cellpadding :单元格内的空间
- cellspacing :单元格之间的空间
- rowspan :合并行
- colspan :合并列
- align :左右对齐方式
- valign :上下对齐方式
默认情况下表格是没有边框的
border加到table后面
- 输出如下：
<table border="1">边框为一
则
- 如下：
<table border="1" cellpadding="30">
则
- 如下
<table border="1" cellpadding="30" cellspacing="30">
则：
- 合并第一行两列：
<tr>
<th colspan="2"> 日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr>
<td> 2019年1月1日</td>
<td>白天</td>
<td><img src="./ img/tianqi 1.png" alt=""></td>
<td>天气晴朗，适合出行</td>
</tr>
<th colspan="2">日期</th>
主要是这行
表示下面两行等于上面一行
同理
如果输入：
<td rowspan="2"></td>
则
- align:left,center,right
- valign:top,middle,bottom
<tr align="right">
24表单标签
- form :表单的最外层容器
- input :标签用于搜集用户信息,根据不同的type属性值,展示不同的控件，
如输入框、密码框、复选框等。
表单没有太多规范
input(单标签）标签有一个type属性，决定是什么控件。
<body>
<form action="http:/ /www . baidu. com">
<h2>输入框: </h2>
<input type="text" >
<h2>密码框: </h2>
<input type=" pas sword">
<h2>复选框</h2>
<input type="checkbox">苹果
<input type=" checkbox">香蕉
<input type=" checkbox">葡萄
<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" >
/formp
</body>
[^下图是上图代码输出的结果]
注意
- 像ckecked是锁定选项
- disabled是无法选择
例如:
<h2>复选框</h2>
<input type="checkbox">苹果
<input type=" checkbox">香蕉
<input type=" disabled">葡萄
如果输入如下：
<h2>输入框: </h2>
<input type="text" pl aceholder="请输入用户名">
<h2>密码框: </h2>
<input type="password" placeholder=" 请输入密码">
则placehoder会出现如下效果
25表单标签
1.多行文本框
输入如下
<textarea cols="30" rows="10"></textaera>
即为下图
2.下拉菜单
`<select>.<option>`
<select>
<option selected disabled>请选择</option>
<option>北京</option>
<option>_上海</option>
<opt ion>杭州</option>
</select>
注意：
- selected表示选定
- disabled表示该项不可选
xoption207 option
</select>
<select size="3">
<opt ion>北京</option>
<option>.上海</option>
<opt ion>杭州</option>
</select>
size表示可选的多少：可选三个
<select multiple>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
multiple表示可多选
<label>
辅助表单
这样就算点击字也可以切换，可选范围变大
26表格表单组合
表格表单之间可以互相组合
表格有嵌套规范，但是表单没有
27div与span
- 1.div (块) :
div全称为division,“ 分割、分区”的意思，div标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在div标签中，div中还可以嵌套多层div,用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。 - 2.span (内联) :
用来修饰文字的，div 与span都是没有任何默认样式的，需要配合CSS才行。
div:做一个区域划分的块
span:对文字进行修饰的内联
28css基础语法
（px）是像素
利用上面的div对下面的div产生影响
- 格式:
选择器{属性1 :值1 ;属性2:值2 } - 单位:
px ->像素( pixel)、%->百分比 - 基本样式:
width、height. background-color
选择器{属性1：值1；属性2：值2；}
- wide:宽
- height:高
- background-color：背景颜色
- 长度单位：
1.px->像素
2%->百分比
29css样式的引入方式
- 1.内联样式：style属性
- 2.内部样式：style标签
内联(行内、行间)样式
在html标签上添加style属性来实现的
内部样式
在style标签内添加的样式
注:内部样式的优点，可以复用代码
内部样式可以复用，符合w3c的标准，让结构和样式分开处理。
<style>
div{ }
</style>
<body>
<div> </div>
<div> </div>
</body>
30外部样式
引入一个单独的css文件，name.css
1.通过link标签引入外部资源，
rel属性指定资源跟页面的关系
helf属性资源的地址
在外边单独写一个CSS文件通过link来引
2.@import这种方式也可以引入
注意：这种方式有很多问题，不建议使用。
31CSS中的颜色表示法
- 1.单词表示法
- 2.十六进制表示法
- 3.RGH三原色表示法（0-255）
格式如下：
div{background-color:rgh(0,0,0);}
ps可以提取颜色。
32CSS中的背景样式
-
background-color :背景颜色
-
background-image :背景图片
-
background-repeat :背景图片的平铺方式
-
background-position :背景图片的位置
-
background-attachment :背景图随滚动条的移动方式
-
1.background-image:
background-color背景色
background- image背景图
url(背景地址)
默认:会水平垂直都铺满背景图
background-repeat平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat(x，y都进行平铺，默认值)
no-repeat都不平铺 -
2.background-position
background- position :背景位置
x y: number(px、%)| 单词
x : left、center、 right
y : top、center、 bottom -
3.background-attachment
background- attachment :背景图随滚动条移动的方式
scroll:默认值(背景位置是按照当前元素进行偏移的)
fixed(背景位置是按照浏览器进行偏移的月
33视觉差
图片可动
<style>
#div1{ width: 1400px; height: 800px; background image:url( ./ img/1. jpg); background- attachment: fixed;}
#div2{ width: 1400px; height: 800px; background image:url( ./ img/2. jpg); background-attachment: fixed;}
#div3{ width: 1400px; height: 800px; background image :url( ./ img/3. jpg); background attachment: fixed;
</study>
此时图片不动
34CSS边框样式
- border-style :边框的样式
- border-width :边框的大小
- border-color :边框的颜色
注:针对某-条边进行单独设置
border-style:边框样式：
- solid:实线
- dashed：虚线
- dotted:点线
边框也可以针对某一边单独设置：例如body-left-style:中间是方向（left,right,top,bottom)
35练习：利用边框实现三角形
<style>
只是利用背景的障眼法。
也有透明颜色:transparent
例：
36CSS文字样式
默认：微软雅黑
font- family :字体类型
英文字体: Arial , ‘Times New Roman’
中文字体:微软雅黑，宋体
英文字体不能对中文起作用，但是中文字体可以对英文起作用。
中文字体的英文名称
微软雅黑: ‘Microsoft YaHei’
宋体: SimSun
大多数网站倾向于用非衬线体
多个字体类型的设置目的：一般会设置多个字体，防止出现计算机中没有字体。
例如：
什么情况下要加引号？当字体中出现空格时需要用引号引起来
37CSS文字样式（2）字体大小
注意：字体大小一般为偶数
font- weight :字体粗细
两种模式
写法
模式：正常（normal),加粗（bold)
写法：单词（nomal.bold)|number(100到500是正常，600到900是加粗）
font-style:字体样式
模式：正常（normal) 斜体（italic)
注意：oblique也表示斜体，用的少
区别：italic带属性的倾斜字体才可以设置倾斜操作
oblique没有倾斜属性的字体也可以设置倾斜操作
color 字体颜色
38CSS段落样式
1. text- decoration :文本装饰
2. text-transform :文本大小写
text-decoration:
- 下划线：underline
- 删除线:line-through
- 上划线：over-line
- 不添加任何：none
注意：添加多个多个文本修饰也可以
text-transform:文本大小写(针对英文）
- 小写：lowercase
- 大写：uppercase
- 只针对首字母：capitalize
39段落样式（2）
- text-indent :文本缩进
- 首行缩进
- em单位
p{ text-indent : 36px;font-size:18px;}
此处1em=18px
em：相对单位，1em永远都是跟字体大小相同
font-size:表示段络字体
混入英文可能导致对不齐
text-align :文本对齐方式
取值
对齐方式：left,right,center,justify(两端点对齐）
40CSS段落样式（3）
line-height：定义行高
- 默认行高：不是固定值，而是变化的，根据当前字体大小再不断变化
- 取值：1.number(px)|sxale(比例值，跟文字大小）
如下就是比例值样式：
p{line-height：2；}
41CSS段落样式（4）
- letter-spacing :定义字间距
- word-spacing :定义词间距( 针对英文)
字间距
行间距（针对英文段落）
强制折行: (针对英文)
- word-break : break- all; (非常强烈的折行)
- word-wrap : break word;(不是那么强烈的折行)
针对英文数字不会自动折行问题
这是不是那么强烈的折行
这是强烈的折行
43CSS复合样式
一个CSS属性只控制一种样式,叫做单一样式。
一个CSS属性控制多种样式,叫做复合样式。
- 复合样式
background
border
font
复合的写法，是通过空格的方式实现的。
复合写法不需要关心顺序，例如background border有的是需要关心顺序，例如font.
1.background:red url() repeat 0 0
2.border:1px red solid
3.font:（特殊）
注意：最少要有两个值size familye(不可以颠倒顺序）
注意：尽量不要混写，先写复合样式再写单一样式。
44CSS选择器
1.ID选择器
#elem{} id=“elem” (要加#）
- ID是唯一值，在一个页面中只能出现一次， 出现多次是不符 合规范的。
- 命名的规范，由字母、下划线、中划线、字母(并且第一个不能是数字)
- 驼峰写法: searchButton (小驼峰) SearchButton (大驼峰) searchSmall Button
短线写法: search- small- button
下划线写法: search_ small_ button
45CSS选择器（2)
2.CLASS选择器
- css: .elem{}
- html:class=“elem”
通过空格的方式添加多种
注:
- class选择器是可以复用的。
- 可以添加多个class样式。
- 多个样式的时候,样式的优先级根据CSS决定,而不是class属性中的顺序。
- 标签+类的写法
这是跟ID的区别
- 标签加类：
假设只想让p标签被选中，在box前加上p即可。
形成p.box
1130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
