HTML+CSS基础 第二季课堂笔记

news2024/12/25 2:16:32

一、列表

列表都不是单打独斗的,通常都是一组标签组成

1 无序列表

作用:定义一个没有顺序的列表结构

由两个标签组成,ul(容器级标签),li(容器级)

ul:英文ulordered list(无序列表)

li:英文list item(列表项)

无序列表的基本使用

<h2>古典四大名著</h2>
<ul>
    <li>三国演义</li>
    <li>西游记</li>
    <li>红楼梦</li>
    <li>水浒传</li>
</ul>

需要注意的是,ul内部嵌套li,它们是父子关系。

规定:ul标签的内部必须只能嵌套lili标签的内部可以嵌套任何标签,甚至是ul

下面的写法是错误的,因为ul标签的内部不能嵌套除了li标签以外的其他标签

<ul>
    <p>
        西游记
    </p>
    <p>
        三国演义
    </p>
</ul>

列表的拓展,li标签内部可以继续嵌套列表结构

<h2>四大名著</h2>
<ul>
    <li>
        <h3>西游记</h3>
        <ul>
            <li>唐僧</li>
            <li>孙悟空</li>
            <li>猪八戒</li>
            <li>沙悟净</li>
        </ul>
    </li>
    <li>
        <h3>水浒传</h3>
        <ul>
            <li>宋江</li>
            <li>武松</li>
            <li>林冲</li>
            <li>卢俊义</li>
        </ul>
    </li>
    <li>
        <h3>红楼梦</h3>
        <ul>
            <li>林黛玉</li>
            <li>薛宝钗</li>
            <li>王熙凤</li>
            <li>贾宝玉</li>
        </ul>
    </li>
    <li>
        <h3>三国演义</h3>
        <ul>
            <li>刘备</li>
            <li>曹操</li>
            <li>孙权</li>
            <li>张飞</li>
        </ul>
    </li>

 

无序列表项之间没有先后顺序之分的

列表项之前的前缀样式是有CSS去控制的,目前只负责结构的搭建就可以了

2 有序列表

作用:定义一个有序列表的列表结构

需要有两个标签组成ol,li

ol:英文ordered list(有序列表)

li:英文list item(列表项)

需要注意的是,ol内部嵌套li,它们是父子关系。

规定:ul标签的内部必须只能嵌套lili标签的内部可以嵌套任何标签,甚至是ul

基本使用

<h2>三年级排名情况</h2>
<ol>
    <li>三年级2班</li>
    <li>三年级1班</li>
    <li>三年级2班</li>
</ol>

ol标签的嵌套

<h2>三年级期末考试排名</h2>
<ol>
    <li>
        <h3>三年级2班</h3>
        <ol>
            <li>王同学</li>
            <li>张同学</li>
            <li>李同学</li>
        </ol>
    </li>
    <li>
        <h3>三年级1班</h3>
        <ol>
            <li>樊同学</li>
            <li>周同学</li>
            <li>孟同学</li>
        </ol>
    </li>
    <li>
        <h3>三年级3班</h3>
        <ol>
            <li>刘同学</li>
            <li>赵同学</li>
            <li>李同学</li>
        </ol>
    </li>
</ol>

我们看得出来ol和ul的最大区别就是使用场景,一个是有序,一个是无序

我们看一下企业中无序列表标签的使用场景

比如腾讯网

有序列表的使用场景,更多的是用来有排行的网页布局,比如九酷音乐排行

3 定义列表

  1. 作用:定义一个标题和内容自定义的列表结构
  2. 由三个标签组成,dl,dt,dd

dl英文:definition list 表示创建一个自定义列表结构

dt英文:definition term定义主题或者定义术语,表示一个列表的主题

dd英文:definition description 定义解释项,表示解释和说明前面的主题内容

dl内部只能存放dt和dd,dt和dd是同级关系

基本使用:

<h2>国内女明星</h2>
<dl>
    <dt>杨幂</dt>
    <dd>作品:《三生三世》、《宫》、《仙剑奇侠传》等</dd>

    <dt>赵丽颖</dt>
    <dd>作品:《花千骨》、《楚乔传》、《陆贞传奇》等</dd>

    <dt>刘诗诗</dt>
    <dd>作品:《步步惊心》、《仙剑奇侠传》、《女医明妃传》等</dd>
