021HTML

最新推荐文章于 2024-11-01 15:19:31 发布
最新推荐文章于 2024-11-01 15:19:31 发布
阅读量200 收藏
点赞数 1
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43157194/article/details/114242908
版权

HTML

第一个HTML界面

<!---->

<!DOCTYPE html>
<html lang="en">
<head>
    <!--meta标签 进行描述    -->
    <meta charset="UTF-8">
    <meta name="keywords" content="java"> 
    <meta name="decription" content="学习HTML">
    <title>第一个HTML文件</title>
</head>
<body>

Hello,World

</body>
</html>

小结：meta 搜索引擎化

//关键字 //描述

基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<hr>

<h1>段落标签</h1>

<p>你好</p>
<p>你不好好</p>
<p>你看</p>
<p>你好</p>

<hr>

<h1>换行标签</h1>

UI黑奴<br/>
UI黑奴<br/>
UI黑奴<br/>

<hr>

<h1>字体</h1>
<strong>加粗</strong><br>
<em>斜体</em>

<hr>

<h1>注释与特殊符号</h1>

&gt;大于</br>
&lt;小于</br>

涅米 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   怎么回事                  </br>
&copy;

</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>

<!--有序列表-->
<ol>
    <li>鸣人</li>
    <li>佐助</li>
    <li>卡卡西</li>
    <li>小樱</li>
</ol>

<hr/>

<!--无序列表-->
<ul>
    <li>鸣人</li>
    <li>佐助</li>
    <li>卡卡西</li>
    <li>小樱</li>
</ul>

<!--自定义列表-->
<dl>
    <dt>第七组</dt>

    <dd>鸣人</dd>
    <dd>佐助</dd>
    <dd>卡卡西</dd>
    <dd>小樱</dd>

    <dt>第八组</dt>

    <dd>鸣人</dd>
    <dd>佐助</dd>
    <dd>卡卡西</dd>
    <dd>小樱</dd>

</dl>

</body>
</html>

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<table border="1px">
    <tr>
        <td colspan="3" align="center">学生成绩</td>
    </tr>

    <tr>
        <td rowspan="2">狂神</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">秦疆</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>html
</table>

</body>
</html>

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>

<!--
src:来源
alt:加载图片失败时出现的文字
title:鼠标悬停时出现的文字
width:宽度(强行压缩，显示全部)
height:高度(强行压缩，显示全部)
-->

<img src="../resources/image/t1.png" alt="图片" title="樱花树下" width="150px" height="300px">

<a href="超链接标签.html#down">跳转</a>

</body>
</html>

媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>

<video src="../resources/video/P28 特朗普海阔天空.mp4" controls autoplay></video>

<audio src="../resources/audio/AniFace - 夜、萤火虫和你.mp3" controls autoplay></audio>

</body>
</html>

controls :控制器（暂停，音量，进度条，全屏）

autoplay:自动播放

超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>

<a name="top"></a> <br/>

<!--超链接标签-->

<a href="1.第一个HTML文件.html" target="_self">第一个界面</a> <br/>
<a href="https://www.baidu.com" target="_blank">百度</a> <br/>

<p>
    <a href="图像标签.html">
        <img src="../resources/image/t1.png" alt="图片" title="樱花树下" >
    </a>
</p><p>
    <a href="图像标签.html">
        <img src="../resources/image/t1.png" alt="图片" title="樱花树下" >
    </a>
</p><p>
    <a href="图像标签.html">
        <img src="../resources/image/t1.png" alt="图片" title="樱花树下" >
    </a>
</p>


<!--锚链接-->

<a href="#top">跳到上面</a>

<a name="down"></a>

<!--功能性链接-->

<a href="mailto:1830560034@qq.com">邮箱联系我</a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:1830560034:52" alt="快加我，好吗" title="快加我，好吗"/>
</a>

</body>
</html>

锚链接

<a name="top"></a>
<a href="#top"></a>

邮箱

<a href="mailto:1830560034@qq.com">邮箱联系我</a>

QQ推广

页面结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
</head>
<body>

<header>
    <h2>
        页面头部
    </h2>
</header>

<section>
    <h2>
        页面主体
    </h2>
</section>

<footer>
    <h2>
        页面脚部
    </h2>
</footer>

</body>
</html>

内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--iframe是内联框架，他可以有自己的src，也可以通过链接中传输src来显示-->

<iframe src="" frameborder="0" name="hello" width="1800px" height="600px"></iframe>

<a href="https://www.baidu.com" target="hello">跳转</a>

