【前端】HTML笔记（3）

最新推荐文章于 2024-07-12 16:55:56 发布
最新推荐文章于 2024-07-12 16:55:56 发布
阅读量97 收藏
点赞数 4
分类专栏： HTML 文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61731785/article/details/125914188
版权

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <table border="1" width="400" height="50%" bordercolor="green" bgcolor="yellow"
           background="/images/test.png" cellpadding="5" cellspacing="5">
        <!--bgcolor为整个表格或仅为一个单元格设置背景颜色,background为整个表设置背景图像或仅为一个单元设置背景图像,
            bordercolor设置边框颜色,cellspacing定义单元格之间的空间,cellpadding表示单元格大小-->
        <!--<thead>创建单独的表头,<tbody>表示表格的主体,<tfoot>创建一个单独的表页脚-->
        <!--border为0则无边框-->
        <caption>标题</caption>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th><!--表头单元格-->
        </tr>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
            <td rowspan="2">Row 1 Cell 1</td><!--合并两行或更多行-->
            <td colspan="3">Row 3 Cell 1</td><!--两个或多个列合并为一个列-->
        </tr>
    </table>

    <ul style="list-style-type:disc" style="list-style-type:circle" style="list-style-type:square">
        <!--圆、圈、方-->
        <li>咖啡</li>
        <li>茶</li>
        <li>牛奶</li>
    </ul><!--无序列表-->

    <ol start="50" type="A" type="a" type="I" type="i">
        <li>咖啡</li>
        <li>茶</li>
        <li>牛奶</li>
    </ol><!--有序列表-->

    <dl>
        <dt>Coffee</dt>
        <dd>- black hot drink</dd><!--定义-->
        <dt>Milk</dt>
        <dd>- white cold drink</dd>
    </dl><!--自定义列表-->

    <p>
        我有一双<span style="color:gold">金色</span> 的
        <span style="font-size:50px">大眼睛</span>。
    </p><!--内联元素，可用作文本的容器-->

    <div style="color:#00FFFF">
        <h3>这是一个在 div 元素中的标题。</h3>
        <p>这是一个在 div 元素中的文本。</p>
    </div><!--块级元素，它是可用于组合其他 HTML 元素的容器-->

    <div id="container" style="width:800px">
        <div id="header" style="background-color:#FFA500;">
            <h1 style="margin-bottom:0;">网页的主标题</h1>
        </div>
        <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
            <b>Menu</b><br>
            HTML<br>
            CSS<br>
            JavaScript
        </div>
        <div id="content" style="background-color:#EEEEEE;height:200px;width:700px;float:left;">
            内容就在这里
        </div>
        <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
            Copyright © w3cschool.cn
        </div>
    </div><!--使用 <div> 元素添加布局-->

    <table width="500" border="0">
        <tr>
            <td colspan="2" style="background-color:#FFA500;">
                <h1>网页的主标题</h1>
            </td>
        </tr>
        <tr>
            <td style="background-color:#FFD700;width:100px;">
                <b>Menu</b><br>
                HTML<br>
                CSS<br>
                JavaScript
            </td>
            <td style="background-color:#eeeeee;height:200px;width:400px;">
                内容就在这里
            </td>
        </tr>
        <tr>
            <td colspan="2" style="background-color:#FFA500;text-align:center;">
                Copyright  © w3cschool.cn
            </td>
        </tr>
    </table><!--使用 <table> 元素添加布局-->

</body>
</html>

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <table border="1" width="400" height="50%" bordercolor="green" bgcolor="yellow"
           background="/images/test.png" cellpadding="5" cellspacing="5">
        <!--bgcolor为整个表格或仅为一个单元格设置背景颜色,background为整个表设置背景图像或仅为一个单元设置背景图像,
            bordercolor设置边框颜色,cellspacing定义单元格之间的空间,cellpadding表示单元格大小-->
        <!--<thead>创建单独的表头,<tbody>表示表格的主体,<tfoot>创建一个单独的表页脚-->
        <!--border为0则无边框-->
        <caption>标题</caption>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th><!--表头单元格-->
        </tr>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
            <td rowspan="2">Row 1 Cell 1</td><!--合并两行或更多行-->
            <td colspan="3">Row 3 Cell 1</td><!--两个或多个列合并为一个列-->
        </tr>
    </table>

    <ul style="list-style-type:disc" style="list-style-type:circle" style="list-style-type:square">
        <!--圆、圈、方-->
        <li>咖啡</li>
        <li>茶</li>
        <li>牛奶</li>
    </ul><!--无序列表-->

    <ol start="50" type="A" type="a" type="I" type="i">
        <li>咖啡</li>
        <li>茶</li>
        <li>牛奶</li>
    </ol><!--有序列表-->

    <dl>
        <dt>Coffee</dt>
        <dd>- black hot drink</dd><!--定义-->
        <dt>Milk</dt>
        <dd>- white cold drink</dd>
    </dl><!--自定义列表-->

    <p>
        我有一双<span style="color:gold">金色</span> 的
        <span style="font-size:50px">大眼睛</span>。
    </p><!--内联元素，可用作文本的容器-->

    <div style="color:#00FFFF">
        <h3>这是一个在 div 元素中的标题。</h3>
        <p>这是一个在 div 元素中的文本。</p>
    </div><!--块级元素，它是可用于组合其他 HTML 元素的容器-->

    <div id="container" style="width:800px">
        <div id="header" style="background-color:#FFA500;">
            <h1 style="margin-bottom:0;">网页的主标题</h1>
        </div>
        <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
            <b>Menu</b><br>
            HTML<br>
            CSS<br>
            JavaScript
        </div>
        <div id="content" style="background-color:#EEEEEE;height:200px;width:700px;float:left;">
            内容就在这里
        </div>
        <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
            Copyright © w3cschool.cn
        </div>
    </div><!--使用 <div> 元素添加布局-->

    <table width="500" border="0">
        <tr>
            <td colspan="2" style="background-color:#FFA500;">
                <h1>网页的主标题</h1>
            </td>
        </tr>
        <tr>
            <td style="background-color:#FFD700;width:100px;">
                <b>Menu</b><br>
                HTML<br>
                CSS<br>
                JavaScript
            </td>
            <td style="background-color:#eeeeee;height:200px;width:400px;">
                内容就在这里
            </td>
        </tr>
        <tr>
            <td colspan="2" style="background-color:#FFA500;text-align:center;">
                Copyright  © w3cschool.cn
            </td>
        </tr>
    </table><!--使用 <table> 元素添加布局-->