</dl>

   3.每个dt主题的后面可以跟0-多个解释的dd,每个dd解释的就是上一个最近的dt

<dl>
    <dt>杨幂</dt>
    <dd>作品:《三生三世》、《宫》、《仙剑奇侠传》等</dd>
    <dd>家庭:小糯米</dd>
    <dd>迪丽热巴</dd>

    <dt>赵丽颖</dt>
    <dd>作品:《花千骨》、《楚乔传》、《陆贞传奇》等</dd>
    <dd>家庭:冯绍峰</dd>

    <dt>刘诗诗</dt>
    <dd>作品:《步步惊心》、《仙剑奇侠传》、《女医明妃传》等</dd>
    <dd>家庭:吴奇隆</dd>
</dl>

      4.dt和dd都是容器级标签,内部可以存放任意内容

<dl>
    <dt>杨幂</dt>
    <dd>
        <p>作品:《三生三世》、《宫》、《仙剑奇侠传》等</p>
        <p>家庭:小糯米</p>
        <p>工作室:迪丽热巴</p>
    </dd>

    <dt>赵丽颖</dt>
    <dd>
        <p>作品:《花千骨》、《楚乔传》、《陆贞传奇》等</p>
        <p>家庭:冯绍峰</p>
    </dd>

    <dt>刘诗诗</dt>
    <dd>
        <p>作品:《步步惊心》、《仙剑奇侠传》、《女医明妃传》等</p>
        <p>家庭:冯绍峰</p>
    </dd>
</dl>

定义列表的使用场景

我们通过查看京东网站的源码之后发现,dl、dt和dd都是一套标签组成,一个页面有多个dl并不是一个dl内部嵌套多个dt和dd,原因是因为这样会方便搭建布局

下面的定义列表结构是工作中常用的

<dl>
    <dt>杨幂</dt>
    <dd>
        <p>作品:《三生三世》、《宫》、《仙剑奇侠传》等</p>
        <p>家庭:小糯米</p>
        <p>工作室:迪丽热巴</p>
    </dd>
</dl>
<dl>
    <dt>赵丽颖</dt>
    <dd>
        <p>作品:《花千骨》、《楚乔传》、《陆贞传奇》等</p>
        <p>家庭:冯绍峰</p>
    </dd>
</dl>
<dl>
    <dt>刘诗诗</dt>
    <dd>
        <p>作品:《步步惊心》、《仙剑奇侠传》、《女医明妃传》等</p>
        <p>家庭:冯绍峰</p>
    </dd>
</dl>

二、表格

  1. 表格基础

表格主要有三个标签组成

table英文:table,作用是定义了一个表格的结构

tr英文是table rows作用定义了表格的行

td英文是table dock作用是定义表格的单元格

关系:table>tr>td

案例:三行四列表格

<table border="1" style="border-collapse:collapse">
    <tr>
        <td>第1行,第1列</td>
        <td>第1行,第2列</td>
        <td>第1行,第3列</td>
        <td>第1行,第4列</td>
    </tr>
    <tr>
        <td>第2行,第1列</td>
        <td>第2行,第2列</td>
        <td>第2行,第3列</td>
        <td>第2行,第4列</td>
    </tr>
    <tr>
        <td>第3行,第1列</td>
        <td>第3行,第2列</td>
        <td>第3行,第3列</td>
        <td>第3行,第4列</td>
    </tr>
</table>

table标签上有两个属性,一个是border=“1”,这个属性是用来设置表格的边框的,如果没有这个属性,边框不显示,第二个属性style="border-collapse:collapse"是css样式,作用就是合并表格

如果表格需要设置表头,可以使用tr>th设置

<tr>
     <th>第1列</th>
     <th>第2列</th>
     <th>第3列</th>
     <th>第5列</th>
</tr>

2 单元格合并

一部分单元格需要进行跨行跨列合并,可以给对应的td和th标签设置相关属性

rowspan: 上下跨行合并

colspan:左右跨列合并

属性值是数字,数字是几就代表跨几行或者跨几列

