前端&DAY2

最新推荐文章于 2024-09-23 16:36:59 发布
最新推荐文章于 2024-09-23 16:36:59 发布
阅读量36 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cos_1/article/details/121024381
版权

DAY2

[pink老师课的学习笔记]

表格标签

<table><!-- 表格-->
   
    <tr> <!--行-->
        <th>name</th><!--表头单元格，文字会加粗居中-->
        <td>单元格</td><!--单元格-->
    </tr>
    
</table>

  • 表格属性：

  •  

  • 表格结构标签< thead> < tbody>

    <table>
    <thead> <!--表头区域-->
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
        </tr>
        <tr>
        </tr>
    </tbody>
</table>

  • 合并单元格

    • 1.合并单元格方式

      • 跨行合并：rowspan="number"

      • 跨列合并: colspan="number"

    • 目标单元格:

      • 跨行：最上侧单元格为目标单元格，写合并代码

      • 跨列：最左侧单元格为目标单元格，写合并代码

    • 步骤：

      • 先确定跨行还是跨列

      • 找到目标单元格

      • 删除多余单元格

列表标签：

  • 无序列表：

    <ul>
    <li>内容1 </li>
    <li>内容2 </li>
    <li>内容3 </li>
</ul>
    <!--ul标签中只能放例-->
    <!--例中可以放任何标签-->

  • 有序列表：

    <ol>
    <li></li>
    <li></li>
</ol>

  • 自定义列表：

    <dl>
    <dt>大字</dt>
    <dd>小字</dd>
    <dd>小字</dd>
</dl>

    由三种标签组成-

    < dl>中只能出现< dt>和< dd>

表单标签：

 

  • 表单域：

    <form action="url" method="way" name="id">
    各种表单元素控件
    
</form>

    表单域会把他里面的内容提交给服务器

    < method>的属性可设置为Get或者post

  • 表单控件:

    <form action="url" method="way" name="id">
    <input type="属性值">
    <input type="radio"<br>
    
</form>

    input type属性值：

  •  

    check是复选框，

    radio如果要多选1，设置多个单选按钮为一个name

    value = " "提交给后台，可以在文本框中显示

    checked在单选按钮和复选框中设置该属性，默认选定该选项

    maxlength 文本框中的最大长度

    submit:将表单元素提交给服务器

    reset:清空表单内容

    file上传文件

  • lable标签

  •  

<label for="id">男</label>
<input type=:"text" id="id">

  • select下拉表单元素

    ​
<form>    
    籍贯:
<selecrt>
    <option>北京</option>
    <option selected="selected">火星</option>
    <!--默认选择-->
</selecrt>
    
 </form> 
​

  • 文本域表单元素：

    <form>    
<textarea rows="number" cols="number" >
    <!--rows是可以显示几行，cols是一行可以写多少字符-->
    打开时显示的内容
    </textarea>
</form>
​

  • 注册表单案例

<!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>注册案例</title>
</head>
<body>
    <h4>青春不常在，抓紧谈恋爱</h4>
    <table width="500" border="0">
        <!-- 第一行 -->
        <tr>
            <td> 性别:</td>
            <td>
                <input type="radio" name="sex" id="nan"> 
                <label for="nan"><img src="/Picture/sex=man.jpg">男</label>
                <input type="radio" name="sex" id="nv">
                <label for="nv"><img src="/Picture/sex=woman.jpg">女</label>
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日：</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                </select>
            </td>
            <td>
                <select>
                    <option>--请选择月份--</option>
                    <option>一月</option>
                    <option>二月</option>
                    <option>三月</option>
                </select>
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区</td>
            <td>
                <input type="text" value="北京">
            </td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况：</td>
            <td>
                <input type="radio" name="marry" id="yihun">
                <label for="yihun"> 已婚 </label>
                <input type="radio" name="marry" id="weihun" checked="checked">
                <label for="weihun"> 未婚 </label>
                <input type="radio" name="marry" id="lihun">
                <label for="lihun"> 离婚 </label>
            </td>
        </tr>
        <!-- 第五行 -->
        <tr>
            <td>学历</td>
            <td>
                <select name="xueli" id="xueli">
                    <option>请选择你的学历</option>
                    <option >大学</option>
                    <option>中学</option>
                    <option>更高</option>
                </select>
            </td>
        </tr>
        <!-- 第六行 -->
        <tr>
            <td>喜欢的类型:</td>
            <td>
                <input type="checkbox" name="love" id="keai">
                <label for="keai">可爱的</label>
                <input type="checkbox" name="love" id="xinggan">
                <label for="xinggan">性感</label>
                <input type="checkbox" name="love" id="smart">
                <label for="smart" >聪明</label>
                <input type="checkbox" name="love"id="chijia">
                <label for="chijia">持家</label>
                <input type="checkbox" name="love">只要是女的
            </td>
        </tr>
        <!-- 第七行 -->
        <tr>
            <td>个人介绍</td>
            <td><textarea name="jieshao" id="" cols="30" rows="10">个人简介</textarea></td>
        </tr>
        <!-- 第八号 -->
        <tr>
            <td></td>
            <td><input type="submit" value="注册"</td>
            </td>
        </tr>
        <!-- 第九行 -->
        <tr>
            <td></td>
            <td>
                <input type="checkbox"  checked="checked">
                我同意注册条款
            </td>
        </tr>
        <!-- 第十行 -->
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员，立即登陆</a>
              
            </td>
        </tr>
        <!-- 第十一行 -->
        <tr>
            <td></td>
