Web前端笔记记录

Web前端笔记记录

  • 概念理解
    • 1、网站
    • 2、VS Code
    • 3、html
      • html的超文本性
      • html的语言性
      • html的标记性
        • 写法
    • 4、css
    • 5、Web前端的三大核心技术
    • 6、网站开发
  • 实操
    • 快捷键的使用
    • 在VS Code里可以进行的操作(功能)
      • 新建文件
      • 新建文件夹
      • 商店
      • 搜索
      • 网页调试
    • 网页的编写
      • html初始代码
      • html注释
      • html语义化
      • 标题与段落
      • 文本修饰标签
      • 图片标签
      • 链接标签
      • 跳转锚点
      • 特殊符号
      • 无序列表
      • 有序列表
      • 定义列表
      • 表格标签
      • 表格属性
      • 表单标签
      • div与span的“爱恨情仇”
      • CSS的基础语言
        • CSS样式引入的方式
      • CSS中的颜色表示法
      • CSS背景样式
        • backgrpund-image背景图片
        • background-repeat 背景平铺
        • background-position 背景位置
        • background-attachment:背景图随滚动条移动的方式
      • CSS边框样式
      • CSS文字样式
        • font-family
        • font-size:
        • font-weight
        • font-style
        • color
      • CSS的段落样式
        • text-decoration
        • text-transform
        • text-indent
        • text-align
        • line-height
        • 字间距
      • CSS复合样式
      • CSS选择器
        • ID选择器
        • CLASS选择器

概念理解

1、网站

网站是由n多个网页组成的,每一个网页都是一个html.文件

2、VS Code

VS Code来自微软,是一个开源的、基于Electron的轻量代码编辑器。

3、html

html是一种超文本标记语言,通过标记符号来标记要显示的网页中的各个部分,可以说明文字,图形,动画,声音,表格,链接等。
html常见标签:周期表

html的超文本性

可以分为文本内容和非文本内容(图片、视频、音频等)。

html的语言性

是种编程语言。

html的标记性

标记也称标签(可以上下排列也可以组合嵌套):
例如: ”< header >“”< footer >"

写法

第一种:单标签 ”< header>“
第二种:双标签”< header >< /header>“

4、css

CSS中文意思是“层叠样式表",它是一种标准的样式语言,主要作用是定义网页的样式(美化网页),对网页中元素的位置、字体、颜色、背景等属性进行精准控制。

5、Web前端的三大核心技术

html: 结构
CSS:样式
JavaScript:行为

6、网站开发

UI设计师:设计稿
Web前端开发工程师(H5开发)

设计稿—>代码
数据库里的数据—>显示到页面
HTML+CSS

实操

快捷键的使用

ctrl + m 静音
*ctrl + s 保存
ctrl + alt + a 截屏
ctrl + a 全选
ctrl + x 剪切
ctrl + c 复制
ctrl + alt + a 复制
ctrl + v 粘贴
ctrl + z 撤销
ctrl + y 前进
ctrl+d 选择相同元素的下一个
ctrl+/ 快速添加注释与删除注释

shift + home 从头选中一行
shift + end 从尾部选中一行
shift + alt +⬇ 快速复制一行
shift +alt +a 快速添加注释和删除注释
alt + a 复制
alt+左键 多光标

tab 向后缩进
tab + shift 向前缩进
tab + 输入的 创建标签(单双)

在VS Code里可以进行的操作(功能)

新建文件

请添加图片描述点击该按钮可以新建一个编写的文件

新建文件夹

请添加图片描述点击该按钮可以新建文件夹,点击文件及可以进行文件夹的重命名、删除等操作

商店

请添加图片描述在最左侧的工具栏中有此”商店“选项,可以在此寻觅自己需要的文件,小功能。

搜索

请添加图片描述在最左侧的工具栏有此”搜索“选项,可以在此输入一段字符(中、英…),可以帮助找出出现过该段字符的文件以及内容。

网页调试

可以在编写文件的同时,右键调出运行该文件下的网页。

网页的编写

