对依旧是我，day_2。

最新推荐文章于 2024-09-12 19:13:21 发布
最新推荐文章于 2024-09-12 19:13:21 发布
阅读量122 收藏
点赞数 1
分类专栏： HTML 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43437393/article/details/108114772
版权

第二天studying

标签的通用属性

通用属性顾名思义就是大家都能的属性了，就比如全网通手机，三大运行商想用哪个用哪个。

通用属性

  • id 用于指定唯一元素，一个id只能在代码里指代唯一一个对象。`
  • class中文名【类】，不同的元素可以用同一个类名
  • style中文名【样式】，为不同的元素搭配不同的风格，可理解为英雄的 各种皮肤。
  • title中文名【标题】，它真正的作用不是常规理解的标题，而是鼠标移到它修饰的元素时根据你写的内容，光标下会出现相应的字，起提示作用。
    ps:后三者都是可以重复书写的。
`<table id="love" class="box" style="color: blue;" title="爱的迫降"></table>
    <div id="study" class="box" style="color: blue;" title="猎狐"></div>`

table的家人

行：tr 单元格：td首行：th
表头：thead表体：tbody
表尾：tfoot属性：边框：border
宽度：width对齐：align
跨行：rowspan跨列：colspan

<table border=2>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>班级</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>3</td>
                <td>6</td>
                <td>9</td>
                <td>12</td>
            </tr>
        </tfoot>
    </table>

运行结果

合并行

<table border=2>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>班级</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>3</td>
                <td>6</td>
                <td>9</td>
                <td>12</td>
            </tr>
        </tfoot>
    </table>

行合并结果

合并列

<table border=2>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>班级</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">1</td>
                
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>3</td>
                <td>6</td>
                <td>9</td>
                <td>12</td>
            </tr>
        </tfoot>
    </table>

在这里插入图片描述

表单（form）与我今天的作业3

form标签之于表单，就像table标签之于表格一样，生成表单不可缺少，所有组件都写在form标签里：
语法：

<form>  内容 </form>

"type"类型很重要，格式为

<input type="#" name="xxx" value="ddddd">

其中双引号的“#”可替换内容，=“text”时，为文本输入框。
=“password”时，为密码输入框。
=“e-mail”时，为邮箱输入框，格式不对或缺少@符号都会提示错误。
=“image”时，提交图片。
=“file”时，提交文件。
=“number”时，只能输入数字，右侧会有一个加减符号，如图：
好累
=“url”时，是网址输入框，必须是以http://或者https://开头，后面必须有内容，不然报错。
=“radio”时，为单选选择，注意同一组选项，name属性必须相同。
=“checkbox”时为多选，那么属性可以不同。
=“submit”时为提交按钮。
=“reset”时为重置按钮。
还有好多好多。。。。。。
对了还有留言文本框用

<textarea row="行数" cols=“列数/字数”（能明白意思就行，别纠结说法。）>
</textarea>

重点来了我的作业
上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content="yue0609">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#" method="get" >
        <label for="zhanghao">账号：</label>
        
        <input type="number" name="zhanghu" placeholder="请输入账户："></br>
        <label for="email">邮箱：</label>
        <input type="email" name="email" placeholder="请输入邮箱："></br>
        <label for="mima">密码：</label>
        <input type="password" name="mima" placeholder="请输入密码："></br>
        <label for="sex"></label>
        性别：
        男：<input type="radio" name="sex" value="男">
        女：<input type="radio" name="sex" value="女"></br>
        <label for="job">技能：</label>
        <input type="checkbox" name="job" value="html+css">html+css
        <input type="checkbox" name="job" value="javascript">javascript
        <input type="checkbox" name="job" value="php">php
        <input type="checkbox" name="job" value="java">java</br>
        <label for="a">头像：</label>
        <input type="file" value="选择文件"></br>
        <label for="address">现居地</label>
        <select name="address" id="1">
            <option value="广东省">广东省</option>
        </select>
        <select name="address" id="2">
            <option value="广州市">广州市</option>
        </select>
        <select name="address" id="3">
            <option value="天河区">天河区</option>
        </select></br>
        <label for="tell">留言：</label>
        <textarea name="tell" cols="30" rows="10" placeholder="请输入留言内容"></textarea></br>
        <label for="yes">验证码：</label>
        <input type="text" name="yes" placeholder="请输入验证码"><img src="D:/html/day_02/img/a4.jpg" alt=""width="100px"></br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">

    </form>
</body>
</html>

真迷人
周震南，真的太能让我感到心情愉悦了，假若有天我能成为大佬，我愿意义务写一个收费资源网站，男明星里只为他动笔，女星不透露，啦啦啦。
时候不早啦，剩下的表格
先上代码，明个起来了再分析我写作业时遇到的问题。

作业1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="Author" content="yue0609">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    table{
        border-color: royalblue;
    }

    </style>
</head>
<body>
    <table border="1" width="300px" align="center">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
</body>
</html>

作业一
这个当时遇到的问题是怎么改变边框线颜色，以及边框线的线条形状和粗细。这里详细来说一下，当时的我对样式理解的过于片面所以绕了很多弯路

<style type="text/css">
	table{
	border:1px solid #eeeeee
	}
	td{
	border:1px solid #eeeeee
	}
</style>

这段代码的意思是边框线为1px（像素），solid是实线的意思，这里还可以写
double（双实线），dotted(圆点线)，dashed(虚线)，有兴趣的可以自行尝试。颜色写在线条样式后即可。

作业2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="Author" content="yue0609">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        
        table{
            border-color: skyblue;
        }
        </style>
</head>
<body>
    <table border="1" width="500px" align="center">
       <tr>
           <td rowspan="3" colspan="3" align="center">网站名称</td>

          
       </tr>
       <tr></tr>
       <tr></tr>
       <tr>
           <td>网站标题</td>
           <td colspan="2" align="right">搜索框</td>  
       </tr>
       <tr>
           <td rowspan="3">左边</td>
           <td rowspan="3">中间</td>
           <td rowspan="3">右边</td>
       </tr>
       <tr>
           
       </tr>
       <tr>
        
       </tr>
           
        <td rowspan="3" colspan="3" align="center">网站底部信息</td>
       </tr>
       <tr>
       </tr>
       <tr>
       </tr>
    </table>
</body>
</html>

这部分我可以说是做了一份失败的半成品作业，效果如下：
失败
首先失误在没有确定好表格的大小。要求效果如下：
样例
看起来基本布局我都完成了，但是这个宽高我就是调不成合适的比例。
教学思路首先看图发现行高不同，所以就不先确定高度。然后绘制一个四行三列的表格。然后给每行设置单独的行高，给第二行的单元格按比例设置宽度。align:left【左对齐】| right【右对齐】| center【居中】。
代码如下：

<table border="1" bordercolor="blue" width="600" align="center">
       <tr height="80px" >
           <td colspan="3" align="center">网站名称</td>
           
       </tr>
       <tr height="30px">
           <td width="200"> 网站标题</td>
           <td colspan="2" align="right" width="400">搜索群</td>
           
       </tr>
       <tr height="80px"> 
           <td>左边</td>
           <td>中间</td>
           <td>右边</td>
       </tr>
       <tr height="80px">
           <td colspan="3" align="center">底部信息</td>
           
           
       </tr>
   </table>

实现效果
在这里插入图片描述

  • 计划任务
  • 完成任务

作业4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="Author" content="yue0609">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    
    </style>
</head>
<body>
   <table border="5" bordercolor="pink" width="800" align="center">
       <tr>
           <td rowspan="8" width="100px">
               <img src="D:/html/day_02/img/2.jpg" alt="">
           </td>
           <td rowspan="4" align="center">11</td>
           <td rowspan="2">12</td>
           <td>13</td>
       </tr>
       <tr>
           <td>13</td>
       </tr>
       <tr>
           <td rowspan="2">12</td>
           <td>13</td>
           
       </tr>
       <tr>
           <td>13</td>
       </tr>
       <tr>
           <td rowspan="4" align="center">11</td>
           <td rowspan="2">12</td>
           <td>13</td>
       </tr>
       <tr>
           <td>13</td>
        </tr>
       <tr>
           <td rowspan="2">13</td>
           <td>13</td>
          
       </tr>
       <tr>
           <td>13</td>
       </tr>
   </table>
</body>
</html>

最后一个作业遇到的问题，依然是表格的内容元素对表格大小的影响问题，以及图片的显示问题。写代码时一定要注意先布局，后修饰这一原则，不然后面的代码样式对全局影响很大。

2020.08.20.03.00
中国 某省 某市 某LY著【14 31 25】

qq_43437393
关注
专栏目录
day37【JQuery基础】.pdf
05-30
随着前端技术的不断发展，jQuery依旧保持其在前端开发领域的地位，并且不断有新的插件和技术来扩展其功能。然而，现代前端框架如React、Vue和Angular的崛起，也为前端开发带来了新的变革。尽管如此，jQuery仍然是很...
Unit2　Thisismysister第三课时　SectionA(GrammarFocus­3c).ppt
11-28
例如，"that"变为"those"，"he"变为"they"，"it"依旧为"it"（因为复数形式不变），"day"变为"days"，"is"变为"are"，"key"变为"keys"，"sister"变为"sisters"，"family"变为"families"，"orange"变为"oranges"，...
SAP BO最佳实战.pdf
06-05
SAP BO（BusinessObjects）...文档中提供的信息也适用于SDN Community Day和SAP TechED Las Vegas等场合的分享，虽然信息可能会随着版本更新和技术发展而改变，但这些知识点依旧提供了理解和实施SAP BO系统的重要基础。
福建省福州市2014高考英语一轮 完形填空练习题（2）
08-19
然而，得知这一消息后，老者依旧保持着原有的生活习惯，每天去市区乞讨。 文章通过这个故事强调了一个重要的知识点：对于个人兴趣和热情的坚守。老者尽管已经积累了财富，但他并未改变自己的生活方式，每天依然坚持...
免费下载jdk1.8和eclipse软件，附带说明。
04-03
2，配置依旧如博客Day001配置jdk17一样，之后进行测试是否成功【有问题的可以评论区发问】 大家是不是有疑问，为啥jdk17有不好的地方，而我们博客Day001却还要去下载呢？原因是因为一点进去官网就可以下载---不用...
HTML 揭秘：HTML 编码快速入门
m0_53117341的博客
09-09 1241
HTML 揭秘：HTML 编码快速入门一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键五 . 基础标签5.1 字体标签5.1.1 color 属性5.1.2 size 属性5.1.3 face 属性5.2 i 标签、b 标签5.3 hr 标签5.4 br 标签5.5 center 标签5.6 练习5.
HTML、CSS实现树状图
p_s_p的博客
09-09 579
【代码】HTML、CSS实现树状图。
【HTML】Html标签
千里之行，始于足下
09-12 1060
文本标签、表格标签、表单标签、列表标签、媒体标签、特殊字符、转义字符
Openlayers 报错记录 Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘:
Liszter
09-12 513
原因是引用的图层得配置跨域问题。这是浏览器对canvas 设置的导出安全策略。每个引用的图层添加一个。即可、、、 不用谢、、
《HTML 与 CSS—— 响应式设计》
weixin_47266126的博客
09-11 1130
HTML 和 CSS 在响应式设计中起着至关重要的作用。通过使用语义化标签、响应式图像、媒体查询、弹性布局和响应式网格系统等技术，可以实现网页在不同设备上的自适应显示，提供良好的用户体验。在进行响应式设计时，要遵循移动优先设计、内容优先和测试优化等最佳实践，不断提高网页的质量和性能。随着移动设备的普及和技术的不断发展，响应式设计将变得越来越重要，开发者需要不断学习和掌握新的技术和方法，以满足用户的需求。
reader-lm：小模型 html转markdown
最新发布
weixin_42357472的博客
09-12 390
输入网址：https://www.galaxy-geely.com/E5。
Requests-HTML模块怎样安装和使用？
2301_79698214的博客
09-11 673
上述代码中，首先创建了一个HTMLSession对象，然后使用get()方法发送GET请求，获取网页的HTML内容。最后，使用response.html.text属性获取HTML文本，并将其打印输出。以上就是使用Requests-HTML模块的基本步骤。在Python脚本中导入Requests-HTML模块。使用Requests-HTML模块发送HTTP请求和解析HTML内容。使用pip命令安装Requests-HTML模块。系统会自动下载并安装Requests-HTML模块及其依赖项。
甘特图组件DHTMLX Gantt中文教程 - 如何实现持久UI状态
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
09-12 949
本文将为大家介绍在使用DHTMLX Gantt时如何实现持久UI状态，欢迎下载新版组件体验！
《实现 HTML 图片轮播效果》
qq_69304031的博客
09-11 811
在网页设计中，轮播效果是非常常见且重要的元素。它可以在有限的空间内展示多张图片或者广告，能够有效地吸引用户的注意力，提高信息展示的效率。常用于网站首页的焦点图展示、商品图片展示等场景。以下是一个简单的 HTML、CSS 和 JavaScript 实现的图片轮播代码示例。
《响应式 Web 设计：纯 HTML 和 CSS 的实现技巧》
asd4353012的博客
09-06 1819
响应式 Web 设计是现代网页设计的重要趋势，它可以确保网页在不同设备上都能提供良好的用户体验。在实现响应式 Web 设计时，需要掌握媒体查询、弹性布局、流式布局等技术，同时还需要遵循一些最佳实践，如优先考虑移动设备、保持简洁的布局、优化图像和媒体资源、使用响应式字体和提供良好的用户体验等。响应式 Web 设计可以确保网页在不同设备上都能呈现出最佳的布局和样式，满足用户的需求。在实现响应式 Web 设计后，需要在不同的设备上进行测试，确保网页在各种设备上都能正常显示和交互。可以使用响应式字体技术，如。
requests-html的具体使用方法有哪些？
2301_79698214的博客
09-12 632
requests-html库还支持使用XPath表达式来查找元素，提供了丰富的功能来满足各种网页数据抓取和分析的需求‌。‌：通过pip安装requests-html库，命令为。‌：通过继续跟踪网页中的链接，可以获取到更多相关内容。
【HTML】HTML页面和常见标签
Yeeear的博客
09-12 5466
什么是前端？HTML页面的编写、如何快速生成代码框架、常见标签（注释标签、标题标签、段落标签、换行标签、格式化标签）
javaWeb三剑客：html,css
2301_80112070的博客
09-09 1407
**注意布局标签的使用可以配合CSS来使用，如果只需要某一个方位的边框·内边距·外边距，可以在属性名后加上 -位置 ，如 ：padding-top , padding-left , padding-right。rgb表示法：红绿蓝三原色，每项取值范围：0~255 rgb(红，绿，蓝) ， rgb(0,0,0) , rgb(255,255,255) , rgb(255,0,0)">焦点访谈：中国底气 新思想夯实大国粮仓</h1><h1 style="***：***，***：***;
XWiki中添加 html 二次编辑失效
galoiszhou的博客
09-12 356
使用 XWiki 中的 HTML 宏：如果标准的 Markdown 语法和 XWiki 的链接语法都无法工作，可以考虑使用 HTML 宏，它可以让你在 XWiki 页面中插入纯 HTML 代码，而不会被自动转换回 Markdown。如果直接在 XWiki 中添加 html, 例如 修改颜色, 新窗口打开主页面等功能, 首次保存是生效的. 如果再次编辑, 则失效, 原因是被转换成了 Markdown 的代码, 而 Markdown 不支持.解决这个问题可以使用 HTML 宏.
DAY_OF_WEEK,
03-28
通常，星期几用数字表示，例如1表示星期一，2表示星期二，以此类推。 以下是一个示例，展示了如何使用DAY_OF_WEEK函数获取给定日期的星期几： ```python import datetime def get_day_of_week(date): # 将日期...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值