步骤:

  1. 确定一行有多少td
  2. 然后我们再看一共有几行
  3. 观察哪个单元格有合并,设置对应属性

案例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<table border="1" style="border-collapse: collapse;">

    <tr>

        <td colspan="2">1</td>

        <td rowspan="2">2</td>

        <td colspan="3">3</td>

        <td>4</td>

    </tr>

    <tr>

        <td rowspan="2">5</td>

        <td>6</td>

        <td>7</td>

        <td>8</td>

        <td  rowspan="2">9</td>

        <td>10</td>

    </tr>

    <tr>

        <td rowspan="2">11</td>

        <td>12</td>

        <td colspan="2">13</td>

        <td rowspan="2">14</td>

    </tr>

    <tr>

        <td>15</td>

        <td>16</td>

        <td>17</td>

        <td colspan="2">18</td>

    </tr>

</table>

3 表格分区

一个完整的表格主要包含三个部分:表格标题、表格表头、表格的主体

一个table内部实际还有三个分区标签组成

caption: 定义表格的主题

thead: 定义表格的头部,内部嵌套tr>th

tbody: 定义表格主体,内部嵌套tr>td

<table border="1">

    <!-- 主题分区 -->

    <caption>各地区资产投资情况</caption>

    <!-- 表头分区 -->

    <thead>

        <tr>

            <th rowspan="2">地区</th>

            <th colspan="2">按总量分</th>

            <th colspan="2">按比重分</th>

        </tr>

        <tr>

            <th>自年初累计(亿元)</th>

            <th>去年同期增长(%)</th>

            <th>自年初累计(%)</th>

            <th>自年同期(%)</th>

        </tr>

    </thead>

    <!-- 主体分区 -->

    <tbody>

        <tr>

            <td>全国</td>

            <td>234234</td>

            <td>9.8</td>

            <td>100.0</td>

            <td>100.0</td>

        </tr>

        <tr>

            <td>全国</td>

            <td>234234</td>

            <td>9.8</td>

            <td>100.0</td>

            <td>100.0</td>

        </tr>

        <tr>

            <td>全国</td>

            <td>234234</td>

            <td>9.8</td>

            <td>100.0</td>

            <td>100.0</td>

        </tr>

        <tr>

            <td>全国</td>

            <td>234234</td>

            <td>9.8</td>

            <td>100.0</td>

            <td>100.0</td>

        </tr>

        <tr>

            <td>全国</td>

            <td>234234</td>

            <td>9.8</td>

            <td>100.0</td>

            <td>100.0</td>

        </tr>

    </tbody>

</table>

三、表单元素

  • 表单元素是网页中提供给用户进行点击或者输入的控件

1 form标签

form是表单的意思

form是容器级标签,内部存放可输入的控件。如果输入的表单需要提交到数据,所有的控件需要被form表单包裹

method:方法的意思,指的数据提交的方法,属性值是post和get

action:是数据提交的位置

2 input标签

input标签是输入框的一种,但是不仅仅只有输入框,通过type属性,可以拓展多功能

input的type属性非常丰富

2.1 输入框

输入框有两个重要属性,一个是value,一个placeholder

value:设置默认显示的内容,属性值为自定义内容

placeholder: 属性作用是如果没有value的时候提示用户的文字占位符

<input type="text" placeholder="请输入用户名">

2.2 密码框

通过type值为password设置的

显示效果是输入后通过掩码形式显示的

<input type="password" placeholder="请输入密码">

2.3 单选框

通过type值为radio设置的

单选按钮都是成组出现的

要想实现一组单选按钮的互斥,需要设置相同的name属性

<p>

    性&nbsp;别:

    <input type="radio" name='sex'>男

    <input type="radio" name='sex'>女

    <input type="radio" name='sex'>保密

</p>

2.4 复选框

也叫多选框,通过type值为checkbox设置

复选框可以通过对自身进行多次点击实现选择或者取消

多选框可以选择一个或者多个,建议同一组设置同样的name属性

<p>

    爱&nbsp;好:

    <input type="checkbox" name="hobby"> 运动

    <input type="checkbox" name="hobby"> 绘画

    <input type="checkbox" name="hobby"> 音乐

    <input type="checkbox" name="hobby"> 阅读

    <input type="checkbox" name="hobby"> 其他

