Web前端学习

已于 2022-10-27 21:57:54 修改
阅读量192 收藏
点赞数
文章标签： 前端 学习
于 2022-10-27 20:17:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rrrrrhhh/article/details/127482259
版权

1.嵌套列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        <strong>好美味小吃</strong>
    </p>
    <ul>
        <li>
            小吃类
            <ul>
                <li>煮粉干</li>
                <li>拌青菜</li>
                <li>蛋炒饭</li>
                <li>煎蛋</li>
            </ul>
        </li>
        <li>
            卤味类
            <ul>
                <li>鸭肠</li>
                <li>面筋</li>
                <li>牛肚</li>
                <li>猪耳朵</li>
                <li>猪头羊</li>
                <li>大肠</li>
                <li>鱿鱼</li>
            </ul>
        </li>
        <li>
            套餐类
            <ul>
                <li>卤面筋饭</li>
                <li>猪肉肉饭</li>
                <li>猪耳朵饭</li>
                <li>卤猪脚饭</li>
            </ul>
        </li>
        <li>
            <ul>
                <li>猪蹄黄豆</li>
                <li>猪肚链子</li>
                <li>猪心枸杞</li>
                <li>羊肉枸杞</li>
            </ul>
        </li>
    </ul>
    <p>
        亲，20元以上可送餐哦！！
    </p>
</body>
</html>

在这里插入代码片在这里插入图片描述

2.表格标签

2.1语义化标签

tHead,tBody,tFood
注:在一个table中，tBody是可以多次出现，但是tHead，tFood只能出现一次

2.2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
         <tr>
            <th>日期</th>
            <th>天气情况</th>
            <th>出行状况</th>
    </tr>
    <tr>
        <td>2022年10月21日</td>
        <td>晴</td>
        <td>天气晴朗，适合出行</td>
    </tr>
    <tr>
        <td>2022年10月22日</td>
        <td>小雨</td>
        <td>会有小雨，减少出行</td>
    </tr>
    </table>
</body>
</html>

在这里插入图片描述

3.表格属性

在这里插入图片描述
align：left,center,right
valign:top,middle,bottom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1"cellpadding="30"cellspacing="30">
         <tr align="left">
            <th colspan="2">日期</th>
            <th>天气情况</th>
            <th>出行状况</th>
    </tr>
    <tr valiqn="top">
        <td rowspan="2">2022年10月21日</td>
        <td>白天</td>
        <td>晴</td>
        <td>天气晴朗，适合出行</td>
    </tr>
    <tr>
        <td>白天</td>
        <td>小雨</td>
        <td>会有小雨，减少出行</td>
    </tr>
    <tr valiqn="bottom">
        <td rowspan="2">2022年10月21日</td>
        <td>夜晚</td>
        <td>晴</td>
        <td>天气晴朗，适合出行</td>
    </tr>
    <tr>
        <td>夜晚</td>
        <td>小雨</td>
        <td>会有小雨，减少出行</td>
    </tr>
    </table>
</body>
</html>

在这里插入图片描述

