HTML知识点

已于 2024-03-18 10:05:48 修改
阅读量429 收藏 9
点赞数 7
分类专栏： web 文章标签： html 学习 前端
于 2024-03-14 21:43:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73701759/article/details/136722412
版权

标签的写法

<!-- 文字 -->
文字

<!-- <strong>标签用于加粗文字 -->
<strong>加粗文字</strong>

<!-- <br>标签用于换行 -->
<br>换行

<!-- <hr>标签用于插入水平线 -->
<hr>水平线

HTML基本骨架

<!-- HTML基本骨架 -->
<!-- <html>标签为HTML文档的根标签 -->
<html>
    <head>
        <!-- <title>标签用于指定文档的标题 -->
        <title></title>
    </head>
    <body>
        <!-- 网页主体 -->
        网页主体
    </body>
</html>

<!-- 快速生成HTML骨架 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta>标签用于指定文档的元数据，如字符集和视口设置等 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    geuy
</body>
</html>

标签的关系

<!-- 标签的关系 -->
<!-- 父子关系-嵌套关系 -->
<!-- <html>标签是整个HTML文档的根标签 -->
<html>
    <!-- <head>标签是<html>标签的子标签 -->
    <head></head>
    <!-- <body>标签是<html>标签的子标签 -->
    <body>
        
    </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>
    <!-- 注释就是对代码的解释和说明，其目的是让人们能够更加轻松地了解代码。注释是编写程序时，写程序的人给一个语句、程序段、函数等的解释或提示，能提高程序代码的可读性。 -->
    <!-- 在编写HTML代码时，我们经常要在一些关键代码旁做一下注释，这样做的好处很多，比如:方便理解、方便查找或方便项目组里的其他程序员了解你的代码，而且可以方便以后你对自己代码进行修改。 -->
    
    <!-- ctrl+/==注释 -->
    文字  

    <!-- 注释文字 -->
    <strong>加粗文字</strong>
</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>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    h1只能放一个<br>
    h2-h6没有字数限制<br>
    
</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>
    <P>段落标签:VNC包括VNC server 和VNC viewer两部分，本小节需要在宿主机上都进行安装。在宿主机上使用命令“dpkg -l|grep vnc”，查看是否安装VNC。如果已安装，能看到vnc4server，和xvnc4viewer的内容，如图所示。如果未安装，使用命令“apt-get install vnc4server”安装VNCserver ，使用命令“apt-get install xvnc4viewer”安装VNC viewer。</P>
    <p>第二段:VNC包括VNC server 和VNC viewer两部分，本小节需要在宿主机上都进行安装。在宿主机上使用命令“dpkg -l|grep vnc”，查看是否安装VNC。如果已安装，能看到vnc4server，和xvnc4viewer的内容，如图所示。如果未安装，使用命令“apt-get install vnc4server”安装VNCserver ，使用命令“apt-get install xvnc4viewer”安装VNC viewer。</p>
    <p>第三段:VNC包括VNC server 和VNC viewer两部分，本小节需要在宿主机上都进行安装。在宿主机上使用命令“dpkg -l|grep vnc”，查看是否安装VNC。如果已安装，能看到vnc4server，和xvnc4viewer的内容，如图所示。如果未安装，使用命令“apt-get install vnc4server”安装VNCserver ，使用命令“apt-get install xvnc4viewer”安装VNC viewer。</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>
</head>
<body>
    换行第一行<br>
    换行第二行<br>
    <h3>水平线</h3>
    <hr>
</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>
    <p>作用:为文本添加特殊格式，以突出重点。常见的文本格式:加粗、倾斜、下划线、删除线等.</p>
    标签的主要部分有:
    1.开始标签(Opening tag): 包含元素的名称(本例为 p)，被左、右角括号所包围。表示元素从这里开始或者开始起作用 -在本例中即段落由此开始。
    2.结束标签(Closing tag): 与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾- 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
    3.内容(Content):元素的内容，本例中就是所输入的文本本身。<br>
    <strong>strong 加粗</strong><br>
    <em>em 倾斜</em><br>
    <ins>ins 下划线</ins><br>
    <del>del 删除线</del><br>
    <b>b 加粗</b><br>
    <i>i 倾斜</i><br>
    <u>u 下划线</u><br>
    <s>s 删除线</s><br>
