前端&DAY2

最新推荐文章于 2024-09-18 17:34:39 发布
最新推荐文章于 2024-09-18 17:34:39 发布
阅读量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
关注
后台管理系统 前端&后端开发经验心得（day 1）
hgftyknb的博客
05-20 1423
1.前端请求后端，就算是本机接口不同也会产生跨域问题。 如何解决：springboot可以通过在controller类、方法上注解的方式来进行跨域处理 注意跨域解决完，你会发现前端发送请求时一个请求会发送两次，其中第一次是预检请求，看看这个请求支不支持跨域资源分享 2.使用elementUIMessage 消息提示 第一步 第二步 3.rules是表单规则，validate是表单提交时的检验 elementUI上都有 4....
前端学习DAY2
qq_41577242的博客
11-21 656
前端学习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:/
前端学习 DAY06
Nancyuojuiivk的博客
07-14 629
前端学习DAY06。
前端DAY 2案例展示
lang156的博客
09-11 213
【代码】前端DAY 2 案例展示。
前端day3-表格
wlx2513的博客
08-06 264
【代码】前端day3-表格。
前端工作日记day2
sirlll的博客
05-18 1678
今天的任务是写这两个页面。纯HTML和CSS，没有写JS，所以比较简单。课表栏的用的还是flex布局，先写整体布局。注意flex作用在子元素，一定要加宽度和高度，不然可能应用不上。     ...
前端day4-表单标签
wlx2513的博客
08-06 496
【代码】前端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 685
【代码】前端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
-webkit-box-reflect属性与倒影效果的实现
读心悦
09-13 503
是一个非标准的 CSS 属性，主要用于在 WebKit 浏览器（如 Chrome 和 Safari）中创建元素的倒影效果。这个属性并不是 CSS 规范的一部分，但在实践中经常被用来实现简单而有趣的视觉效果。
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 490
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
【Vue】- 路由及传参
最新发布
不靠谱先森的博客
09-18 899
什么是单页面应用程序?● 所有功能在一个html页面上实现单页面应用优缺点?● 优点：按需更新性能高，开发效率高，用户体验好● 缺点：学习成本，首屏加载慢，不利于SEO应用场景?● 系统类网站 / 内部网站 / 文档类网站 /移动端站点什么是路由？○ 路由是一种映射关系Vue中的路由是什么?○ 路径和组件 的映射关系○ 根据路由就能知道不同路径的，应该匹配渲染哪个组件如何实现路径改变，对应组件切换,应该使用哪个插件?○ Vue 官方插件 VueRouter。
测试ASP.NET Core的WebApi项目调用WebService
gc_2299的博客
09-15 383
记录在WebApi中调用WebService的基本方式。
计算机毕业设计 基于SpringBoot的课程教学平台的设计与实现 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
weixin_19164791635
09-12 992
本文介绍了一款基于Java、SpringBoot和Vue.js技术的课程教学平台。该平台服务于管理员、学生和教师，提供教学资源管理、课程信息浏览、作业提交与批改等功能，旨在优化教学流程，提升教育质量，促进教育资源的数字化共享，推动教育信息化发展。
Web前端Day1学习笔记：关键概念与标签解析
2. **页面结构标签**： - `<title>`定义页面的标题，显示在浏览器标签页上。 - `<body>`包含网页的主要内容。 - `~<h6>`定义标题等级，从一级到六级，级别越高，字体越大。 - ` `用于换行。 - `<hr>`插入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值