html初始代码

每个.html文件都有的代码叫做初始代码,要符合html文件的规范写法。

                    /*文档声明:告诉浏览器这是个html文件
                   /*html文件的最外层标签:包裹着所有的html标签代码   lang=”en“表示这是一个英文网站   
	
		     /*元信息:是编写网页中的一些赋值信息  charest=”UTF-8“国际编码,让网页不出现乱码的情况。
		Document    /*设置网页标题
	
	
		                           /*显示网页内容的区域
	

html注释

写法:

< ! - - 注释内容 - - >

在浏览器中看不到,只能在代码中能看到注释

意义:
1、把暂时不用的代码注释起来,方便以后使用
2、对开发人员进行提示,方便后续人员理解

快捷添加注释与删除注释:
1、ctrl + /(my think is the best)
2、shift + alt + a

html语义化

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

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

标题与段落

标题 —>双标签 : < h1>< /h1>…< h6>< /h6>

在一个网页中,h1标题最重要(一级标题)并且一个.html文件中只能出现一次h1标签。
h5、h6标签在网页中不经常使用(h6是级别最小的标题,大小接近与正文)。

段落—> 双标签:< p>< /p>

文本修饰标签

强调—>双标签:
< strong> 加粗文本< /strong> 例如: 加粗
< em>斜体文本< em> 例如:斜体

区别:
1、写法和展示效果是有区别的,一个加粗,一个斜体
2、strong的强调性更强,em的强调性稍弱

< sub>(下标) —— < sup>(上标) 例如:H2O —— 52=25
< del>(删除文本)—< ins>(插入文本)例如: 我是搞笑男 —— 我爱学习

注:一般情况下,删除文本都是和插入文本配合使用的。

图片标签

img—>单标签

src:引入图片的地址(有相对地址和绝对地址之分)

相对地址:分为同级,父级,子级(自己瞎编的没有文献支持)
同级可以直接引用
例如:< img src=“./dog.jpg” alt=“”>
父级需要前缀加“.”,再一层一层的输入地址文件
例如< img src=“…/img/animal/dog.ipg” alt=“”>
子级需要再次添加地址
例如< img src=“/img/animal/dog.jpg” alt=“”>

alt:当图片出现问题的时候,可以显示一段友好的提示(如果图片地址损坏或者不存在,会显示破损图片的标签并显示alt里的内容)
title:提示信息
width、height :改变图片的大小

如果不加width和height,在网速很慢的情况下会出现图片出现之前一个样子,图片加载出以后又一个样子。
如果加了width和height,则不会出现这样的情况,显示的都是排版时的样子

链接标签

a—> 双标签 < a>< /a>
href属性:链接的地址
target属性:可以改变链接打开的方式,默认情况下是当前页面打开。
_self 当前页面打开
_blank 新窗口打开

base—>单标签:作用是改变链接的默认行为
例如< base target=“_blank”>放在< head>…< /head>语句中就可以实现全部链接标签都是先新窗口打开。

跳转锚点

1、“#”加id属性

< a href=“#html”>HTML< /a>
< h2 id=“html”>< /h2>
可以实现在前面点击“HTML”时跳入下面h2的地方

2、“#”加name属性

< a href=“#html”>HTML< /a>
< a name=“html”>< /a>(该语句放在需要跳到的地方)
该语句同样可以实现点击前面的“HTML”时跳到下一语句存放的下一行的位置。

特殊符号

编写一些文本时,经常会遇到输入法无法输入的字符,如®(注册商标),©(版权符)等,还有往一段文字中加入多个空格时,页面并不会解析出多个空格。这些无法输入和空格符都是特殊字符,还有解决<>的冲突,在HTML中,为这些特殊字符准备了专门的代码

空格—————& nbsp;
版权符号©——& copy;
注册商标®——& reg;
小于号<——& lt;
大于号>——& gt;
和号&——& amp;
人民币¥——& yen;
摄氏度°——& deg;

无序列表

< ul>:列表最外层容器
< li>:列表项

注:< ul>< li>必须是组合出现的,他们之间是不能有其他的标间的

  • 第一项
  • 第二项

成品展示

  • 第一项
  • 第二项

前面的"小黑点"是可以通过"type"属性来改变前面标记的样式(后期一般是通过CSS去控制)
可以查询type属性查询栏了解更多关于"小黑点"的"故事"

有序列表

< ol>列表的最外层容器
< li>列表的列表项

  1. 第一项
  2. 第二项
  3. 第三项

成品展示

  1. 第一项
  2. 第二项
  3. 第三项

注:有序列表列表用的非常少,经常用的是无序列表,无序列表可以去代替有序列表(后期可以通过CSS实现)

有序列表前的各种符号同样可以用"type"属性来改变,详情可通过type属性查询栏来了解更多的"故事"。

定义列表

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

 
HTML
超文本标记语言
CSS
层叠样式表
Javascript
网页脚本语言

成品展示

HTML
超文本标记语言
CSS
层叠样式表
Javascript
网页脚本语言
> 
    >
  • > 我是优降宁 >
      >
    • > 我爱py >
    • >
    >
  • >

成品展示

  • 我是优降宁
    • 我爱py

注:列表之间可以互相嵌套,形成多层级的列表。

表格标签

< table>:表格的最外层容器
< tr>:定义表格行
< th>:定义表头
< td>:定义单元格
< caption>:定义表格标题
语义化标签(没多大效果,主要是规范):< tHead>头,< tBody>身,< tFood>尾

注:表格标签之间是有嵌套关系的,要符合嵌套规范。

天气之子
日期 天气情况 出行情况
2022年1月1日 天气晴朗,适合出行
2022年1月2日 小雨 有小雨,出门请带伞

成品展示
Web前端笔记记录_第1张图片

表格属性

border ;表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式
valign:上下对齐方式

border(加在< table>之中< table border=“1”>)
Web前端笔记记录_第2张图片

cellpadding(加在< table>之中< table border=“1” cellpadding=“30”>)
Web前端笔记记录_第3张图片

cellspaceing(加在< table>之中,< table border=“1” cellpadding=“30” cellspacing=“30”>)
单元格与单元格之间的距离
Web前端笔记记录_第4张图片

colspan(加在所需合并的几列的< td>标签里< td colspan=“2”>…< /td>)
Web前端笔记记录_第5张图片

rowspan()

表单标签

< form>:表单的最外层容器
< input>(单标签):标签用于收集用户信息,根据不同的type属性值,展示不同的控件,
如输入框、密码框、复选框等。

text :普通的输入框
password:密码输入框
checkbox:复选框
radio:单选框
file:上传文件
submit:提交按钮
reset:重置按钮
常见属性还有checked,diasabled,name,for

输入框:

密码框:

复选框:

苹果 香蕉 葡萄

单选框:

男/*name值可以随便取,主要是radio之间的分组*/

