web前端从学习到学废

了解web前端
- 1.HTML、CSS系列之导学
- 2.什么是HTML、CSS？
- 3.宇宙第一编辑器VSCode
- 4.chrome浏览器
- 5.深入了解网站开发
- 6.web三大核心技术
HTML的一些基本内容
- 7.HTML基本结构和属性
- 8.HTML初始代码
- 9.HTML注释
- 10.HTML语义化
- 11.标题与段落
- 12.文本修饰标签
- 13.图片标签与图片属性
- 14.引入文件的地址路径
- 15.跳转链接
- 16.跳转锚点
- 17.特殊字符
- 18.无序列表
- 19.有序列表
- 20.定义列表
- 21.嵌套列表
- 22.表格标签
- 23.表格属性
- 24.表单input标签
- 25.表单相关标签
- 26.表格表单组合实例
- 27.< div > 与 < span >
- 28.CSS语法格式
- 29内联样式与内部样式
- 30.外部样式及两种写法
- 31.CSS颜色表示法
- 32.CSS背景样式
- 33.背景实现视觉差效果
- 34.CSS边框样式
- 35.边框实现三角形
- 36.family字体类型
- 37.字体大小粗细样式
- 38.文本修饰与文本大小写
- 39.文本缩进与文本对齐
- 40.文本的行高
- 41.文本间距与英文折行
- 42.文本与段落实现个人简介
- 43.CSS复合样式
- 44.ID选择器及注意事项
- 45.CLASS选择器及注意事项

了解web前端

1.HTML、CSS系列之导学

HTMLHTML百度百科
CSSCSS百度百科

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:超文本标记语言

超文本：文本内容+非文本内容（图片、视频、音频等）

标记：<单词>

语言：编程语言

标记也叫标签：

标签是可以上下排列的，也可以组合嵌套。

HTML常见标签：http://www.html5star.com/manual/html5label-meaning/

标签的属性：来修饰标签的，设置当前标签的一些功能。
<标签属性=“值” 属性2=“值2”>

8.HTML初始代码

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

!+tab键：快速创建html初始代码。

文档声明：告诉浏览器这是一个html文件 html文件的最外层标签 "lang"="en、zh-CN"表示是一个英文/中文网站元信息：是编写网页中的一些赋值信息

<title>Document</title>

显示网页内容的区域

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:图片的大小![是究极无敌巨TM可爱的琪亚娜！](https://img-blog.csdnimg.cn/b88a272c7b5343568bf0dfb5b1e6c754.jpeg#pic_center)

14.引入文件的地址路径

       相对路径：. 在路径中表示当前路径. . 在路径中表示上一级路径绝对路径：C:\Users\Administrator\Desktop\千锋教育\img\en

15.跳转链接

 a->双标签  <a></a>href属性：连接的地址target属性:可以改变链接打开的方式，默认情况下：在当前页面打开 _self  新窗口打开 _blankbase->单标签：作用就是改变链接的默认行为的。

16.跳转锚点

两种做法1.#号+id属性2.#号+name属性（注意name属性加给的是a标签）

17.特殊字符

1.&+字符
2.解决冲突啊 左右尖括号、添加多个空格的实现
3.&lt;&gt;&nbsp;
![一些特殊字符](https://img-blog.csdnimg.cn/d1c27faa4ae840789bb6454e471c5c1b.png)

18.无序列表

ul li 符合嵌套的规范 (ul中间不能插入其他标签如p)
type属性：改变前面标记的样式（一般用CSS控制）

19.有序列表

ol li 一般用的比较少，可以用无序列表来实现

20.定义列表

dl dt dd 列表项需要添加标题和对标题进行描述的内容

https://www.w3school.com.cn/tags/att_ul_type.asp (列表标签目录)

21.嵌套列表

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

<ul><li>江苏省<ul><li>南京市</li><li>宿迁市</li><li>盐城市</li></ul></li><li>山东省</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></select><select size="2"><!--显示多项--><option>北京</option><option>上海</option><option>南京</option></select><select multiple><!--多选--><option>北京</option><option>上海</option><option>南京</option></select><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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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;} */</style>
</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;}</style>
</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')</style>
</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;}
</style>

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;}</style>
</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;}
</style>

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;}</style>

注：透明颜色 transparent

36.family字体类型

