HTML

最新推荐文章于 2024-09-15 22:12:53 发布
最新推荐文章于 2024-09-15 22:12:53 发布
阅读量126 收藏
点赞数
文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46522366/article/details/107356749
版权

常用标签

<!--注释—->
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<!--段落标签-->
<p>两只老虎</p><!--先写一个p，再按tab键-->
<!--换行标签-->
跑得快<br/>
<!--水平线标签-->
<hr>
<!--粗体，斜体-->
<strong>粗体</strong>
<em>斜体</em>
<!--特殊符号-->
空&nbsp;格
<br>
&gt;<!--大于号-->
<br>
&lt;<!--小于号-->
<br>
&copy;版权所有<!--版权符号-->
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zT0qLwdt-1594783320948)(C:\Users\13217\Pictures\Screenshots\屏幕截图(5)].png)

图像标签

<body>
<!--img学习
src：图片地址
    相对地址，绝对地址
    ../  上一级目录
alt：图片名字（必填）
-->
<img src="图片/皮卡丘.jpg" alt="皮卡丘"title="皮卡丘">
</body>

超链接

普通超链接

<!--a标签
href：必填，表示窗口要跳转到哪个页面
target：表示窗口在哪里打开
        -blank  在新标签中打开
        -self    在自己的网页中打开
-->
<a href="001.html" title="皮卡丘">点击跳转到001页面</a>
<br/>
<a href="https://www.baidu.com/?tn=80035161_1_dg" title="baidu">
    <img src="图片/百度.png" alt="百度" title="百度" width="100"height="50">
</a>

锚链接

<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>
<a href="#down">回到底部</a>

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


<!--功能性链接
邮件链接：mailto:

QQ链接：打开百度→QQ推广→打开官网→账号登陆→推广工具→选择三种模式中的一种→输入提示语→将代码复制到网页中
-->
<a href="mailto:1321786116@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::53" alt="点击加我" title="点击加我"/></a>
</body>

列表

<body>
<!--有序列表-->
<ol>
    <li>中国</li>
    <li>意大利</li>
    <li>美国</li>
    <li>新加坡</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
    <li>中国</li>
    <li>意大利</li>
    <li>美国</li>
    <li>新加坡</li>
</ul>
<hr/>
<!--自定义列表-->
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>linux</dd>
</dl>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ESNs8Ilu-1594783320953)(C:\Users\13217\Pictures\Saved Pictures\屏幕截图(8)].png)

表格

<body>
<!--表格table
行 tr rows
列 td
-->
<table border="1px">
    <tr>
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <td rowspan="2">1-2</td>
        <td>2-2</td>
        <td>3-2</td>
        <td>4-2</td>
    </tr>
    <tr>
        <td>1-3</td>
        <td>2-3</td>
        <td>3-3</td>
    </tr>
</table>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XpirKrSZ-1594783320956)(C:\Users\13217\Pictures\Saved Pictures\屏幕截图(8)].png)

表单

总体

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

<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post ，get提交方式
        get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
        post：比较安全，传输大文件。
-->

<form action="001.html" name="post">
    <!--文本输入框：input type=“text”-->
    <p>名字：<input type="username" name="name" value="admin" readonly required> </p><!--value：默认值  readonly：只读 required:不能为空-->
    <!--密码框-->
    <p>密码：<input type="password" name="pwd" hidden placeholder="请输入密码" ></p><!--hidden：隐藏-->
    <!--单选框-->
    <p>性别：
        <input type="radio" name="sex" checked disabled>男<!--checked 默认选项 disabled禁用-->
        <input type="radio"  name="sex">女
    </p>
    <!--多选框
    input type=“checkbox”
    -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

    <!--按钮
    input type="button" 普通按钮
    input type="image" 图像按钮
    input type="submit" 提交按钮
    input type="reset" 重置按钮
    -->
    <p>按钮：
        <input type="button" value="点击变长" name="btn1">
        <input type="image" src="图片/皮卡丘.jpg" width="100" height="100">
    </p>
    <p>国家：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth">瑞士</option>
            <option value="yindu">印度</option>
        </select>
    </p>
    <!--文本域-->
    <p>反馈：
        <textarea name="textarea"  cols="30" rows="10">文本内容</textarea>
    </p>

    <!--文件域
    input type="file" name=“files”
    -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

    <!--邮箱验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>
    <p>URL:
        <input type="url" name="url">
    </p>
    <p>数字：
        <input type="number" name="num" max="10" min="0" step="1">
    </p>
    <!--滑块
    input type="range"
    -->
    <p>音量：
        <input type="range"name="voice"min="0"max="100"step="2">
    </p>

    <p>
        <!--增强鼠标可用性-->
        <lable for="mark">你点我试试</lable>
        <input type="text">
    </p>
    <!--搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>

    <!--正则表达式-->
    <!--http://www.jb51.net/tools/regexsc.htm-->
    <p>自定义邮箱：
        <input type="text" id="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>
    
    <p>
        <input type="submit">
        <input type="reset">
    </p>