成品展示:
Web前端笔记记录_第6张图片

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

多行文本框

下拉菜单

成品展示
Web前端笔记记录_第7张图片

限时制作(仿制)

总体信息 用户注册
用户名:
密码:

成品展示Web前端笔记记录_第8张图片

div与span的“爱恨情仇”

div:做一个区块的划分(图层或者划分领地范围)
span:对文字进行修饰,内联(样式)
div和span都是没有任何默认样式的,需要配合CSS才行

【千锋教育】html5-中国教数万程序员的选择-官方首页

优势:三师护航就业薪资:10k-20k培训方式:全程面授培训类型:IT培训 千峰-致力于互联网应用研发培训,中国程序员认可的培训机构;前锋开设web大前端,java,UI设计,PHP,HR,linuk,大数据,python,物联..

www.mobiletrain.org 2019-04- 评价 广告
/*分为上下两个区域块*/

html5_零基础如何学Html5_从小白到大神进阶

培训类型:Web前端特色:包吃包住价格:12期免息城市:319个分校 html5,中公优就业上市公司,免费试学5天,,不合适全额退款,先就业后付款,过万家合作名企,学员与保险公司签订就业保障协议,毕业..

www.ujiuye.cn 2019-04- 评价 广告

成品展示:
Web前端笔记记录_第9张图片

