web前端学习Day2

已于 2023-07-07 12:18:20 修改
阅读量25 收藏
点赞数
文章标签： 前端 学习
于 2023-07-07 12:13:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75408313/article/details/131594135
版权

01-元素显示模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 元素显示模式
    块元素：独占一行   div     宽、高、内外边距可以设置
    行内元素：一行可以存在多个   span   宽、高、内外边距不可以设置
    行内块元素：br
    -->
    <div>oqjxihnz</div>
    <span>xojzojojih</span>
</body>
</html>

02-表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <!-- 表头 rows data-->
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>共计3人</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

03-表格标签属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- table (只控制最外围大小)、width、height(它的值是底线)、cellspacing -->
    <!-- caption 通过css更改 -->
    <!-- thead 表头 height、align（水平位置）、valign（垂直位置） -->
    <!-- tbody 表干 height、align、valign -->
<table border="1px" width="900px" height="400px" cellspacing="0">
    <caption>学生信息</caption>
    <thead>
        <!-- tr  height、align、valign -->
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>民族</th>
            <th>政治面貌</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <!-- td  height、align、valign -->
            <td>张三</td>
            <td>男</td>
            <td>18</td>
            <td>汉</td>
            <td>党员</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
            <td>汉</td>
            <td>党员</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
            <td>汉</td>
            <td>党员</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>共计3人</td>
        </tr>
    </tfoot>
</table>
</body>
</html>

04-单元格合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
    td 跨行 rowspan
       跨列 colspan
    -->
    <table border="1px" width="900px" height="400px" cellspacing="0">
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">张三</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
        </tbody>
        <tfoot>
            <tr align="right">
                <td colspan="5">共计3人</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

05-details

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        summary 详情
        details  详情内容
     -->
    <details>
        <summary>有志青年</summary>
        我们都是有志青年
    </details>
</body>
</html>

06-tabindex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- tabindex 让本不能tab遍历获取焦点的元素可以获取，可以为负数 -->
    <input type="text">
    <a href="#">去百度</a>
        <div>我是1</div>
        <div tabindex="1">我是2</div>
        <div>我是3</div>
        <div>我是4</div>
</body>
</html>

07-表单的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表单 网页交互区，搜集用户信息 -->
    <!-- action 将数据交给谁处理 -->
    <!-- name 必有属性 -->
    <!-- method 提交方式（get/post） -->
    <form action="https://www.baidu.com/s">
        <input type="text" name="wd">
        <button>登录</button>
    </form>
</body>
</html>

08-常见的表单元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#">
        <!-- 文本框 -->
        <!-- placeholder 默认显示 -->
        用户名：<input type="text" name="user" value="gouxin" placeholder="Apple ID"><br />
        <!-- 密码 -->
        密码：<input type="password" name="pwd"><br />
        <!-- 单选框 -->
        <input type="radio" name="gender" value="man">男
        <input type="radio" name="gender" value="woman">女<br />
        <!-- 多选框 label标签 -->
        <!-- 多选框的默认选中为 checked -->
        <input type="checkbox" name="number" id="1"><label for="1">1</label>
        <input type="checkbox" name="number" id="2" checked><label for="2">2</label>
        <input type="checkbox" name="number" id="3"><label for="3" >3</label><br />
        <!-- 隐藏域 -->
        <input type="hidden" name="hid" value="z,pqwk,slmc">
         <!-- 确认按钮 -->
         <input type="submit">
         <!-- <button type="submit"></button> -->
         <!-- 重置按钮 -->
         <input type="reset">
         <!-- 普通按钮 -->
         <input type="button">
         <!-- 文本域 -->
         <textarea cols="20" rows="2o"></textarea>
         <!-- 下拉菜单 -->
         <!-- 下拉菜单的默认选中为 selected -->
         <select name="112" id="">
            <option value="123" selected>123</option>
            <option value="456">456</option>
            <option value="789">789</option>
         </select>
    </form>
</body>
</html>

09-html的全局属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- id身份证，在一个页面中只能出现一次 -->
    <div id="one"></div>
    <!-- class 一类  可以出现多个 -->
    <div class="pink" style="font-size: 40px;">10084</div>
    <div class="pink">10086</div>
    <div class="pink">10086</div>
    <div class="pink">10086</div>

    <!-- accesskey 设置快捷键 -->
    <form action="#">
        <input type="text" name="a" id="">
        <button accesskey="s">提交</button>
    </form>

    <!-- style -->
    <!-- date-*  自定义属性 -->