</form>
</body>
</html>

初识表单get、post

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O8qUSoGH-1594783320960)(C:\Users\13217\Pictures\Saved Pictures\表单注册界面.png)]

<body>
<h1>注册</h1>

<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post ，get提交方式
        get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
        post：比较安全，传输大文件。
-->

<form action="001.html" name="post">
    <!--文本输入框：input type=“text”-->
    <p>名字：<input type="username" name="name"> </p>
    <!--密码框-->
    <p>密码：<input type="password" name="pwd"></p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
</body>

表单元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c8Ba8pMY-1594783320964)(C:\Users\13217\Pictures\Saved Pictures\表格元素.png)]

文本框

    <!--文本输入框：input type=“text”-->
    <p>名字：<input type="username" name="name"> </p>

密码框

<!--密码框-->
<p>密码：<input type="password" name="pwd"></p>

单选框

<p>性别：
    <input type="radio" name="sex" checked disabled>男<!--checked 默认选项disabled-->
    <input type="radio"  name="sex">女
</p>

多选框

<!--多选框
input type=“checkbox”
-->
<p>爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="code" name="hobby">敲代码
    <input type="checkbox" value="chat" name="hobby">聊天
    <input type="checkbox" value="game" name="hobby">游戏
</p>

按钮

<!--按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<p>按钮：
    <input type="button" value="点击变长" name="btn1">
    <input type="image" src="图片/皮卡丘.jpg" width="100" height="100">
</p>

列表

<p>国家：
    <select name="列表名称">
        <option value="china">中国</option>
        <option value="us">美国</option>
        <option value="eth">瑞士</option>
        <option value="yindu">印度</option>
    </select>
</p>

部分属性

默认选项、禁用
<!--checked 默认选项 disabled禁用-->
<input type="radio" name="sex" checked disabled>男
默认值 、只读
</p><!--value：默认值  readonly：只读-->
<p>名字：<input type="username" name="name" value="admin" readonly>
隐藏
</p><!--hidden：隐藏-->
<p>密码：<input type="password" name="pwd" hidden >
增强鼠标可用性
<p>
    <!--增强鼠标可用性-->
    <lable for="mark">你点我试试</lable>
    <input type="text">
</p>
文本框提示语
<--placeholder-->
<p>名字：<input type="username" name="name"placeholder="请输入用户名" > </p>
不能为空
<!--required-->
<p>名字：<input type="username" name="name"placeholder="请输入用户名" required> </p>
正则表达式
    <!--正则表达式-->
    <!--http://www.jb51.net/tools/regexsc.htm-->
    <p>自定义邮箱：
        <input type="text" id="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>

页面布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8L5cVYi1-1594783320969)(C:\Users\13217\Pictures\Saved Pictures\页面结构分析.png)]

<body>
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚部</h2>
</footer>
</body>

iframe内联框架

<iframe src="https://www.baidu.com/?tn=80035161_1_dg" name="百度" frameborder="0" width="500px"height="500px"></iframe>

(-[\da-z])?)+(.{1,2}[a-z]+)+$/或\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*">


## 页面布局

[外链图片转存中...(img-8L5cVYi1-1594783320969)]