</p>

单选框和多选框都有一个默认被选择的功能,需要给input标签添加一个checked="checked"

<p>

            性&nbsp;别:

            <input type="radio" name='sex' checked="checked">男

            <input type="radio" name='sex'>女

            <input type="radio" name='sex'>保密

        </p>

        <p>

            爱&nbsp;好:

            <input type="checkbox" name="hobby"> 运动

            <input type="checkbox" name="hobby" checked="checked"> 绘画

            <input type="checkbox" name="hobby"> 音乐

            <input type="checkbox" name="hobby"> 阅读

            <input type="checkbox" name="hobby"> 其他

        </p>

现在有一个现象就是如果点击文字是不能触发对应单选或者多选框的点击事件的,所以需要label标签去扩大触发范围

<label>

    <input type="radio" name='sex' checked="checked">男

</label>

2.5 文本域

标签是textarea

我们之前学习的input的单行输入框,只能输入单行文本,如果需要使用多行文本,就使用textarea标签

textarea是一个双标签,是文本级标签

属性值rows和cols

rows:定义文本域的可视区域有几行,单位是数字

cols:当前行显示的字节数量(以英文为准),单位师数字

placeholder:占位符

我们发现textarea默认是可以通过拖动右下角实现放大或者缩小文本域的,如果我们不希望缩放文本域

我们可以通过设置style性的resize属性,值为none,去掉可拖拽区域

<textarea rows="4s" cols="50"  placeholder="请输入自我介绍" style="resize:none"></textarea>

2.6 下拉菜单

需要一组标签进行制作

需要两个标签select和option

select英文就是选择的意思,表示搭建下拉项

option英文是选项的意思,表示搭建下拉项

关系:select>option

<select>

    <option>北京</option>

    <option>上海</option>

    <option>广州</option>

    <option>深圳</option>

</select>

现在默认的第一个是显示,并不是被选中的,如果希望有默认被选中想,使用selected属性,值也是selected

<select>

    <option>北京</option>

    <option>上海</option>

    <option selected="selected">广州</option>

    <option>深圳</option>

</select>

四、HTML注释

在代码中有一些特殊结构,特点是在编辑器能看到,在浏览器中看不到,这种结构叫做注释,特点是浏览器不加载

注释主要有两个作用

第一个是用来注解代码,添加合理的解释,从而实现对代码的可读性

<!-- 头部部分 -->

<div class="header">

    <!-- 导航 -->

    <div class="nav">

        <!-- logo内容 -->

        <div class="logo"></div>

    </div>

</div>

<!-- 内容部分 -->

<div clsss="content"></div>

<!-- 底部部分 -->

<div class="footers"></div>

语法 <!-- 被注释的内容 -->

快捷键ctrl+/

第二个作用:先注释掉一部分不使用的代码,便于后期恢复

我们多用于代码调试

五、字符实体

w3c手册:https://www.w3school.com.cn/html/html_entities.asp

在网页中普通文字部分,在键盘中是打不出来的,比如我们的版权符号,商标符号等等。还有一种场景就是替代字符,HTML会识别一部分字符

比如下面的场景

<div>

    好开心啊,今天老师带我们学习了<h1>标签的作用

</div>

我们发现浏览器会识别文本中的<h1>单独标签进行加载了

解决办法,利用字符实体进行转换

<div>

        好开心啊,今天老师带我们学习了&lt;h1>标签的作用

 </div>

字符实体的规定是以&符号开头‘;’结尾

罗列常用的字符实体

&nbsp;

实体空格

小于号

&lt;

大于号

&gt;

版权符号

&copy;

注册商标

&reg;

引号

&quot;

和号

&amp;

  • div和span

div和span都是常用的布局标签,俗称盒子

div:分割跨度大跨度

div是容器级标签,双标签

span:小区域小跨度

作用是用来分割页面的布局,div指的是跨度布局分割,span是文字分割

HTML+CSS又叫做div+CSS

div主要作用是进行网页布局的拆分,没有明确的语义

span标签的作用是一个极限小,只适用于文字的跨度划分

<p>

        今天一共收入 <span style="color:red;">300</span> 元

  </p>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2181463.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