</body>
</html>

足足一米58
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html列表，区块以及布局知识点
weixin_53060283的博客
03-20 372
Html列表 关于HTML的列表应用分为无序列表和有序列表 无序： <h4>无序列表:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> 有序： <ol> <li>Coffee</li> <li>Tea</li&g...
HTM 分布div
qq_34028001的博客
02-01 264
文章目录一、HTML div 和 span1. HTML div 元素2. HTML span 元素二、HTML 布局 一、HTML div 和 span 大多数 HTML 元素被定义为块级元素或内联元素。 HTML区块元素 块级元素在浏览器显示时，通常会以新行来开始（和结束）。 实例: <h1>, <p>, <ul>, <table>,<di...
26、HTML 区块
you can you up up up的博客
10-31 215
HTML <div> 和<span> HTML 可以通过 <div> 和 <span>将元素组合起来。 HTML 区块元素 大多数 HTML 元素被定义为块级元素或内联元素。 块级元素在浏览器显示时，通常会以新行来开始（和结束）。 实例: <h1>, <p>, <ul>, <table> HTML 内联元素 内联元素在显示时通常不会以新行开始。 实例: <b>, <td>, <a&g
黑马前端HTML笔记
bui ~
02-17 1285
快捷键 (1)！+tab 网页骨架（任何标签+tab =成对标签语言) ​ (2)注释的快捷键：ctrl+/ ​ (3) ctrl+d 选中相中的字符或者元素 ​ (4) 选中段落缩进 tab ，往前shift+tab ​ (5) 查看自动换行 alt+z htm标签 关系：父子（嵌套关系）、兄弟（并列关系） 图片属性： src （路径） alt（图片加载不出来的替换文字） title（鼠标悬停得到的文字） height(
Web前端学习笔记
DAOkonglong的博客
10-16 3437
Web前端学习
前端笔记汇总
西楼的博客
01-06 4879
目录 目录 前端基础 HTML 1.基本标签 2.页面结构分析 3.高级标签 CSS 1.基础知识 2.美化网页 JS 1.基础知识 2.数据类型详解 3.函数 4.面向对象编程 5.操作BOM对象(重点) 6.操作DOM对象(重点） 7.操作form表单 8. jQuery 9.总结 前端基础 课程听的是b站狂神说：狂神说 笔记有些是借鉴：夜里的雨 HTML 1.基本标签 <!DOCTYPE html> <html...
黑马前端学习笔记
qq_40437045的博客
03-10 1496
​​​​​​HTML第一天 一、网页 二、什么是HTML 三、HTML标签 CSS第一天 一、CSS 简介 二、 CSS 基础选择器 三、CSS 字体属性 四、CSS 文本属性 五、CSS 的引入方式 HTML第一天 网页 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页， 常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 网页生成制作: 有前端人员书写 HTML 文件, 然后浏览器打开,就能看到了网页..
黑马程序员学web前端HTML学习笔记
Wddym的博客
05-04 815
学习笔记
Web前端开发学习笔记
qq_41622776的博客
02-02 1708
自学笔记，仅供参考
前端笔记大全——HTML
qq_34820605的博客
12-01 427
HTML笔记大全 HTML基础知识 HTML常用标签
html+css学习笔记 前端 CSS html
11-02
学习了一个月的前端笔记
javaweb 前端 html学习笔记
04-26
javaweb 前端 html学习笔记
前端技术HTML基础笔记
06-07
NEUQ技术部前端HTML基础笔记
html+css前端学习笔记.zip
01-01
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
HTML前端笔记html.md
04-10
HTML前端笔记html.md
OpenSNN推文：近期优质博客推荐汇总
最新发布
opensnn的博客
07-12 304
国内个人博客站点众多，涵盖了技术、生活、艺术等多个领域。
前端技术学习记录-基础知识（二）JavaScript基本语法
adanjeep的博客
07-11 206
/ 声明一个String类型的变量name name = "Alice";// 初始化变量name int age;// 声明一个int类型的变量age age = 25;// 初始化变量age。静态强类型：Java语言，在申明变量时，需要明确定于变量的类型。对明确申明的变量，需要做强制转换，才会发生变化，否则不变。//数字 a = "hahaha";//字符串 </script>动态弱类型语言：变量可以存放在不同类型的值（动态）=== 比较相等（不会进行隐式类型转换）>>> 无符号右移（逻辑右移）
如何搭建互联网医院系统源码？医疗陪诊APP开发实战详解
meihusdk的博客
07-11 278
希望本文能够为正在或即将从事相关开发的技术人员提供一些参考和帮助。通过不断的努力和创新，我们可以为患者提供更优质的医疗服务，推动医疗行业的数字化转型。
微信小程序开发笔记之”表单读不出数据“解决指南
qq_46396470的博客
07-12 310
脑瓜子好了后，忘记了表单控件必须要加上。提交后打印的字典是空的，卡了十几分钟。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

足足一米58

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值