```html
<body>
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚部</h2>
</footer>
</body>

iframe内联框架

<iframe src="https://www.baidu.com/?tn=80035161_1_dg" name="百度" frameborder="0" width="500px"height="500px"></iframe>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jLQ1qB8Y-1594783320974)(C:\Users\13217\Pictures\Saved Pictures\内联框架.png)]

跳出井底的青蛙
关注
你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？
努力是为了站在万人之中，成为别人的光
07-05 26万+
HTML5不是什么新鲜事。自初始版本（2008 年 1 月）以来，我们一直在使用它的几个功能。我再次仔细查看了 HTML5 功能列表。看看我发现了什么？到目前为止，我还没有真正使用过很多！ 在本文中，我列出了 10 个这样的HTML5功能，这些功能过去我用得不多，但现在发现它们很有用。我还创建了一个工作示例流程并托管在Netlify. 希望你也觉得它有用。让我们开始了解有关它们中的每一个的解释、代码和快速提示。 https://wanghao221.github.io/html-tips-tricks/
HTML期末设计——代码篇
热门推荐
greengirl5的博客
06-22 13万+
事先声明 这个网页设计也就是用了我学到的知识做的一个中规中矩的网页，可以给以后的大一新生们做个参考，和商业网站的效果肯定是没得比的，期望太高的可以关掉了 引入页 效果图： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>欢迎来到香氛密语</title> <style>
HTML旋转相册
m0_61933976的博客
05-17 4435
快快动手做一个旋转相册吧！
html标签样式
Bianca427的博客
05-31 5182
13、伪装选择器：链接标签a：link{color:yellow} 功能：作用于链接标签当鼠标移动标签时触发... 设置未被点击的时字体颜色：a：link{color:yellow} 设置已被点击的链接字体颜色：a:visited{color: brown} 设置鼠标悬停的字体颜色：a:hover{color: yellow;} 设置鼠标点击未释放字体颜色:a:active{color: blue;}...
HTML - label标签
qq_33962481的博客
05-14 4509
文章目录一、label标签的作用二、使用1.语法 一、label标签的作用 <label>标签用于绑定一个表单元素, 当点击<lable>标签内的文本时, 浏览器就会自动将焦点转到或者选择对应的表单元素上. 二、使用 1.语法 <form action="#" method="POST"> <label for="name">用户名: </label> <input type="text" name="username"
Html
weixin_44260499的博客
10-20 194
#web的标准 主要包括结构（Structure）、表现（Presention）和行为（Behavior）三个方面 web标准提出的最佳体验方案：结构、样式、行为相分离 #HTML标签（上） ##HTML语法规范 1.1基本语法概述 （1）HTML标签是由尖括号包围的关键词，例如 （2）HTML标签通常是成对出现的，例如。称为双标签，标签中的第一个标签是开始标签，第二个是结束标签。 （3）有些特...
HTML5+CSS3 精美登陆界面源码
01-19
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富且视觉吸引人的网页提供了强大的工具。在这个“HTML5+CSS3 精美登陆界面源码”压缩包中，包含了三个精心设计的登录界面，每一个都充分利用了HTML5的新...
程序员给女朋友用HTML5制作的3D相册
04-21
HTML5是一种强大的网页开发技术，它为网页开发者提供了丰富的功能和接口，使得创建交互式、动态和响应式的网站成为可能。在这个"程序员给女朋友用HTML5制作的3D相册"项目中，我们可以看到HTML5如何被巧妙地利用来...
HTML5浪漫爱心表白动画在线演示程序
02-12
HTML5是一种强大的网页开发语言，它是HTML的第五个版本，为现代互联网提供了丰富的功能和交互性。这个"HTML5浪漫爱心表白动画在线演示程序"是一个利用HTML5特性制作的创意应用，特别适合在情人节这样的特殊日子里，...
HTML 揭秘：HTML 编码快速入门
m0_53117341的博客
09-09 1187
HTML 揭秘：HTML 编码快速入门一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键五 . 基础标签5.1 字体标签5.1.1 color 属性5.1.2 size 属性5.1.3 face 属性5.2 i 标签、b 标签5.3 hr 标签5.4 br 标签5.5 center 标签5.6 练习5.
HTML + CSS - 网页布局之一般布局&浮动布局
qq_51222843的博客
09-11 1217
讲解CSS中的一般布局以及浮动布局
XWiki中添加 html 二次编辑失效
galoiszhou的博客
09-12 303
使用 XWiki 中的 HTML 宏：如果标准的 Markdown 语法和 XWiki 的链接语法都无法工作，可以考虑使用 HTML 宏，它可以让你在 XWiki 页面中插入纯 HTML 代码，而不会被自动转换回 Markdown。如果直接在 XWiki 中添加 html, 例如 修改颜色, 新窗口打开主页面等功能, 首次保存是生效的. 如果再次编辑, 则失效, 原因是被转换成了 Markdown 的代码, 而 Markdown 不支持.解决这个问题可以使用 HTML 宏.
html 中如何使用 uniapp 的部分方法
weixin_59685936的博客
09-11 352
好了，现在就可以 uni. 使用相关的方法了。
【HTML】Html标签
千里之行，始于足下
09-12 1001
文本标签、表格标签、表单标签、列表标签、媒体标签、特殊字符、转义字符
Openlayers 报错记录 Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘:
Liszter
09-12 472
原因是引用的图层得配置跨域问题。这是浏览器对canvas 设置的导出安全策略。每个引用的图层添加一个。即可、、、 不用谢、、
HTML中2种实现点击后出现隐藏列表的方法
qq_39551449的博客
09-13 251
script>}else{// }// });</script>
HTML贪吃蛇游戏
最新发布
weixin_65477256的博客
09-15 1031
贪吃蛇是一款经典的休闲益智游戏。本文将通过HTML5和JavaScript详细解析如何实现一个简易版的贪吃蛇游戏。游戏的主要逻辑包括蛇的移动、碰撞检测、食物生成等功能。以下是游戏的完整代码及注释解析。（纯属好玩）
requests-html的详细使用方法
2301_79698214的博客
09-11 378
requests-html是一个Python库，用于发送HTTP请求并解析HTML。它基于 requests 和 pyquery 库，提供了一种更简单和更方便的方式来获取和处理网页内容。以上是requests-html的一些常用使用方法，可以根据实际需求灵活使用。
使用simple_html_dom解析HTML文档
"这篇文档介绍了如何下载和使用simple_html_dom库来处理HTML文档，通过示例代码展示了如何创建DOM对象以及进行DOM操作，包括查找和访问元素及其属性。" 在PHP开发中，处理HTML文档时，`simple_html_dom`是一个非常...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值