</body>
</html>

10-html5语义标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="head"></div>
    <div class="body">
        <div class="nav"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

11-h5表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#">
        <input type="number">
        <input type="color">
        <input type="time">
        <button>提交</button>
    </form>
</body>
</html>

12-css体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div>我</div>
</body>
</html>

13-css的三种引入方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 外部样式：推荐 -->
    <link rel="stylesheet" href="./14-样式.css">
    <!-- 内部样式 -->
    <style>
        div{
            /* css基础结构
            选择器{
                属性名：属性值；
                属性名：属性值；
            }
            */
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div class="box1">我是盒子</div>
    <!-- 行内样式：不推荐 -->
    <div style="width: 300px; height: 300px; background-color: rgb(221, 58, 13);"></div>
    <div class="box2">我是bow2</div>
</body>
</html>

15-基础选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 标签选择器  选中所有p标签 */
        p {
            color: bisque;
        }
        /* id选择器 */
        #box1 {
            color: blueviolet;
        }
        /* 类选择器 */
        .box2 {
            color: blue;
        }
        /* 通配符选择器 */
        * {
            background-color: aqua;
        }
    </style>
</head>
<body>
    <p>我是123</p>
    <div id="111">我是111</div>
    <div class="333">我是333</div>
</body>
</html>

16-包含选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 子代选择器 选中亲儿子 */
        .a>li {
            background-color: aqua;
        }

        /* 后代选择器 找到后代所有要找的元素 */
        .a li {
            color: rgb(255, 0, 89);
        }
    </style>
</head>
<body>
    <ul class="a">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </ul>
</body>
</html>

17-字体的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* 字体大小 */
            font-size: 20px;
            /* 字体粗细 */
            /* 100-900越来越粗   400=normal  800=bold */
            font-weight: 500;
            /* 字体是否倾斜 */
            /* font-style: italic/normal; */
            font-family: "微软雅黑";
            /* italic 900可省略，字体大小，font-family必须存在 */
            font: italic 900 70px "微软雅黑"
        }
    </style>
</head>
<body>
    <div>
        我是TNT
    </div>
</body>
</html>

18-复合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 复合选择器  ， */
        div,
        p,
        span {
            color: aquamarine;
        }
    </style>
</head>
<body>
    <div>qoewdlov</div>
    <p>cv vojviojiv</p>
    <span>cinihfcuef</span>
    <ul>
        <li>qedstrgte5rr</li>
    </ul>
</body>
</html>

19-属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            background-color: bisque;
        }
        input[type="password"] {
            background-color: blue;
        }

        div[id] {
            background-color: aquamarine;
        }

        /* type^="te"以te开头 */
        input[type^="te"] {
            background-color: aliceblue;
        }

        /* type$="1"以te结尾 */
        input[type$="1"] {
            background-color: beige;
        }

        /* type*="e"  type值里边包含e */
        input[type*="e"] {
            background-color: brown;
        }
    </style>
</head>
<body>
    <input type="text"><br />
    <input type="password"><br />
    <input type="search"><br />
    <input type="url"><br />
    <input type="number"><br />
    <div id="aquamarine">1</div>
</body>
</html>

20-文本外观

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-size: 20px;
            text-indent: 2em;
            /* text-indent:2em; em表示当前字体大小  */
        }
    </style>
</head>
<body>
    <p>dwaighyaxskjglcyasckyzhcfg</p>
    <div>caugcsblajogtcjzitcgyujkc<div>
    
</body>
</html>