4.表单标签(1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <from action="http://www.baidu.com">
        <h2>输入框；</h2>
        <input type="text" placeholder="请输入用户名">  
        <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">
    </from>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

5.表单标签(2)

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <from action="http://www.baidu.com">
        <h2>电子邮箱；</h2>
        <input type="text">  
        <h2>设置密码：</h2>
        <input type="password">
        <h2>真实姓名；</h2>
        <input type="text"> 
        <h2>单选框</h2>
        <input type="radio"name="gender">女生
        <input type="radio"name="gender">男生
        <h2>生日</h2>
        <select>
            <option selected disabled>请选择</option>
            <option>2004</option>
            <option>2003</option>
            <option>2002</option>
            <option>2001</option>
        </select>
        <select>
            <option selected disabled>请选择</option>
            <option>12</option>
            <option>11</option>
            <option>10</option>
            <option>9</option>
        </select>
        <select>
            <option selected disabled>请选择</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
        <h2>我现在</h2>
        <input type="text" placeholder="请选择身份">
        <select>
            <option selected disabled>请选择身份</option>
            <option>学生</option>
            <option>老师</option>
        <h2>验证码:</h2>
    </from>
</body>
</html>

在这里插入图片描述

6.表格表单组合实列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <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="text" placeholder="请输入密码"></td>
            </tr>
            <tr align="center">
                <td colspan="2">
                    <input type="submit">
                    <input type="reset">
                </td>
            </tr>
        </tBody>
    </table>
   </form>
</body>
</html>

在这里插入图片描述

表格<table>定义,每个表格有若干行由<tr>定义，每行被分为若干的单元格由<td>定义，<th>表头

7.div和span

div:做一个区域划分的块
span：对文字进行修饰，内联
在这里插入图片描述

8.css基础语法

8.1

在这里插入图片描述
width：宽
height：高
background-color:背景色
长度单位：
px->像素
%->百分比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{width:100%;height:100px; background-color:greenyellow}
        span{background-color: blueviolet;}
    </style>
</head>
<body>
    <div>1234567</div>
    <span>0987654</span>
</body>
</html>

在这里插入图片描述

8.2CSS注释

快捷键：shift+alt+a
ctrl+/

<!-- css注释 -->

9内联样式与内部样式

在这里插入图片描述
CSS样式的引入方式

  1. 内联样式：style属性
  2. 内部样式：style标签
    区别：
    内部样式代码可以复用
 <style>
        div{width:100%;height:100px; background-color:greenyellow}
        /* span{background-color: blueviolet;} */
    </style>
</head>
<body>
    <!-- <div style="width:100%"height:100px; background-color:greenyellow>1234567</div> -->
    <div>123456789</div>

10.外部样式

引入一个单独的css文件，name.css
通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址
通过@import（不建议）
在这里插入图片描述

  <link rel="stylesheet"href="./common.css">
    <title>Document</title>
</head>
<body>
   <div>这是一个快</div>

11.css颜色表示

在这里插入图片描述
工具：FeHelper，Photoshop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{width:100px;height:100px;background-color:red ;}
        div{width:200px;height:150px;background-color:#000000;}
    </style>
</head>
<body>
   <div>色块</div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

12.css背景样式

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{ width:1400px;height:800px;background-image:url(./img/1.jpg;);background-attachment: fixed;}
        #div1{ width:1400px;height:800px;background-image:url(./img/2.jpg;);background-attachment: fixed;}
        #div1{ width:1400px;height:800px;background-image:url(./img/3.jpg;);background-attachment: fixed;}
    </style>
</head>
<body>
   <div id="div1"></div>
   <from action="http://www.baidu.com">
    <h2>电子邮箱；</h2>
    <input type="text">  
    <h2>设置密码：</h2>
    <input type="password">
    <h2>真实姓名；</h2>
    <input type="text"> 
    <h2>单选框</h2>
    <input type="radio"name="gender">女生
    <input type="radio"name="gender">男生
    <h2>生日</h2>
    <select>
        <option selected disabled>请选择</option>
        <option>2004</option>
        <option>2003</option>
        <option>2002</option>
        <option>2001</option>
    </select>
    <select>
        <option selected disabled>请选择</option>
        <option>12</option>
        <option>11</option>
        <option>10</option>
        <option>9</option>
    </select>
    <select>
        <option selected disabled>请选择</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
    <h2>我现在</h2>
    <input type="text" placeholder="请选择身份">
    <select>
        <option selected disabled>请选择身份</option>
        <option>学生</option>
        <option>老师</option>
    <h2>验证码:</h2>
</from>
   <div id="div2"></div>
   <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="text" placeholder="请输入密码"></td>
            </tr>
            <tr align="center">
                <td colspan="2">
                    <input type="submit">
                    <input type="reset">
                </td>
            </tr>
        </tBody>
    </table>
   </form>
   <div id="div3"></div>
   <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="text" placeholder="请输入密码"></td>
            </tr>
            <tr align="center">
                <td colspan="2">
                    <input type="submit">
                    <input type="reset">
                </td>
            </tr>
        </tBody>
    </table>
   </form>
</body>
</html>
</body>
</html>

13css边框样式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{width：300px；height:300px;border-style:red}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

14.css边框（三角形）

在这里插入图片描述
在这里插入图片描述

    <style>
    body{background-color: green;}
    div{ width：0px；height:0px;
    border-top-color:transparent;
    border-top-style:solid;
    border-top-width：30px;;
    border-right-color:red;
    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>
</head>
<body>
    <div></div>
</body>
</html>

15.css文字样式

在这里插入图片描述

 <style>
    div{ font-family: SimSun;}
    </style>
</head>
<body>
    <div>这是一段文字</div>

在这里插入图片描述

  • 字体中有空格用引号引
  • 多个字体类型的设置目的

16css字体样式（2）

在这里插入图片描述
注；字体大小一般为偶数
默认：16px
写法：number（px）
font-weight：字体粗细
模式：
正常（normal）加粗（bold）
number（100-500正常、600-900加粗） font-style：字体样式
模式：正常（normal） 斜体（italic）
在这里插入图片描述

17.css段落样式

在这里插入图片描述

  <style>
        p{ width:300px;text-decoration:line-through underline overline;}
    </style>
</head>
<body>
    <p>南京邮电大学通达学院</p>
</body>

在这里插入图片描述

18.文本缩进与文本对齐

 p{ text-indent: 2em;font-size:18px}
    </style>
</head>
<body>
    <p>南京邮电大学通达学院</p>

在这里插入图片描述
在这里插入图片描述

19.css段落样式

在这里插入图片描述
在这里插入图片描述

<style>
        /*p{ width:300px;text-decoration:line-through underline overline;}*/
        /*p{ text-indent: 2em;font-size:18px}*/
        /* p{line-height:1;}*/
        p{letter-spacing:30px;}
       /* p{word-spacing:10px;}*/
    </style>
</head>
<body>
    <p>南京邮电大学通达学院南京邮电大学通达学院,位于江苏省扬州市，学院始建于1999年，是经中华人民共和国教育部批准、由南京邮电大学创办的全日制普通本科高等学校（独立学院）。 [1] 
        截止2022年9月，学院占地893亩，现有在校生10428人,南京邮电大学通达学院南京邮电大学通达学院,位于江苏省扬州市，学院始建于1999年，是经中华人民共和国教育部批准、由南京邮电大学创办的全日制普通本科高等学校（独立学院）。 [1] 
        截止2022年9月，学院占地893亩，现有在校生10428人,南京邮电大学通达学院南京邮电大学通达学院,位于江苏省扬州市，学院始建于1999年，是经中华人民共和国教育部批准、由南京邮电大学创办的全日制普通本科高等学校（独立学院）。 [1] 
        截止2022年9月，学院占地893亩，现有在校生10428人
    </p>

在这里插入图片描述

20.文章段落


    <style>
     h1{ text-align: center;color:blueviolet}  
     h2{ text-align: center;color:blue}  
    </style>
</head>
<body>
    <h1>南京邮电大学通达学院南京邮电大学通达学院</h1>
    <h2>位于江苏省扬州市，学院始建于1999年，是经中华人民共和国教育部批准、由南京邮电大学创办的全日制普通本科高等学校（独立学院）。 [1] 
        截止2022年9月，学院占地893亩，现有在校生10428人,南京邮电大学通达学院南京邮电大学通达学院,位于江苏省扬州市，学院始建于1999年，是经中华人民共和国教育部批准、由南京邮电大学创办的全日制普通本科高等学校（独立学院）。 [1] 
        截止2022年9月，学院占地893亩，现有在校生10428人,南京邮电大学通达学院南京邮电大学通达学院,位于江苏省扬州市，学院始建于1999年，是经中华人民共和国教育部批准、由南京邮电大学创办的全日制普通本科高等学校（独立学院）。 [1] 
        截止2022年9月，学院占地893亩，现有在校生10428人</h2>

在这里插入图片描述

21.css复合样式

1.一个CSS属性只控制一种样式，叫做单一样式。
2.一个CSS属性控制多种样式，叫做复合样式。
在这里插入图片描述

22.css选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 100px;height: 100px;background: black;}
        #div2{width: 100px;height: 100px;background: gray;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

在这里插入图片描述

rrrrrhhh
关注
web前端学习心得
keket1的博客
06-30 2327
web前端学习心得
Web前端学习书籍推荐
web前端新手学习之家
11-20 2367
今天小编要跟大家分享的文章是关于Web前端工程师应该读的前端书籍推荐。正在从事web前端工作的小伙伴们都知道，想要从事前端行业，要学习的内容太多了，当你不知道从哪里开始的时候，你就先从看书开始，边看书边码代码，这个是学习编程必须的过程，因为你看一百遍，还不如自己写一遍，写一遍，第一可以加印象，第二便于更好的理解。今天小编就为大家推荐几本适合web前端工程师学习前端技术的书籍，希望能够对小伙伴们有所...
2023版完整版web前端学习路线图（超详细自学路线）
热门推荐
千锋教育
09-09 5万+
跟着路线图认真坚持学习从前端小白到大神不是梦，0基础看这一篇足矣！前端计算机常识 ➾ html+css基础 ➾ html+css 项目实践JavaScript基础+进阶 ➾ Ajxa ➾ JavaScript应用项目实践 ➾ Node.js ➾ MongoDB项目实践Vue&React开发：Vue2.0+3.0 ➾ Vue项目实践 ➾ 数据可视化项目 ➾ React ➾ React项目实战 ➾ UmiJS项目公众号&小程序开发。
Web前端学习笔记（1）
maxiaoxiaohaohao的博客
10-19 3719
Web前端学习笔记（1）
web前端学习总结
m0_59077155的博客
09-04 903
web前端学习总结
Web前端学习计划
Icketang_的博客
09-17 1357
第一阶段：页面制造根底 从这一根底阶段开始，正式学习Web前端开发需求的编程语言HTML,CSS和JavaScript。HTML和CSS用于Web静态内容的展现，JavaScript用于Web动态交互。完结这一阶段前端开发的学习，你就可以独立实现一个动态结合的Web前端项目啦！ 第二阶段：前端技能进阶 web前端开发进阶阶段的学习，首要是让我们快速掌握当今盛行、实用、最新的技能，比方：less、s...
web前端学习（总结/心得）
weixin_45627194的博客
12-11 2万+
文章目录学习前端前提一， 明确方向/态度二， 明确内容路线学习前端过程三，明确方法，怎么学1、入门（两方面）->搭积木2、尝试写完整的东西四，如何深入3、把握主流实用知识4、广度认知，扩充知识面5、项目6、现实个人学习心得/建议： 前言：在学习的时候，即使有计划，有时候也会因为一些其他的干扰，陷入迷茫之中，暂断学习，所以总结一下学习web前端的一些表层的东西，帮助自己在学习过程中更加明确每一步该怎么走，也分析给大家。 博主学前端的教训 最早，在MOOC上看视频，大一花一个月寒假纯学习，就写了几个HTM
Web前端如何学？Web前端学习方法分享
xiaoxijinger的博客
03-07 5580
伴随着人工智能、大数据的发展浪潮，互联网将各个行业更加紧密的链接到了一起，也因此，市场上对于IT互联网人才的需求一再增多，Web前端开发工程师这一岗位就很好的体现了这种态势。
2023年总结的web前端学习路线分享（学习导读）
ztK63LrD的博客
03-06 2万+
以上是博主自学一年前端总结的一些经验，虽然不是特别的准确但是至少能够给刚入学的前端小白一个借鉴的分享，我也会把一些人可能问到的问题总结如下，给大家分享一下我的经历：前端难不难？前端相较于后端语言来说还是比较简单的，不用考虑太多的算法方面知识，如果你的编程能力不是特别的优秀又想从事编程行业，前端可以说是一个不错的选择。前端好就业吗？近几年由于培训机构输出大量的程序员，导致现在前端有一点饱和，人数的众多导致企业对人才的要求也提高了，如果你想从事前端，建议早最准备学习多项技术才能让自己不被淘汰下去。
Web前端学习怎么入门？附学习方法
kedejun的博客
03-09 1064
Web前端技术在企业中应用的越来越广泛，因此企业对于Web前端方面专业人才的需求也越来越大，那对于之前对Web前端没有任何了解和接触的人而言，想要从零开始学习并不是一件容易的事情，接下来小编就为大家介绍一下Web前端学习应该如何入门。 Web前端学习难不难，学习方法很重要。Web前端作为目前实现前端界面展现的主要技术，虽然说学习难度比编程语言低一些，但是如果想要达到Web前端工程师的技术水平，需要学习和掌握的知识还是很多的，如果没有一个好的方法学习起来也会更加吃力。 想要知道Web前端学习怎么入
web前端学习,js,css.html.zip
01-02
web前端学习,js,css.htmlweb前端学习,js,css.html web前端学习,js,css.htmlweb前端学习,js,css.html web前端学习,js,css.htmlweb前端学习,js,css.html web前端学习,js,css.htmlweb前端学习,js,css.html web前端学习,...
web前端学习框架图.png
04-01
这是2020版最全的web学习框架，博主自己绘图，希望对你有帮助，助你在前端学习路上一臂之力，欢迎大家下载收藏，觉着有帮助的欢迎留言哦
WEB前端学习计划.xmind
03-03
如何学习web
Web前端学习仿拼多多软件首页界面模拟练习
02-22
Web前端设计——学习仿拼多多软件模拟练习（首页） 作者声明：该项目只是学习模拟软件前端的界面，不允许用于商业行为，否则后果自负！ 代码只是实现首页的界面（因为只是学习分享，所以已经多处避免雷同）
[项目][WebServer][日志设计]详细讲解
SnowK博客
09-11 4431
[项目][WebServer][日志设计]详细讲解
easyexcel模板导出并且公式自动计算的方法
weixin_47615289的博客
09-11 397
【代码】easyexcel模板导出并且公式自动计算的方法。
经验笔记：Web 浏览器存储手段
qq_45831414的博客
09-10 876
以上就是使用 IndexedDB 的基本步骤。IndexedDB 提供了强大的数据存储能力，并且可以通过索引来优化数据检索性能。在实际应用中，可能还需要处理更复杂的场景，比如数据迁移、错误处理等。务必确保你的代码能够妥善处理各种异常情况。
JS笔记
最新发布
2201_76100326的博客
09-11 504
Math对象属于Javascript内置对象，无需实例化（不需要添加new ），可以直接使用。只有一个Math.PI的属性。
web前端学习（十七
10-20
根据提供的引用内容，我可以为您介绍一下Web前端学习的相关内容。 Web前端开发是指利用HTML、CSS、JavaScript等技术开发网站的过程。对于初学者来说，可以从HTML、CSS、JavaScript的基础语法和常用标签、属性、方法...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值