​
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>年满18，单身</li>
                    <li>严肃真诚哈哈哈</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
   
</html>

CSS

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>
        p{
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <p>哈哈哈</p>
</body>
</html>

  • 每组属性结束后用分号！，属性和值使用键值对的方式

选择器

  • 选择器的作用：选择标签用的

  • 基础选择器：

    • 标签选择器：把某一类标签全部选择，但是不能单独选择

    • 类选择器:

    .类名（自己起名字，但不能用标签名，纯数字，中文) {
    属性1
}
然后在要修改的标签属性中添加类名
/*样式点调用 调用class="  "*/

  • div就是一个盒子，用来装网页内容

  • 多类名：

    • < div class="类名1（空格）类名2">

    • 使用场景：把多个标签共有的特点单独设置类

  • ID选择器

    • 样式通过#定义，调用使用id

  • 通配符选择器：

    • 将所有标签都应用

     

  • 总结：

 

CSS字体属性

  • font-family:xxxxxxx;字体

  • font-size:xxpx; 字大小

  • font-weight: 设置文本字的粗细（bold粗体，

  • font-style：设置文本风格(italic斜体)

< em>标签：倾斜

  • 字体的复合属性：

    (font:font-style font-weight font-size/line-height font-family)

    font：italic 700 16px 'Microsoft yahei'

    （不能更换顺序，每个属性按空格隔开）

不要的属性可以省略，但是size和family必有

  • 总结

 

CSS文本属性

  • text-align 水平对齐

  • 图片必须要设置标签

  • text-decoration可添加上下划线，删除线

    text-decoration: underline;

    text-decoration:line-through 删除线

    text-decoration:line-overline

    text-decoration:none(取消a herf默认的下划线)

  • 文本缩进：

    text-indent : xxpx/xxem(首行缩进xx像素)负值是突出

    em是一个相对单位，缩进几个文字的单位

  • 行间距

  • line-height(两行文字的距离)

  • 总结

 

CSS的引入方式：

  • 内部样式表：

    专门把CSS的内容抽取出来，专门放在head 中的< style>中

  • 行内样式表：

 

  • 直接在标签内部设定style属性就行

  • 外部样式表：

    适合样式比较多的代码

    1.先新建一个后缀为.css的文件

    2.这个css文件里只有样式，没有style

    3.在html中用link标签引入：

     