font-family：字体类型英文：Arial、‘Times New Roman’ 中文：微软雅黑（‘Microsoft
YaHei’）、宋体（Simsun）

示例：

    <style>div{font-family: 宋体;}</style> </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 size/line-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）

web前端从学习到学废相关推荐

不会编程能学前端吗？web前端需要学习什么？
Web前端工程师,是伴随着Web的兴起而细分的行业,随着当下企业对用户体验的重视,无论互联网公司还是大型企业都把前端作为自己的招牌门面,看得相当重要.而且随着互联网的不断发展,每年都会诞生大量的企业, ...
小猿圈Web前端开发学习路线
很多人已经下定决心学习前端开发,但是学习很盲目,没有一个明确的目标,导致学了很长时间效果也没有很明显,最终放弃了,这个结果是我们最不想看到的结果,那么学习路线就十分重要了,好的学习路线对学习会引向成功 ...
web前端需要学习什么？
Web前端工程师,是伴随着Web的兴起而细分的行业,随着当下企业对用户体验的重视,无论互联网公司还是大型企业都把前端作为自己的招牌门面,看得相当重要.而且随着互联网的不断发展,每年都会诞生大量的企业, ...
web前端需要学习什么？需要掌握什么技术
1.Web前端是什么意思 Web前端是网站前台部分,运行在PC端,移动端等浏览器上展现给用户所浏览的网页. 用我们的话来说,前端就是网页给访问网站的人看的内容和页面,Web前端开发意思就是这些内容的制 ...
web前端开发学习路线
导语:首先分享一下我的经验,想做好一件事,必须要花费一些功夫,然后是多学.多思.多练.多交流.多总结,发现自己的问题,然后一定要克服,在状态不好的情况下,往往要及时调整.新手学习前端的话,一定要想想 ...
2018web前端学习路线，详谈web前端开发学习路线
近几年IT业可谓是发展火热,而且新生了很多的职业.在这众多的新生职业中备受瞩目的当属web前端工程师了,web前端在IT行业真正受到重视的时间不超过五年,但是web前端的发展前景却是非常的可观,好前景 ...
Web前端需要学习什么？小白入门指南
Web前端工程师,是伴随着Web的兴起而细分的行业,随着当下企业对用户体验的重视,无论互联网公司还是大型企业都把前端作为自己的招牌门面,看得相当重要.而且随着互联网的不断发展,每年都会诞生大量的企业, ...
送给大家一套完整的web前端开发学习路线
本文来源:千锋web前端开发近几年IT业可谓是发展火热,而且新生了很多的职业.在这众多的新生职业中备受瞩目的当属web前端工程师了,web前端在IT行业真正受到重视的时间不超过五年,但是web前端的 ...
web前端需要学习什么？这5点很重要
Web前端工程师,是伴随着Web的兴起而细分的行业,随着当下企业对用户体验的重视,无论互联网公司还是大型企业都把前端作为自己的招牌门面,看得相当重要.而且随着互联网的不断发展,每年都会诞生大量的企业, ...

web前端从学习到学废

web前端从学习到学废

了解web前端

1.HTML、CSS系列之导学

2.什么是HTML、CSS？

3.宇宙第一编辑器VSCode

4.chrome浏览器

5.深入了解网站开发

6.web三大核心技术

HTML的一些基本内容

7.HTML基本结构和属性

8.HTML初始代码

9.HTML注释

10.HTML语义化

11.标题与段落

12.文本修饰标签

13.图片标签与图片属性

14.引入文件的地址路径

15.跳转链接

16.跳转锚点

17.特殊字符

18.无序列表

19.有序列表

20.定义列表

21.嵌套列表

22.表格标签

23.表格属性

24.表单input标签

25.表单相关标签

26.表格表单组合实例

27.< div > 与 < span >

28.CSS语法格式

29内联样式与内部样式

30.外部样式及两种写法

31.CSS颜色表示法

32.CSS背景样式

33.背景实现视觉差效果

34.CSS边框样式

35.边框实现三角形

36.family字体类型

37.字体大小粗细样式

38.文本修饰与文本大小写

39.文本缩进与文本对齐

40.文本的行高

41.文本间距与英文折行

42.文本与段落实现个人简介

43.CSS复合样式

44.ID选择器及注意事项

45.CLASS选择器及注意事项

web前端从学习到学废相关推荐

最新文章

热门文章