</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>
    <img src="./img/QQ截图20240124123548.png" alt="替换文本" title="提示文字" width="500" height="500">  <br>

    <img src="./img/QQ截图20240141230548.png" alt="不能显示" title="能显示" width="500" height="500">  <br>

    src制定位置和名称<br>
    img是必须属性<br>

    <h3>alt 替换文本 图片无法显示时显示的文本</h3>
    <h3>title 提示文本 鼠标悬停时显示的文本</h3>
    网速慢加载不出来显示
    
    <h3>width 图片宽度 数字,没单位</h3>
    <h3>height 图片高度 数字,没单位</h3>
    等比例缩放

</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>
    路径指的是查找文件时，从起点到终点经历的路线。<br>
    路径分类: <br>
    相对路径:从当前文件位置出发查找目标文件 <br>
    绝对路径:从盘符出发查找目标文件<br>
        Windows 电脑从盘符出发<br>
        Mac电脑从根目录出发<br>
    <h4>相对路径</h4>
    .img\QQ截图20240124123548.png
    <h4>绝对路径</h4>
    D:\file\code\learning_stage\front-end_learning\Web\img\QQ截图20240124123548.png
</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>
    <a href="https://www.baidu.com/" target="_blank">跳转到<strong>百度</strong> </a> <br>
    <a href="./img/QQ截图20240124123548.png" target="_blank">跳转到照片</a> <br>
    <a href="#">空连接</a> <br>
    target="_blank"是新窗口打开 <br>
    href属性值为"#"代表空连接"
</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>
    <audio src="./mp3/aLIEz (Live) - 瑞葵.mp3" controls > </audio>
    <audio src="./mp3/aLIEz (Live) - 瑞葵.mp3" controls loop > </audio>
    <audio src="./mp3/aLIEz (Live) - 瑞葵.mp3" controls autoplay> </audio>
    <h4>src 音频url</h4>
    <h4>content 显示音频控制面板</h4>
    <h4>loop 循环播放</h4>
    <h4>autoplay 自动播放,浏览器一般禁用</h4>
    <h5>html里面属性名与属性一样就简写为一个单词</h5>
</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>
    <video src="./videos/1688874825201_NZKoD.mp4" controls loop muted autoplay></video>
    <h4>src 视频url</h4>
    <h4>content 显示视频控制面板</h4>
    <h4>loop 循环播放</h4>
    <h4>muted 静音播放</h4>
    <h4>autoplay 自动播放,前提是有muted</h4>
    <h5>html里面属性名与属性一样就简写为一个单词</h5>
</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>
    <strong>列表:</strong> 布局内容排列整齐的内容<br>
    <h4>无序列表</h4>
    ul嵌套li,ul无序,li是列表条目<br>
    ul里只有li,li随意
    <ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
        <li>第四项</li>
        <li>第五项</li>
        <li>第六项</li>
        <li>第七项</li>
    </ul>
</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>
    <h4>有序列表</h4>
    ol嵌套li,ol无序,li是列表条目<br>
    ol里只有li,li随意
    <ol>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
        <li>第四项</li>
        <li>第五项</li>
        <li>第六项</li>
        <li>第七项</li>
    </ol>
</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>
    <p>标签: dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 /详情</p>
    <dl>
        <dt>服务中心</dt>
        <dd>申请售后</dd>
        <dd>售后政策</dd>
        <dt>线下门店</dt>
        <dd>小米之家</dd>
    </dl>