无妄之灾|
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Web前端学习-day03-JavaScript
Javaw1212的博客
08-26 3907
交互性强: 由于JS语言是嵌入到HTML页面中undefined最终执行在客户端的浏览器中的语言undefined和用户是直接接触undefined Java语言是运行在服务器的语言undefined 用户需要进行交互的话必须通过网络才可以undefined所以JS语言的交互性会更强.==和===区别: ==先统一等号两边变量的类型 再比较值undefined ===先比较两个变量的类型undefined类型一致后再比较值. "666"==666 true "666"===666 false。...
HY的Web前端周记 Day1
qq_51167539的博客
03-14 2369
HY的Web前端开发周记 Day1 引子 2021.3.04，信息管理创新实践课程开始学习。主要了解了关于HTML、CSS、JavaScript 的基本概念及其用途，并对html基础元素、属性有了一定的了解。运用了HBuilder作为开发环境，在Hbulider上面实践了我们的第一个专属网页：个人自我介绍页。以下是我对本次课程学习的总结。 提示：以下是本篇文章正文内容，下面案例可供参考 一、HTML、CSS、JavaScript HTML 超文本标记语言（英语：HyperText Markup Langu
快速学习web前端day1
javfen的博客
02-03 72
自主学习web前端
WEB前端学习日志Day 1
bbbbbbxxx的博客
03-16 1234
WEB前端学习日志网页的组成网页的构成WEB标准计算机语言HTML的发展初次尝试VScode 网页的组成 1.网址（域名） 2.资源存储空间（租用空间）：服务器 3.项目制作：a.规划网站的资源，功能等 b.网站的设计，界面，交互 c.前端设计（承上启下） d.后端 e.联调，测试 f.上线 g.维护 网页的构成 网页的结构：网页中的文字，图片等 网页的表现：网页中的排版，文字的颜色等 网页的...
WEB前端学习day1-HTML
qq_44850230的博客
03-19 1315
HTML基础知识 1.HTML语法规范 <html> <head></head> <body></body> </html> <br/> 标签是尖括号包围的关键字。 通常是双标签，开始和结束标签，如<html>等； 也有单标签，如<br/> 也可写为<br> (转义标签用``) 2.网页初始化 DOCTYPE:声明文档类型 告诉浏览器使用哪种HTML版本来显示网页 lang：定义文档
快速学习web前端day2
javfen的博客
02-05 49
学习前端html的第二天
WEB前端学习日志Day5
bbbbbbxxx的博客
03-20 1137
WEB前端学习日志Day5 今日学习内容总结：通过一天的学习，主要学习了CSS选择符的权重问题，并对css层叠性做解释，也学习了CSS的文本属性，并且初步了解了浮动。 1.CSS选择符的权重 选择符的权重： id > class > 标签 首先通过四个数字表示权重： 内联样式表 -> 1000 id -> 100 class -> ...
Web安全学习day02
weixin_52445990的博客
01-18 2459
CSRF 1.什么是CSRF？ Cross-Site Request Forgery 跨站请求伪造 CSRF概念： CSRF跨站点请求伪造(Cross—Site Request Forgery)，跟XSS攻击一样，存在巨大的危害性，你可以这样来理解： 攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。 如下：其中Web A为存在CSRF漏洞
前端学习day8
m0_46896340的博客
03-17 68
移动web学习 css总结
前端学习day10
m0_46896340的博客
03-22 57
移动web完结
Web前端.DAY2转换.avi
05-16
Web前端.DAY2转换.avi
Web前端.DAY2验.avi
05-16
Web前端.DAY2验.avi
Web前端.DAY2框架.avi
05-16
Web前端.DAY2框架.avi
Web前端基础day02.zip
08-12
内部样式: 在head标签里面添加style标签 标签体内写样式代码，可以在当前页面复用,这种写法学习使用较多,工作中使用较少 外部样式: 在单独的css样式文件中写样式代码,通过link标签引入,好处:可以多页面复用,可以将...
vito的Web前端学习_JavaScript_Day1
03-04
vito的Web前端学习_JavaScript_Day1
记录一次前端页面崩溃的产生及处理
weixin_51123079的博客
05-30 497
记录一次前端页面崩溃的产生及处理
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 505
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Typescript高级: 深入理解extends keyof语法
最新发布
Wang的专栏
06-02 577
在TypeScript中，extends关键字是类型系统中一个极其重要的组成部分它不仅用于类的继承，也是类型兼容性检查和泛型约束的关键机制特别是当它与keyof关键字结合，形成的结构时它为类型系统带来了强大的灵活性和表达能力，让我们能够在泛型中对对象的属性进行操作和约束。
【JS实战案例汇总——不定时更新版】
微木
05-30 330
练习JS的实用案例，倒计时算法、定时轮播图
web前端实现制作课程表
06-09
{ name: '语文', day: 'monday', start: 1, end: 2, location: '教室A' }, { name: '数学', day: 'tuesday', start: 3, end: 4, location: '教室B' }, // 其他课程的数据 ]; // 遍历数据，将课程信息填充到表格...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值