828华为云征文 | 华为云Flexus云服务器X实例搭建企业内部VPN私有隧道,以实现安全远程办公

VPN虚拟专用网络适用于企业内部人员流动频繁和远程办公的情况&#xff0c;出差员工或在家办公的员工利用当地ISP就可以和企业的VPN网关建立私有的隧道连接。 通过拨入当地的ISP进入Internet再连接企业的VPN网关&#xff0c;在用户和VPN网关之间建立一个安全的“隧道”&#xff…

探索顶级低代码开发平台,实现创新

文章盘点ZohoCreator、OutSystems等10款顶尖低代码开发平台&#xff0c;各平台以快速开发、集成、数据安全等为主要特点&#xff0c;适用于不同企业需求&#xff0c;助力数字化转型。 一、Zoho Creator Zoho Creator 是一个低代码开发平台&#xff0c;它简化了应用开发中的复杂…

解决MySQL命令行中出现乱码问题

在MySQL命令行中遇到乱码问题通常是由于字符编码设置不正确导致的。以下是一些解决步骤&#xff1a; 1. **检查和设置字符集**&#xff1a; 首先&#xff0c;您需要确保MySQL服务器、客户端和数据库使用的是正确的字符集。您可以通过执行以下命令来查看当前的字符集设置&…

领英(LinkedIn)高效开发国外客户的6个技巧

社媒开发客户大家现在用的都挺多&#xff0c;每个社媒平台都有自己的特点&#xff0c;领英&#xff08;LinkedIn&#xff09;因为他特殊的职场定位&#xff0c;这上面有非常多的大客户&#xff0c;适合做B端的外贸企业&#xff0c;今天就来给大家分享一下如何利用领英高效开发国…

【无人机设计与控制】Multi-UAV|多无人机多场景路径规划算法MATLAB

摘要 本研究探讨了多无人机路径规划问题&#xff0c;提出了三种不同算法的对比分析&#xff0c;包括粒子群优化&#xff08;PSO&#xff09;、灰狼优化&#xff08;GWO&#xff09;和鲸鱼优化算法&#xff08;WOA&#xff09;。利用MATLAB实现了多场景仿真实验&#xff0c;验证…

关于 JVM 个人 NOTE

目录 1、JVM 的体系结构 2、双亲委派机制 3、堆内存调优 4、关于GC垃圾回收机制 4.1 GC中的复制算法 4.2 GC中的标记清除算法 1、JVM 的体系结构 "堆"中存在垃圾而"栈"中不存在垃圾的原因&#xff1a; 堆&#xff08;Heap&#xff09; 用途&#xff…

python-金币/打分/小理学数列3

一&#xff1a;金币 题目描述 国王将金币作为工资&#xff0c;发放给忠诚的骑士。 第一天&#xff0c;骑士收到一枚金币&#xff1b;之后两天&#xff08;第二天和第三天&#xff09;里&#xff0c;每天收到两枚金币&#xff1b;之后三天&#xff08;第四、五、六天&#xff09…

数值计算 --- 平方根倒数快速算法(下)

平方根倒数快速算法(下) --- 向Greg Walsh致敬&#xff01; 数值计算 --- 平方根倒数快速算法(上)_开根号倒数快速-CSDN博客文章浏览阅读712次&#xff0c;点赞31次&#xff0c;收藏30次。由于平方根倒数快速算法实在是太过经典&#xff0c;出于对code中magic number"0x5f…

Temu、亚马逊如何建立稳固的测评系统、避免挂单?

在跨境电商的测评与补单过程中&#xff0c;许多卖家和测评工作室常常面临由于技术环境不足导致的下单成功率低的问题。尤其是新账号在首次下单时&#xff0c;往往会遇到F号或砍单的困扰&#xff0c;进而陷入频繁购买和账号损失的恶性循环。这不仅消耗了大量时间和精力&#xff…

【真实访问】那些选择土木专业的学生,后来怎么样了?

“你会让孩子报土木专业吗&#xff1f;” 7月15日&#xff0c;澎湃新闻在微博上发起线上调研&#xff0c;截至16日12时&#xff0c;8000多人参与了投票&#xff0c;结果显示近7000人选择“不会&#xff0c;天坑专业”。短短几年时间&#xff0c;土木工程专业的报考从“香饽饽”…

