web前端从学习到学废

犬十七

已于 2022-10-27 21:53:08 修改

阅读量2.3k

点赞数 3

文章标签：前端学习

于 2022-10-19 12:11:25 首次发布

本文链接：https://blog.csdn.net/dongshan14quan17/article/details/127404756

版权

web前端从学习到学废

了解web前端
HTML的一些基本内容

了解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  新窗口打开 _blank

    base->单标签：作用就是改变链接的默认行为的。

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