<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"-->
<!--        scrolling="no"-->
<!--        border="0"-->
<!--        frameborder="no"-->
<!--        framespacing="0"-->
<!--        allowfullscreen="true"> </iframe>-->

</body>
</html>

登录注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h2>登陆注册</h2>

<!--登陆注册必须在表单标签里面
action:提交到的页面，也可以做后续处理
method:提交方法
        get:快速，但是不安全，提交的消息会出现在网址上
        post:安全，信息不会显示出来，可以传输大文件

        readonly:只读
        hidden:隐藏
        disabled:禁用

        placeholder:提示消息(可输入文本框)
        required:非空(可输入文本框)
        pattern:正则表达式
-->

<form action="1.第一个HTML文件.html" method="get">
    <!-- value 默认值 maxlength文本长度 size文本框长度    -->

    <p>账号：<input type="text" name="username" maxlength="8" size="30" placeholder="请输入账号" required></p>
    <p>密码：<input type="password" name="pwd" value="123456" hidden required></p>

    <p>性别:
        <input type="radio" value="boy" name="sex" checked disabled>男
        <input type="radio" value="girl" name="sex">女
    </p>

    <p>爱好:
        <input type="checkbox" value="跳舞" name="hobby">dance
        <input type="checkbox" value="唱歌" name="hobby" checked>sing
        <input type="checkbox" value="游戏" name="hobby">play
    </p>

<!--    点击图片按钮也会跳转-->

    <p>按钮
        <input type="button" name="btn" value="按钮">
        图片按钮
<!--        <input type="image" src="../resources/image/t1.png">-->
    </p>

    <!-- 下拉框    -->
    <p>下拉框:
        <select name="下拉框">
            <option value="china">中国</option>
            <option value="amarica">美国</option>
            <option value="franch" selected>法国</option>
            <option value="grence">德国</option>
        </select>
    </p>

    <!-- 文本域       -->

    <p>文本域
        <textarea name="文本域" cols="30" rows="10">文本与内容</textarea>
    </p>

<!--    文件选择-->

    <p>请选择文件
        <input type="file" name="文件">
    </p>

<!--    邮箱验证-->
    <p>邮箱:
        <input type="email" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>

<!--    URL验证-->
    <p>URL验证
        <input type="url" name="url">
    </p>

<!--    数字-->
    <p>数字
        <input type="number" name="num" max="100" min="0" step="10" maxlength="3">
    </p>

<!--滑块    -->
    <p>滑块
        <input type="range" name="range" max="100" min="0" step="5">
    </p>

<!--    搜索框-->
    <p>搜索
        <label>点我<input type="search" name="search"></label>
        <input type="search" name="search">

    </p>

<!--    增强鼠标可用性-->
    <p>
        <label for="mark">点我</label>
        <input type="text" id="mark">
    </p>




    <p>
        <input type="submit">
        <input type="reset" value="清空">
    </p>



</form>