cos_1
关注
前端学习DAY2
qq_41577242的博客
11-21 657
前端学习DAY2链接使用 链接使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <a href="http://www.baidu.com">访问百度喔</a> <br/> <a href="http:/
后台管理系统 前端&后端开发经验心得（day 1）
hgftyknb的博客
05-20 1423
1.前端请求后端，就算是本机接口不同也会产生跨域问题。 如何解决：springboot可以通过在controller类、方法上注解的方式来进行跨域处理 注意跨域解决完，你会发现前端发送请求时一个请求会发送两次，其中第一次是预检请求，看看这个请求支不支持跨域资源分享 2.使用elementUIMessage 消息提示 第一步 第二步 3.rules是表单规则，validate是表单提交时的检验 elementUI上都有 4....
前端学习 DAY06
Nancyuojuiivk的博客
07-14 633
前端学习DAY06。
前端DAY 2案例展示
lang156的博客
09-11 214
【代码】前端DAY 2 案例展示。
前端day3-表格
wlx2513的博客
08-06 265
【代码】前端day3-表格。
前端工作日记day2
sirlll的博客
05-18 1679
今天的任务是写这两个页面。纯HTML和CSS，没有写JS，所以比较简单。课表栏的用的还是flex布局，先写整体布局。注意flex作用在子元素，一定要加宽度和高度，不然可能应用不上。     ...
前端day4-表单标签
wlx2513的博客
08-06 499
【代码】前端day4-表单标签。
前端基础：Day05
华山栈道的博客
04-27 1486
目录HTMLJS1.Index.js2.test_demo04.js HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>homework</title> <link rel="style
Django+前端+数据库Day2
likfishdn的博客
05-14 686
templates和引用静态文件，模板语法，请求与响应
前端day7-css选择器
wlx2513的博客
08-06 689
【代码】前端day7-css选择器。
苍穹外卖前端课程 day03-套餐管理
03-09
### 苍穹外卖前端课程 Day03 - 套餐管理知识点详解 #### 一、套餐分页查询 ##### 1.1 需求分析与接口设计 **产品原型及业务规则：** - **主要功能：** - 根据用户指定的页码展示套餐信息。 - 默认情况下每页...
day03-前端(ajax&json).zip
10-07
在"day03-前端(ajax&json)"的学习中，你将有机会实践如何使用AJAX进行异步数据请求，以及如何处理和展示JSON数据。通过编写AJAX请求，你可以与服务器进行实时交互，例如动态加载数据、提交表单等。同时，了解如何...
前端学习day01-HTML标签01
06-21
本教程“前端学习day01-HTML标签01”着重讲解HTML的基本概念和常用的HTML标签，旨在帮助初学者入门HTML，了解其在网页设计中的重要作用。 HTML由一系列元素组成，这些元素通过标签来表示。标签通常成对出现，比如`...
前端（day03-精灵图）
06-17
PICKPICK
webview2加载本地页面
qq_25160759的博客
09-23 268
推荐使用这种方式，加载速度比WebResourceRequested快（实测的确是快点），但是需要支持：ICoreWebView2_3。个人测试加载html字符串，对于html中引入了css和js，加载不太友好。这种方式是通过截获网络请求，然后返回需要的数据。以达到成功请求的假象。
WebGL复杂几何体与模型加载
天涯学馆
09-23 171
在WebGL中，复杂几何体的创建通常涉及多个顶点和面片，而模型加载则涉及到导入外部文件格式，如OBJ、GLTF或FBX。在WebGL中，可以通过设置不同类型的灯光来改变3D场景的光照效果。在WebGL中，可以通过增加更多的灯光uniforms并在片段着色器中计算它们的组合效果来实现多光源。除了基本的漫射和镜面高光，还可以添加软边缘高光、环境光遮蔽（Ambient Occlusion）和全局光照等效果，以增强光照的真实感。GLTF是一种现代的3D模型格式，包含了模型的几何体、材质、纹理和动画。
【Vue】- 路由及传参
不靠谱先森的博客
09-18 1314
什么是单页面应用程序?● 所有功能在一个html页面上实现单页面应用优缺点?● 优点：按需更新性能高，开发效率高，用户体验好● 缺点：学习成本，首屏加载慢，不利于SEO应用场景?● 系统类网站 / 内部网站 / 文档类网站 /移动端站点什么是路由？○ 路由是一种映射关系Vue中的路由是什么?○ 路径和组件 的映射关系○ 根据路由就能知道不同路径的，应该匹配渲染哪个组件如何实现路径改变，对应组件切换,应该使用哪个插件?○ Vue 官方插件 VueRouter。
apply、call和bind的作用和区别
最新发布
欢迎来到我的博客！我是一名全栈开发工程师，主攻前端开发。希望通过我的博客，能够与大家共同学习和成长。感谢您的关注和支持！
09-23 340
javascript中，apply、call和bind的作用和区别介绍。
前端入门：HTML+CSS
mingangel的博客
09-21 709
之前的文章我已经讲过HTML，这篇文章我将讲解HTML和CSS的案例。
Web前端Day1学习笔记：关键概念与标签解析
2. **页面结构标签**： - `<title>`定义页面的标题，显示在浏览器标签页上。 - `<body>`包含网页的主要内容。 - `~<h6>`定义标题等级，从一级到六级，级别越高，字体越大。 - ` `用于换行。 - `<hr>`插入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值