HTML笔记（补写）

最新推荐文章于 2024-10-17 06:11:29 发布
最新推荐文章于 2024-10-17 06:11:29 发布
阅读量60 收藏
点赞数
分类专栏： HTML5笔记 文章标签： html 笔记 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73895936/article/details/132908089
版权

HTML笔记（补写）

补写一：特殊符号归纳总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>特殊符号</title>
</head>
<body>
    <!-- 小于号的特殊符号&lt;   大于号的特殊符号&gt; -->
    <p>我正在学习&lt;html&gt;标签</p>
    <!-- 在网页中无论打多少个空格都只有一个，若想打印多个空格使用特殊符号&nbsp;定义空格 -->
    <p>好好学习&nbsp;&nbsp;&nbsp;天天向上</p>
    <!-- &copy;定义版权符号 -->
    <p>版权所有：&copy; 北大青鸟</p>
    <!-- &quot;定义双引号，双引号可以直接打也可以用该标签 -->
    <p>&quot;好好学习&quot;</p>
</body>
</html>

补写二：块元素和行元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
    <!-- 定义样式 -->
    <style>
        span{
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
    <!-- div是块级标签，用于页面的整体布局，span是行级标签，用于对一个段落中的局部细节进行细节处理
        块元素会换行，行元素在一行显示
    -->
    <div>人在一起交<span>聚会</span>，心在一起叫<span>团队</span></div>
    <div>我姓张，你别嚣张</div>
</body>
</html>

补写三：表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表格根据区域划分分为头部标签，主体，尾部。thead头部标签 tbody主题标签，tfoot尾部标签
        th和td，th里面的内容会默认加粗并居中
    -->
    <table border="1" cellspacing="0px" cellpadding="10px" width="400px">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>35</td>
                <td>男</td>
                <td>100</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>20</td>
                <td>男</td>
                <td>78</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>45</td>
                <td>男</td>
                <td>120</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总分：</td>
                <td colspan="3">1010</td>
            </tr>
            <tr>
                <td>均分：</td>
                <td colspan="3">210</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
</head>

<body>
    <table border="1" cellpadding="12px" cellspacing="0px" width="500px">
        <tr>
            <!-- colspn用于跨列合并 -->
            <td colspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <!-- rowspan用于合并行 -->
            <td></td>
            <td></td>
            <td rowspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <!-- 注意同时要合并列和行，先合并列再合并行 -->
            <td colspan="2" rowspan="2">1</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

</html>

补写四：表单元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>
<body>
    <!-- form标签，表单的作用是填写内容，并向服务器提交，action属性是指定的服务器地址，method是提交方式，服务器
    交互方式get和post，这里优先选择post，因为post可以提交更大的数据，默认是8MB，get最大只能提交1024字节，
    post比get更安全 -->
    <form action="" method="post">
        <p>账号：<input type="text" name="" id="" placeholder="请输入账号/手机号" required></p>
        <p>密码：<input type="password" name="" id="" placeholder="请输入密码" required></p>
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </p>
    </form>
</body>
</html>

css 笔记补写

补写一：溢出处理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 解决溢出方式一：在溢出部分的父级元素内使用overflow:hidden(溢出隐藏) */
        .box {
            border: 5px solid black;
            width: 600px;
            height: 825px;
            margin: 5px auto;
            /* overflow属性用于溢出处理，属性值包括：hidden(隐藏)，visible(溢出部分显示) ，scroll(溢出部分通过滚动条显示)
            注意：scroll再不溢出的情况下仍然会显示滚动区域，auto:自动在溢出时显示滚动条，不溢出时正常显示*/
            overflow: auto;
        }

        .content {
            background: radial-gradient(red, blue, yellow);
            width: 600px;
            height: 821px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="content">
            <img src="IMG/wxy.jfif" alt="">
        </div>
    </div>
</body>

</html>

补写二：文本溢出处理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本溢出处理</title>
    <style>
        .box {
            border: 5px solid skyblue;
            width: 150px;
            height: 30px;
            /* 溢出隐藏 */
            overflow: hidden;
            /* 文本不换行 */
            white-space: nowrap;
            /* 溢出部分显示省略号 */
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div class="box">吴宣仪（오선의、Betty Wu），1995年1月26日出生于海南省海口市，中国内地流行乐女歌手、影视演员。</div>
</body>

</html>

补写三：盒子水平垂直居中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子水平和垂直居中</title>
    <style>
        /* 方式：父级标签相对定位，子标签绝对定位，然后上、下、左、右全部设置为0px,margin设置为auto*/
        .box {
            width: 600px;
            height: 600px;
            border: 4px solid black;
            position: relative;
            box-sizing: border-box;
        }

        .a {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            box-sizing: border-box;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="a"></div>
    </div>
</body>

</html>

补写四：内嵌框架

内嵌框架（1）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            width: 100px;
            height: 200px;
            border: none;
        }

        .box {
            width: 100px;
            height: 200px;
            border: none;
        }
    </style>
</head>

<body>
    <!-- 在当前网页中嵌入其他网页，通过src属性指定其他网页的地址，scrolling=“no”表示不需要显示滚动条 -->
    <iframe scrolling="no" src="./09.表格设计.html" frameborder="0" class="one"></iframe>
    <div class="box">

    </div>
</body>

</html>

内嵌框架（2）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        iframe {
            width: 300px;
            height: 600px;
            border: none;
        }
    </style>
</head>

<body>
    <!-- 点击超链接目标页面在iframe中显示，指定target属性值为ifrname的name名称 -->
    <a href="./01.相对定位.html" target="content">相对定位</a>
    <a href="./02.绝对定位.html" target="content">绝对定位</a>
    <a href="./04.固定定位.html" target="content">固定定位</a>
    <hr>
    <iframe scrolling="no" name="content" src="./01.相对定位.html" frameborder="0"></iframe>
</body>

</html>

补写五：视频标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        video {
            width: 500px;
        }
    </style>
</head>

<body>
    <!-- controls表示数据控件 -->
    <video src="video/告白气球.mp4" controls></video>
    <video src="video/The Avengers.MP4" controls></video>
</body>

</html>

补写六：音频标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- audio的用法和video一样，loop表示循环播放 -->
    <audio src="video/一生有你-水木年华.128.mp3" controls loop></audio>
</body>

</html>

补写七：H5 新推出的结构标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <!-- 之前的布局网页全部使用的为div,然后给div定义不同的class选择器定义样式-->
    <div class="container">
        <div class="header">
            <div class="nav">导航</div>
        </div>
        <div class="main">
            <div class="aside">侧边栏</div>
            <div class="section">主体内容</div>
        </div>
        <div class="footer"></div>
    </div>
    <!--现在的定义方式-->
    <div class="container">
        <header>头部
            <nav>导航栏</nav>
        </header>
        <main>
            <aside>侧边栏</aside>
            <section>主体内容</section>
        </main>
        <footer>
            尾部
        </footer>
    </div>
</body>

</html>
玖霆
关注
专栏目录
html中写随机数,JavaScript中的随机数，HTML随机数实现方法
weixin_42356958的博客
05-30 5416
有时在网页设计过程中，需要用到随机数，对于PHP、ASP.Net等编程方法，要实现调用随机数，那相对很简单。但是，如果是静态HTML页面实现随机数调用，那么就只能使用JS的方法，即用JavaScript的编程设计了。在JavaScript中随机性经常都会使用到，但随机性也有许多种不同的类型，以及需要根据不同的应用程序选择不同的随机性。基础的随机数JavaScript中有一个内置的Math.rand...
HTML笔记
Hassanh的博客
01-20 3688
HTML初识 1.常用5大浏览器（了解） 浏览器 = 内核 + 外壳 shell 内核 = 渲染引擎(html+css) + js引擎(javascript) 浏览器 内核 IE Trident Chrome 谷歌 Webkit—>Blink FireFox 火狐 Gecko Opera欧朋 Presto Safari Webkit 2. 前端三大要素 HTML: 负责网页结构—》 有什么 （大小区域 ,图片 ,链接,音视频,文字） CSS: 负责网页样式—》
HTML+CSS学习笔记（pink老师前端课程笔记--补档）
热门推荐
Tiimmi丶的博客
10-31 1万+
开始于2021年8月3日09点59分 课程学习路线：HTML5-> CSS3->H5C3提高->项目拼优购电商网站 仅更新到H5C3提高的C3提高部分（新增选择器），忙于其他事情，暂不继续更新 文章目录HTML1. HTML标签2. HTML基本结构标签3. 网页开发工具4. 标签语义5. 特殊字符6. 表格标签7. 列表8. 表单CSS基础1. 简介2. 选择器3. 字体属性4. 文本属性5. 引入方式6. chorme调试工具CSS入门1. Emmet语法1.1 快速生成HTML结
HTML5前端笔记
weixin_44860598的博客
01-10 3150
文章目录HTML图片表格表单布局与选择器选择器权重文本属性图的使用元素浮动HTML5新增标签和属性常用新标签常用新属性新增的type属性值多媒体标签多媒体 embed多媒体 audio多媒体 videoCSS属性基本三大类型布局中的定位语义化标签笔记Div与SpanCSS基础语法内联样式与内部样式外部样式CSS颜色表示法背景样式CSS边框样式CSS文字样式CSS文本效果CSS段落样式CSS复合样式CSS选择器伪类选择器CSS继承CSS优先级CSS盒子模型box-sizingmargin使用问题margin自
HTML+CSS 学习笔记
Norman Mises 的学习笔记
07-25 9053
HTML+CSS学习笔记
千峰HTML5+CSS3学习笔记
李英俊小朋友
08-31 2629
我的千峰HTML5+CSS3学习笔记
2022最新html5+css3笔记
抗争小青年的博客
02-20 6049
博主自己学习css3+html5时所记录的笔记，以及练习的大厂项目的资料分享，希望可以帮助到大家。
html5加css3知识笔记
夏晨Season的博客
10-01 2519
1、基本格式 &amp;amp;lt;html&amp;amp;gt;//标签 &amp;amp;lt;head&amp;amp;gt;//头 &amp;amp;lt;titile&amp;amp;gt;网页设计与制作&amp;amp;lt;/titile&amp;amp;gt;//网页标题 &amp;amp;lt;/head&amp;amp;gt; &amp;amp;lt;body&amp;amp;gt
比特鹏哥C语言笔记
NEVER STOP
05-24 7189
比特鹏哥C语言笔记
mybase导入html,MyBase 7.x笔记迁移到为知笔记脚本
weixin_39907939的博客
07-04 711
前言因为myBase的本地相应速度快，目录树好看，所以在本地环境一直用myBase，而且近期升级到了7.0因为有跨平台共享的需求，所以需要云笔记因为为知笔记国产，界面简洁，便宜等原因，云笔记app选择为知因为现成的工具只支持myBase 5.x/6.x 的迁移，所以手动写了个脚本原理myBase 7.x采用所有笔记皆目录，再在目录下存放4种格式的文件来存放笔记，和myBase 5.x/6.x直接按...
自己学习html+css的详细笔记
qq_53366282的博客
05-18 1832
目录 常用符号： 6 有序列表：ol>li 6 无序列表：ul>li 7 自定义列表：dl>dt+dd 7 图片标签： 7 表格： 8 表单from： 8 CSS： 9 CSS优先级： 9 CSS选择器 10 伪类选择器： 10 CSS文本属性 11 1. 字体大小 11 2. 颜色 11 3. 加粗&倾斜 11 4. 水平垂直居中 12 5. 文本间距 12 6. 首行缩进 12 7. 文本修饰 12 8. Transform大小写 13
vue知识点最详细的笔记总结，查缺补漏必备！
空寻的博客
08-27 1487
1.初识vue 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象； root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法； root容器里的代码被称为【Vue模板】； Vue实例和容器是一一对应的； 真实开发中只有一个Vue实例，并且会配合着组件一起使用； {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性； 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新； 注意区分：js表达式 和 js代码(语句) ​ 1
JavaWeb学习笔记之HTML&CSS
MOKE_SPACE
11-06 770
1.HTML html：HyperText Markup Language-&amp;amp;amp;amp;amp;amp;gt;超文本标记语言-&amp;amp;amp;amp;amp;amp;gt;网页语言 超文本-&amp;amp;amp;amp;amp;amp;gt;超出文本的范畴，可以对文本实现更多的操作 标记-&amp;amp;amp;amp;amp;amp;gt;html所有的操作都是通过标记实现，标记就是标签，&amp;amp;amp;amp;amp
html详细笔记及练习的几个例子
weixin_52099241的博客
07-13 303
html详细笔记及简单小例子，还有一个html版简易版百度验证码表单（纯界面只能看看） 有益于复习html，查缺补漏，html5的一些新特性写进来当笔记了
基于html的大模型调试页面
abments的博客
10-11 676
基于html的大模型调试页面
HTML 标签简写及全称
最新发布
wjs2024的博客
10-17 519
和
HTml + CSS 核心笔记 （八）
2301_80115241的博客
10-13 634
结构：通栏 > 版心 > 服务（service）+ 帮助中心（help）+ 版权（copyright）文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片。结构：ol > li > i（li 是大圆，i 是小圆）标签语义化（在合适的地方使用合适的标签）Favicon 图标：网页图标，出现在。结构：通栏 > 版心 > 导航 ul。结构：.header >结构：通栏 > 版心 >样式，例如：头部、底部。banner – 圆点。：各个网页相同模块的。头部（header）底部（footer）
Chromium html＜li＞对应c++接口定义
杰克东的专栏
10-14 511
html＜li＞
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值