</body>
</html>
伪信徒
关注
隐藏提交HiddenSubmit
hujingn的博客
06-23 4027
var sub=new HiddenSubmit("业务逻辑");sub.add("属性名",str);sub.submit();sub.getProperty("list/@rowNum");  //获取行数HiddenSubmit.js 文件中HiddenSubmit对象使用手册：1、 构造函数HiddenSubmit HiddenSubmit(bizAction)参数：bizAction
BootstrapValidator超详细教程
热门推荐
陨落的轨迹的博客
12-07 17万+
废话不多说，直接开始~一、引入必要文件下载地址：(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip)
bootstrapValidator表单验证插件使用文档--配置项
bug处理进行时
12-18 2958
下载地址 Geting Started 官方API 引入依赖库 &amp;amp;amp;lt;link rel=&amp;amp;quot;stylesheet&amp;amp;quot; href=&amp;amp;quot;/path/to/bootstrap/css/bootstrap.css&amp;amp;quot;/&amp;amp;amp;gt; &amp;amp;amp;lt;link rel=&amp;amp;quot;st
HTML学习
qq_67858958的博客
04-01 1464
一 网站是由一个一个网页构成的，而网页其实就是放在服务器上的一个文件，当我们浏览网页时，这个文件会被下载到我们本地的电脑，然后再由浏览器解析，渲染出各种漂亮的界面，比如表格、图片、标题、列表等。网页本质都是一样的，就是由 HTML 代码构成的纯文本文件。 二 HTML ---->英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页，给网页内容进行排版和布局的。 1. 超文本，也即超越纯文本，这意味着 ...
HTML5-表单
MUYUFANSHENXUE的博客
03-13 1868
表单时网页中非常重要的元素，比如一些网站软件的注册页面，登录页面都会用到表单这个东西。 表单的初级应用： 1，表单的基本结构： <form method="post" action="result.html"> </form> method是指表单数据提交的方法，包括post和get，post相对于get安全一点，但也只是相对而言，两种方法，一般开发中通常采用post提交表单数据。action后面的表示向何处发送表单数据。 以上是一些表单元素常用的属性和属
HTML+CSS
x22210110的博客
10-19 1977
网课1-20
自建网站 | 知识储备HTML篇
Yizkkkkang的博客
07-29 1683
HTML标签简介
【HTML】HTML首页---拼多多首页界面-网易首页界面
coding加油站
08-20 4790
html网页设计作业，拼多多，网易，拼多多首页
html小箭头图标,html箭头相关符号
weixin_39640414的博客
06-05 1941
Left Arrow←U+02190←←←\2190Up Arrow↑U+02191↑↑↑\2191Right Arrow→U+02192→→→\2192Down Arrow↓U+02193↓↓↓\2193Left Right Arrow↔U+02194↔↔↔\2194Up Down Arrow↕U+02195↕↕&varr;\2195North West Arrow↖U+02196↖↖&...
html登录页面login021.rar
09-09
在这个名为"login021"的项目中，我们看到的是一个基于HTML和HTML5构建的登录界面，它具有自适应性，这意味着无论用户在桌面电脑、平板电脑还是智能手机上访问，页面都能自动调整布局以适应不同屏幕尺寸。 首先，...
021 大数据通用模版_大屏幕展屏（html源码）.rar
04-28
总的来说，"021 大数据通用模版_大屏幕展屏（html源码）.rar"是一个集成了HTML、CSS和JavaScript等前端技术的实用工具，旨在帮助开发者快速构建高效、美观的大数据展示平台。通过深入研究源码，我们可以学习到如何...
动网论坛 草色狂想曲
11-27
在技术实现上，“草色狂想曲”可能采用了HTML、CSS和JavaScript等前端技术，实现了响应式设计，确保在不同设备上都能良好显示。同时，为了保证论坛的性能和安全性，可能还应用了AJAX技术进行异步加载，减少页面刷新...
021_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-04
标题中的“021_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip”表明这是一个HTML网站模板，适用于移动端前端开发，采用H5技术，并且是自适应响应式的。这意味着源码设计能够根据用户使用的设备类型...
021 大数据通用模版.rar
03-17
标题中的“021 大数据通用模版.rar”表明这是一个关于大数据可视化的资源包，主要针对前端开发人员。这个压缩文件提供了一个通用的模板，用于创建数据大屏展示，适用于各种数据分析场景。 描述中提到，这是一个前端...
html标题显示hex,HTML特殊字符显示, HTML实体,HTML Entity, HTML Entity Code, HTML Css Code ,HTML Hex Code...
weixin_34847198的博客
06-17 3626
在设计和开发网页时，需要用到一些特殊符号，比如：?，?，℃，?，? 等等，有些上网找半天不一定能找到。HTML特殊符号编码有很多种 unicode、十六进位码(hex code)，html 实体编码(entity code)，还有我们熟知的html 实体(html entity) ，为了在css content属性中使用，还有对应的 css code。你可以在HTML标签中直接插入十六进位码(he...
HTML 基础标签——元数据标签 ＜meta＞
最新发布
Allen-
11-01 132
标签通常位于文档的部分。它用于定义文档的元数据，包括字符编码、文档描述、关键字、作者信息等。这些信息可以帮助浏览器正确解析和显示文档，同时还可以提供搜索引擎索引所需的信息。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 1967
【代码】炫酷的登录框!(附源码)
HTML小阶段二维表和思维导图
2301_79075752的博客
10-29 854
下面是对标签、元素、属性的对比二维表，通过对比3w1h（what是什么、where用在哪、why为什么要用、how如何用）来学习区分学习标签、元素、属性标签元素属性what（Tags）标签是用来标记内容块或标明元素内容意义（Element）网页内容是由元素组成的，一个元素通常由一个开始标签、内容、其他元素及一个结束标签组成。（Attribute）与元素相关的特性，用于提供额外的信息或配置选项。where开始标签：位于元素的开头，用于标记一个元素的开始。
rollup打包html
05-22
Rollup 不支持直接打包 HTML 文件，但是可以使用插件来处理 HTML 文件。下面是一些常用的 Rollup 插件，可以帮助你打包 HTML 文件： 1. rollup-plugin-html：这个插件可以在打包过程中将 HTML 文件转换为 ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值