CSS的基础语言

格式:选择器(属性1:值一;属性2,值而…)
(长度) 单位:px—>像素(pixel)、%—>百分比
基本样式:width(宽)、height(高)、background-color(背景色)
CSS注释:/ * 巴拉巴拉 * /

举例:如下




	
	
	
	Document
	


	
big surprise

成品展示
请添加图片描述

CSS样式引入的方式

1、内联样式
style属性
2、内部样式
style标签(上述例子便是内部样式)

区别:内部样式的代码可以复用、复合W3C的规范标准,进行让结构和样式分开处理

3、外部样式
引入一个单独的CSS文件,name.CSS

通过link标签引入外部资源,rel属性指定资源跟页面的关系,href属性资源的地址。
详情可通过点击link的爱恨情仇来了解

通过@import方式引入外部样式(这种方式有很多问题,强烈不建议使用)

这玩意叫内联

成品展示
Web前端笔记记录_第10张图片

CSS中的颜色表示法

1、颜色表示法 ,such as:blue、yellow、red

可以参照CSS单词颜色表示法

2、十六进制表示法




	
	
	
	Document
	


	
aaaaaa

成品展示:
请添加图片描述

3、RGB三原色表示法:
表示法:RGB(255,255,255);
注:取值范围为0~255

提取颜色的方式:
1、下载提取颜色的软件,点击“颜色提取软件”下载使用(十六进制表示的)

小提示:使用软件的环境是真实的“网络”,存储在电脑中的照片无法提取颜色。

2、PS中的吸管工具同样可以实现颜色的提取(吸管提取之后可以在颜色板中查看)。

CSS背景样式

background-color:背景颜色
background-image:背景图片
background-repeat:背景图片的平铺方式
background-position:背景图片的位置
background-attachment:背景图随滚动条的移动方式

backgrpund-image背景图片




	
	
	
	Document
	


	
/*划分了一个区域*/

成品展示:
Web前端笔记记录_第11张图片

background-repeat 背景平铺

repeat-x / * x轴平铺 * /
Web前端笔记记录_第12张图片

repeat-y/ * y轴平铺 * /
Web前端笔记记录_第13张图片

repeat(x,y) / * 都进行平铺 * /
Web前端笔记记录_第14张图片

no-repeat /* 都不平铺*/
Web前端笔记记录_第15张图片

background-position 背景位置

x ,y:number(px、%)|单词
x:left、center、right
y:top、center、bottom

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

scroll:默认值(背景位置是按照当前元素进行偏移的)
fixed(背景位置是按照浏览器进行偏移的)

注:建议进行尝试,言语难以描述清楚,眼睛无法进行实践

CSS边框样式

border-style:边框的样式

solid:实线
dashed:虚线
dotted:点线

border-width:边框的大小
border-color:边框的颜色

注:边框也可以针对莫一条边进行单独设置:border-left-style:中间是方向 left、right、top、bottom

三角形的实现




	
	
	
	Document
	
	


成品展示
Web前端笔记记录_第16张图片

若需要特定的三角形则只需要将不需要的“三角形”的border-color属性值改成“transparent”(透明)即可。

CSS文字样式

font-family

font-family:文字类型

英文字体:Arial,‘Times New Roman’
中文字体:微软雅黑(‘Microsoft YaHei’),宋体(SimSun)

注:1、英文样式加在中文上是无效的,等价的是中文样式加在英文上是无效的
2、可以在电脑中的“控制面板”–>“字体”中查看电脑所带的字体类型
3、字体引用的引号:当字体名称中带有空格符号则需要加单引号才能使用




	
	
	
	Document
	


	This is a text ('Times New Roman')
	

This is a text(默认样式)

这是一段文字(宋体)

这是一段文字(默认样式)

样式对比
Web前端笔记记录_第17张图片

font-size:

font-size:字体大小,16px为默认大小
写法:number(px)|| 单词
xx-small——最小
x-small——较小
small——小
medium——正常(默认值)
large——大
x-large——较大
xx-large——最大

注:字体的大小一般为偶数

font-weight

font-weight:字体粗细
模式:正常(normal)& 加粗(bold)
写法:单词(normal、bold) | number(100 200 … 900 )

注:number写法中只显示两种模式,100 ~ 500是normal,600 ~ 900是bold

font-style

font-style:字体样式
模式:正常(normal) 斜体(italic)
写法:单词(normal、italic)

区别:
1、italic 带有倾斜属性的字体才可以设置倾斜操作
2、oblique没有倾斜属性的也可以进行倾斜操作 (oblique范围更广但是用的却很少,因为没有带有斜体属性的字体强加斜体属性"看起来"不规范,不好看——强扭的瓜不甜)

注:oblique也是表示斜体,用的比较少,一般了解即可

color

字体颜色,不多加解释

CSS的段落样式

text-decoration

text-decoration:文本装饰
下划线:underline
上划线:overline
删除线:line-through
不加任何装饰:none

注:可以添加多个文本装饰
写法如下:
< style> div{ text-decoration:underline overline line-through }< /style>(中间用空格隔开,不一定是< div>里加,看需要的是在哪个“区域”)

text-transform

text-transform:文本大小写(只针对英文段落)
小写:lowercase
大写:uppercase
只针对单词首字母大小写:capitalize

text-indent

text-indent:文本缩进
首行缩进,写法text-indent: **px
em单位:相对单位,1em永远都是跟字体大小写相同,无论字体大小怎么变化

text-align

text-align:文本对齐方式

对齐方式:
1、left——左对齐
2、right——右对齐
3、center——居中
4、justify——两端点对齐

line-height

line-height:定义行高
行高的定义:
Web前端笔记记录_第18张图片

默认行高:不是固定值,而是变化的,根据当前字体的大小在不断地变化着的
取值:1、number(px)| 2、scale(比例值,跟文字大小成比例关系)

字间距

letter-spacing;字之间的间距
word-spacing:词之间的间距(针对英文段落的)

英文和数字不自动折行的问题(当一个英文单词或者数字太长是,系统默认为一个整体,不会自动进行折行操作):
1、word-break : break-all;(非常强烈的折行)
2、word-wrap:break-word(不是那么强烈的折行,会产生一些空白区域)

CSS复合样式

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

复合样式的写法:是通过空格的方式实现的,复合写法有的是不需要关心顺序,例如backgroun、border;有的是需要关心顺序的,例如font
1、background:red url() repeat 0 0 ;
2、border:1px red solid;
3、font(最少需要有两个值 ,size family):

weight style size family √
style weight family size √
weight style size/line-height family √
weight和style为一组,size和family是一组

注:尽量不要混写,如果非要混写,那么一定要先写复合样式再写单一样式,这样才不会被覆盖掉

CSS选择器

ID选择器

CSS:#elem{}
Html:id=“elem”
多余的知识,div#“命名值”+tab键,额能够快速生成< div id=“命名值”>< /div>

注:1、在一个页面中,ID值是唯一的,不能够重复出现,出现多次是不符合规范的。
2、命名规范,“字母”“ _ ”“- ”“数字”(命名的第一位不能是数字)。
3命名方式,驼峰式、下划线、短线式。

驼峰写法:searchButton(小驼峰) SearchBotton(大驼峰)searchSmallButton(小驼峰)
短线写法:search-small-button
下划线写法:search_small_button

CLASS选择器

CSS:.elem{}
Html: class=“elem”

注:
1、calss选择器是可以复用的
2、可以添加多个class样式。
3、多个样式的时候,样式的优先级根据CSS决定(在style中定义时的顺序),而不是class属性中的顺序
4、标签+类的写法 (例如p.贝勒贝莱,这样的话只有p标签可以使用“贝勒贝莱”样式)

你可能感兴趣的:(前端,javascript,css)