Android Studio 新版本 Logcat 的使用详解

点击进入官方Logcat介绍 一个好的Android程序员要会使用AndroidStudio自带的Logcat查看日志&#xff0c;会Log定位也是查找程序bug的第一关键。同时Logcat是一个查看和处理日志消息的工具&#xff0c;它可以更快的帮助开发者调试应用程序。 步入正题&#xff0c;看图说话。 点…

如何实现Mybatis自定义插件

背景 MyBatis的插件机制&#xff0c;也可称为拦截器&#xff0c;是一种强大的扩展工具。它允许开发者在不修改MyBatis框架源代码的情况下&#xff0c;通过拦截和修改MyBatis执行过程中的行为来定制和增强功能。 MyBatis插件可以拦截四大核心组件的方法调用&#xff1a;Executor…

建筑中的文化表达与地方特色:演绎地域之魂

在浩瀚的城市风貌中&#xff0c;每一座建筑都是文化的载体&#xff0c;无声地讲述着地域的故事与精神。建筑不仅需要满足功能需求&#xff0c;更应成为文化传承与创新的舞台。本文旨在深度剖析建筑设计如何在尊重与弘扬地方文化的基础上&#xff0c;巧妙融合现代元素&#xff0…

828华为云征文|华为云 Flexus X实例之家庭娱乐中心搭建

话接上文《828华为云征文&#xff5c;华为云Flexus X实例初体验》&#xff0c;这次我们利用手头的 Flexus X 实例来搭建家庭影音中心和密码管理环境。 前置环境 为了方便小白用户甚至运维人员&#xff0c;我觉得现阶段的宝塔面板 和 1Panel 都是不错的选择。我这里以宝塔为例…

数通 1

通信&#xff1a;需要介质才能通信电话离信号塔&#xff08;基站&#xff09;越远&#xff0c;信号越弱。信号在基站之间传递。你离路由器越远&#xff0c;信号越差。一个意思 比如想传一张图片&#xff0c;这张图片就是数据载荷 网关&#xff0c;分割两个网络。路由器可以是网…

全网最详细——OpenFlow 协议分析

目录 1 OpenFlow 交换机 2 流表 3 OpenFlow 通道 4 任务描述 5 任务要求 6 任务实施 7 任务验收 1 OpenFlow 交换机 Open Flow 交换机可以分成流表和安全通道两部分。在 Open Flow协议规范中&#xff0c;控制器可以给交换机下发流表项来指导交换机处理匹配流表项的数据包…

ELK--收集日志demo

ELK--收集日志demo 安装ELK日志收集配置启动容器springboot配置测试 之前项目多实例部署的时候&#xff0c;由于请求被负载到任意节点&#xff0c;所以查看日志是开多个终端窗口。后来做了简单处理&#xff0c;将同一项目的多实例日志存入同一个文件&#xff0c;由于存在文件锁…

如何从相机的记忆棒(存储卡)中恢复丢失照片

当您意识到不小心从存储卡中删除了照片&#xff0c;或者错误地格式化了相机的记忆棒时&#xff0c;这些是您会大喊的前两个词。这是一种常见的情况&#xff0c;每个人在他们的一生中都会面临它。幸运的是&#xff0c;有一些方法可以从相机的 RAW 记忆棒&#xff08;存储卡&…

【专题总结】【一文解决】C++多继承下的构造函数执行顺序

多继承下的构造函数执行顺序 派生类构造函数执行顺序如下 ①调用基类构造函数→调用顺序按它们被继承时【从左至右】被说明的次序 ②调用子对象的构造函数→调用顺序按它们在【类中说明次序】 ③调用派生类的构造函数 【典型题1】13浙工大卷二读程序4题 【分析】下面①classC:p…

C语言指针详解与应用(不断更新)

指针简介 指针(Pointer)是C语言的一个重要知识点&#xff0c;其使用灵活、功能强大&#xff0c;是C语言的灵魂 指针与底层硬件联系紧密&#xff0c;使用指针可操作数据的地址&#xff0c;实现数据的间接访问 指针生活实例化 指针的本质是地址&#xff0c;在生活中比如你取快…