</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>
    <p>与excel类似,展示数据</p>
    table嵌套tr,tr嵌套td/th <br>
    border为表格添加边框 <br>

    <h5>table 表格</h5>
    <h5>tr 行</h5>
    <h5>th 表头单元格</h5>
    <h5>td 内容单元格</h5>

    <table border="1">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td>100</td>
            <td>199</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>60</td>
            <td>60</td>
            <td>120</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>全市第一</td>
            <td>全市第一</td>
            <td>全市第一</td>
        </tr>
    </table>
    `<br>
    <table border="2">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td>100</td>
            <td>199</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>60</td>
            <td>60</td>
            <td>120</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>全市第一</td>
            <td>全市第一</td>
            <td>全市第一</td>
        </tr>
    </table>
<br>
    <table border="3">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td>100</td>
            <td>199</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>60</td>
            <td>60</td>
            <td>120</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>全市第一</td>
            <td>全市第一</td>
            <td>全市第一</td>
        </tr>
    </table>
<br>
    <table border="4">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td>100</td>
            <td>199</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>60</td>
            <td>60</td>
            <td>120</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>全市第一</td>
            <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>
    <p>划分区域,更清晰</p>
    <h5>thead 表格头部 表格头部内容</h5>
    <h5>tbody 表格主体 主要内容区域</h5>
    <h5>tfoot 表格底部 汇总信息区域</h5>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td>100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>60</td>
                <td>60</td>
                <td>120</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>全市第一</td>
                <td>全市第一</td>
                <td>全市第一</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>
    <p>将多个单元格给合并为一个,合并同类信息</p>
    <ul>
        <li>跨行合并</li>
        <li>跨列合并</li>
    </ul>
    <strong>合并单元格的步骤:</strong>
    <ol>
        <li>明确合并的目标</li>
        <li>保留最左最上的单元格，添加属性取值是数字，表示需要合并的单元格数量
            <ul>
                <li>跨行合并，保留最上单元格，添加属性 rowspan竖着</li>
                <li>跨列合并，保留最左单元格，添加属性 colspan横着</li>
            </ul>
        </li>
        <li>删除其他单元格</li>
    </ol>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td rowspan="2">100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>60</td>
                <td>160</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="3">全市第一</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

input基本使用

<!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>                                                          
    <p>作用：收集用户信息</p>
    <h4>input</h4>
    <h5>text：文本框，单行文本</h5>
    <h5>password：密码框</h5>
    <h5>radio：单选框</h5>
    <h5>checkbox：多选框</h5>
    <h5>file：上传文件</h5>
    文本框：<input type="text"><br>
    密码框：<input type="password"><br>
    单选框：<input type="radio"><br>
    多选框：<input type="checkbox"><input type="checkbox" name="123" id="456"><br>
    上传文件：<input type="file"><br>

</body> 
</html>

input占位文本

<!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>
文本框：<input type="text" placeholder="请输入用户名"><br><br>
密码框：<input type="password" placeholder="请输入密码">
</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>
    <p>单选框 radio</p>
    <h5>name 控件名称 控件分组，同组只能选一个</h5>
    <h5>checked 默认选中 </h5>
    性别：
    <input type="radio" name="性别">男
    <input type="radio" name="性别" checked>女
</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>
    <h4>multiple，使file可以多选</h4>
    上传文件<input type="file" multiple>
</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>
    <p>默认选中：checked。</p>
    <input type="checkbox" checked >代码
    <input type="checkbox" >对象
    <input type="checkbox">游戏
</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>
    <p>标签: select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项</p>
    <p>selected加上是默认显示</p>
    城市：
    <select>
        <option>北京</option>
        <option>天津</option>
        <option>武汉</option>
        <option selected>濮阳</option>
    </select>
</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>
    <p>cols与rows长宽</p>
    <p>textarea是文本域标签：多行输入文本的表单控件。</p>
    请发表言论：<textarea cols="30" rows="10" placeholder="请输入文本"></textarea>
</body>
</html>

lable标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lable标签</title>
</head>
<body>
    <p>label：点击增大表单控制范，支持文本框、密码框、上传文件、单选、多选、下拉菜单、文本域</p>
    <ul>
        <li><p>label 标签只包裹内容，不包裹表单控件<br>设置 label 标签的 for 属性值 和表单控件的 id 属性值相同</p></li>
        <li>使用label标签包裹文字和表单控件，不需要属性</li>
    </ul>
    <p>写法一：</p>
    性别：
    <input type="radio" name="性别：" id="男"> <label for="男">男</label>
    <input type="radio" name="性别：" id="女"> <label for="女">女</label>
    <br><br>
    <p>写法二</p>
    性别：
    <label><input type="radio" name="性别">男</label>
    <label><input type="radio" name="性别">女</label>
</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>
    <p>按钮：button</p>
    type类型：<br>
    <p>form管理表单</p>
    <ul>
        <li>submit：提交按钮（默认功能）</li>
        <li>reset：重置按钮</li>
        <li>button：普通按钮</li>
    </ul>
    <button>按钮</button>
    <button type="button">button：普通按钮</button>
    <button type="reset">reset：重置按钮</button>
    <button type="submit">submit：提交按钮</button>
    <button disabled="disabled">disabled</button>
    <br><br>
    
</body>
</html>

表单区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form</title>
</head>
<body>
    <p>from：表单区域</p>
    action：发送数据的地址
    <form action="">
        账号：
        <input type="text" name="账号：" placeholder="请输入账号" >
        <button type="reset" >重置</button><br>
    </form>
    <br>
    <form action="">
        密码：
        <input type="password" name="密码：" placeholder="请输入密码" >
        <button type="reset" >重置</button>
    </form>
    
</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>
    <p>无语义布局标签作用：布局网页（划分区域，摆放内容）</p>
    <h4>div：独占一行，大盒子</h4>
    <h4>span：不换行，小盒子</h4>
    <br>
    <div>这是div1</div>
    <div>这是div2</div>
    <br>
    <span>这是span1</span>
    <span>这是span2</span>
</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>
    <p>字符实体：在网页中显示预留字符</p>
    空格=&nbsp; &nbsp; &nbsp; 代码里敲n个" "，只显示一个" " 。<br>
    小于=&lt;<br>
    大于=&gt; 这样显示标签 &lt;p&gt;
</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>
    帅哥
</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>
    从上到下,全局到局部
    <h1><a href="./葛幸蔚.html" >帅哥</a></h1> <hr>
    <p>帅哥,正在学习 <a href="#">web</a> 中的html</p>
    <img src="./img/合影.jpg" alt="合影" title="合影" width="250" height="150">
    <h2>学习经历</h2>
    <p><strong>算法+<ins>web</ins>+DAYU</strong></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>体育新闻列表</title>
</head>
<body>
    <ul>
        <li><img src="./img/体育新闻列表-中国.png" alt="" width="100" lang="100">
            <strong><h3>中国牛逼</h3></strong></li>
        <li><img src="./img/体育新闻列表-河南.png" alt="" width="100" lang="100">
            <strong><h3>河南牛逼</h3></strong></li>
        <li><img src="./img/体育新闻列表-濮阳.png" alt="" width="100" lang="100">
            <strong><h3>濮阳牛逼</h3></strong></li>
    </ul>
</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>
    <h1>注册信息</h1>
    <form>
        <h2>个人信息</h2>
        <label>姓名：</label><input type="text" name="姓名：" placeholder="请输入个人姓名"><br><br>
        <label>密码：</label><input type="password" name="密码：" placeholder="请输入密码"><br><br>
        <label>确认密码：</label><input type="password" name="确认密码：" placeholder="请确认密码"><br><br>
        性别：  <label><input type="radio" name="性别：" checked>男 </label>
                <label><input type="radio" name="性别：">女</label><br><br>
        <label>居住城市：</label>
        <select name="居住城市：">
            <option>北京</option>
            <option>上海</option>
            <option>上海</option>
            <option>深圳</option>
            <option>濮阳</option>
        </select>
        <br>
        <h2>教育经历</h2>
        <label>最高学历：</label>
        <select name="最高学历：">
            <option>博士</option>
            <option>硕士</option>
            <option>学士</option>
            <option>高中</option>
            <option>大专</option>
        </select><br><br>
        <label>学校名称：</label><input type="text" name="学校名称：" placeholder="请输入学校名称"><br><br>
        <label>所学专业：</label><input type="text" name="所学专业：" placeholder="请输入所学专业"><br><br>
        <label>在校时间：</label>
        <select name="在校起始时间">
            <option>2020</option>
            <option>2021</option>
            <option>2022</option>
            <option>2023</option>
            <option>2024</option>
        </select>
        --
        <select name="离校时间">
            <option>2022</option>
            <option>2023</option>
            <option>2024</option>
            <option>2025</option>
            <option>2026</option>
        </select>
        <br>
        <h2>工作经历</h2>
        <label>公司名称：</label><input type="text" name="公司名称：" placeholder="请输入公司名称"><br><br>
        <label>工作描述：</label><br>
        <textarea name="公司描述" placeholder="请输入公司描述"></textarea><br><br>

        <input type="checkbox" name="协议"><label>已同意并阅读以下协议：</label><br>
        <ul>
            <li><a href="#">《用户服务协议》</a></li>
            <li><a href="#">《隐私政策》</a></li>
        </ul>
        <br>
        <button type="submit">免费注册</button><button type="reset">从新填写</button>
    </form>
    <br><br><br><br>
</body>
</html>
鷇韩
关注
  • 7
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
html知识点
07-26
一、HTML知识点 1. HTML基本结构：一个HTML文档通常由<!DOCTYPE>声明、<html>根元素、头部元素和主体元素组成。<!DOCTYPE>声明指定了文档类型，中包含元数据如标题、字符集等，则包含实际的网页内容。 2. HTML标签...
HTML 知识点总结
01-02
HTML 知识点总结 HTML 知识点总结 HTML 知识点总结 HTML 知识点总结
前端之HTML知识点整理汇总(推荐)
09-28
下面小编就为大家带来一篇前端之HTML知识点整理汇总(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML知识点汇总
01-19
一、HTML基础知识；二、文字与图像；三、超级链接；四、表单；五、表格；六、框架；七、网页多媒体；附录、HTML标签列表
HTML知识点总结（思维导图）
03-02
HTML知识点总结（思维导图）
HTML实现图片查看与隐藏
你羡慕的生活都是你没熬过的苦。
07-08 280
你好呀，我是小邹。在网页设计中，提供一个直观且用户友好的图片查看功能是提升用户体验的重要一环。本文将详细介绍如何使用HTML、CSS和JavaScript来实现图片的查看与隐藏功能。通过本教程，你将学会如何让页面上的图片在点击时放大显示，以及如何通过再次点击或点击背景来关闭放大的图片。
HTML【详解】超链接 a 标签的四大功能（页面跳转、页内滚动【锚点】、页面刷新、文件下载）
朝阳39的博客
07-05 423
访问接口，返回文件流进行下载时，也会用到！
HTML最快速最简单
07-08 138
HTML 元素以开始标签起始，HTML 元素以结束标签终止空元素在开始标签中进行关闭（以开始标签的结束而结束）元素的内容是开始标签与结束标签之间的内容。
【前端从入门到精通：第二课：HTML头部标签常用标签】
weixin_50556117的博客
07-06 557
可参考百度百科。
[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式
qq_45831414的博客
07-08 85
【代码】[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式。
一文清晰了解HTML——简单实例
最新发布
weixin_73074505的博客
07-08 107
1.img中src有绝对路径、相对路径及网络路径之分。其中相对路径有../上一目录 ./当前目录 （./可省略） 命令。 【上述为网络路径】 2. img还有width与heigh，单位可为px（像素）一般屏幕分辨率为1024*768；可为百分比，意为占body长或高的百分之多少。
【前端】从零开始学习编写HTML
Eristic0618的博客
07-01 1310
本篇文章围绕HTML展开讲解，包含前端和HTML的概念、HTML文档的基本结构、HTML常见标签和实现简单的网页等内容
前端引用vue/element/echarts资源等引用方法Blob下载HTML
共同进步
07-04 656
需求是在HTML页面中集成Vue.js、Element Plus（Element UI的Vue 3版本）、ECharts等前端资源，使用Blob下载HTML。首先，将CSS和JS文件的内容直接嵌入到HTML字符串中通常不是一个好的做法，因为这会使生成的HTML文件变得非常大，增加了页面加载时间和内存使用。此外，这样做还可能导致跨站脚本（XSS）攻击的风险增加，因为正在动态地执行从服务器获取的JavaScript代码。
第一章节：HTML 基础
Toasten
07-08 652
Web（World Wide Web）即全球广域网，也称为万维网。我们常说的 Web端 就是网页端。网页 是构成网站的基本元素。网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。我们在浏览器上输入网址后，打开的任何一个页面，都是属于网页。浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera 等。
vue学习day02-Vue指令-v-html、v-show与v-if、v-else与v-else-if、v-on、v-bind、v-for、v-model
2301_76648183的博客
07-07 536
当表达式值为true时，无显著区别，当值为false时，v-show通过控制css的display：none来控制显示与隐藏。如果不加key，v-for的默认行为会尝试原地修改元素（就地复用）提供一个地址，这里是百度的地址，通过v-html渲染。作用：设置元素的innerHTML。语法：v-html=“表达式”提供一个布尔值和两个盒子。点击“切换显示与隐藏”
一文清晰了解HTML
weixin_73074505的博客
07-08 230
【代码】用最简单的话一文清晰了解HTML。
Vite配置环境变量以及动态更新html数据
weixin_51431465的博客
07-01 337
【代码】Vite配置环境变量以及动态更新html数据。
HTML(27)——渐变
m0_74386799的博客
07-08 189
渐变是多个颜色逐渐变化的效果，一般用于设置盒子模型。
【HTML入门】第四课 - 换行、分割横线和html的注释
xingyu_qie的专栏
07-08 331
这一小节，我们继续说HTML的入门知识，包括换行、横线分割以及注释（html的注释）。
渡一成哥html知识点
09-16
渡一成哥的HTML知识点包括： 1. 跑马效果: 使用CSS的动画效果和背景图像的位置变换来实现图像的移动效果。可以通过设置关键帧动画和背景图的位置来控制图像的移动速度和方向。 2. rotate3D变换: 使用CSS的transform...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

鷇韩

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

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

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

打赏作者

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

抵扣说明：

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

余额充值