[狂神HTML学习笔记]HTML代码结构、标签、列表、表格、iframe内联框架、form表单

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

文章目录

1.代码结构

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

<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>

<body>
    test
</body>

</html>

<!DOCTYPE html>告诉浏览器文档类型；

html标签中的lang属性声明文档语言；

meta是描述性标签，用来描述网站的一些信息。用来做SEO（Search Engine Optimization）。（黑帽？）

2.标签

①基本标签
<h1>标题，共六级</h1>
<p>段落</p>
换行<br/>
水平线<hr/>
<strong>粗体</strong>
<em>斜体</em>
空&nbsp;格
大于号：&gt;
小于号：&lt;
版权符号：&copy;

<!-- 图像标签 -->
<img src="" alt="图片找不到的替换文字" title="悬停文字">

<!-- controls:打开控制条 autoplay:网页打开自动播放 -->
<!-- 视频标签 -->
<video src="" controls autoplay></video>
<!-- 音频标签 -->
<audio src="" controls autoplay></audio>
②超链接标签
<a href="https://www.baidu.com" target="_blank">点我跳转到百度首页</a>

target属性指定新的链接在哪里打开；_blank指在新标签页打开，_self指在当前标签页打开；

<!-- 锚链接 -->
<a name="top"></a>
<a href="#top">回到顶部</a>

<a name="top"></a>放到页面顶部用来标记顶部位置，<a href="#top">回到顶部</a>点击可跳转到标记的位置。

③Input标签
常用属性

hidden、readonly、disabled,见名知意，不再赘述；
placeholder：提示信息；
required：非空；
pattern:正则表达式验证。（在需要一些常用验证时，直接搜“常用正则表达式”查表即可）

文本框
<input type="text" value="默认值" size="10" maxlength="6">

在这里插入图片描述

默认为文本类型。value代表表示的值，对于按钮则是按钮上显示的字符。

单选框

checked表示默认勾选。

<!-- 要想实现一组单选框，radio的name值要相同 -->
<input type="radio" value="boy" name="sex" checked>男            <!-- sex = boy -->
<input type="radio" value="girl" name="sex">女           		 <!-- sex = girl -->

在这里插入图片描述

多选框
<!-- 多选框,一般以数组形式提交给后台 -->
<input type="checkbox" value="game" name="hobby" checked>游戏		<!-- hobby = game -->
<input type="checkbox" value="code" name="hobby" checked>代码		<!-- hobby = code -->

在这里插入图片描述

按钮
<input type="button" name="btn" value="按钮上的值">

在这里插入图片描述

上传文件

上传文件也是使用input标签。

<input type="file" name="files">

在这里插入图片描述

自带验证：邮件、链接、数字

自带验证的一些input标签：

邮件：<input type="email" name="email">
<br>
链接：<input type="url" name="url">
<br>
商品数量：<input type="number" name="number" max="100" min="0" step="1">

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这些都是最基本的验证，以后很多地方需要用JS自定义验证。

滑块
<input type="range" name="volume" min="0" max="100" step="2">

在这里插入图片描述

搜索框
<input type="search" name="search">

在这里插入图片描述

④下拉框
<select name="country">
    <option value="china">中国</option>
    <option value="us">美国</option>
    <option value="uk" selected>英国</option>
</select>

在这里插入图片描述

⑤文本域
<textarea name="back" cols="50" rows="10">反馈内容</textarea>

在这里插入图片描述

3.列表

<!-- 有序列表 -->
<ol>
    <li>Python</li>
    <li>Java</li>
    <li>JavaScript</li>
</ol>

<!-- 无序列表 -->
<ul>
    <li>Python</li>
    <li>Java</li>
    <li>JavaScript</li>
</ul>

<!-- 自定义列表 -->
<dl>
    <dt>语言</dt>

    <dd>Java</dd>
    <dd>JavaScript</dd>
    <dd>Python</dd>

    <dt>城市</dt>

    <dd>北京</dd>
    <dd>上海</dd>
</dl>

在这里插入图片描述

4.表格

<table border="1px">
    <tr>
        <!-- 占两列 -->
        <td colspan="2">1</td>
    </tr>
    <tr>
        <!-- 占两行 -->
        <td rowspan="2">2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
    </tr>
</table>

在这里插入图片描述

5.iframe内联框架

B站视频分享提供嵌入代码。试了试不太行，就改成首页的链接了。
在这里插入图片描述

<iframe src="https://www.bilibili.com/?spm_id_from=333.999.b_696e7465726e6174696f6e616c486561646572.1" 
width="1000px" height="800px"> </iframe>

在这里插入图片描述

6.Form表单

<form action="https://www.bilibili.com/?spm_id_from=333.999.b_696e7465726e6174696f6e616c486561646572.1" 
method="GET">
    <p>账号：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="pwd"></p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

在这里插入图片描述
当form表单用GET方式提交时，提交的内容会显示在链接中：
在这里插入图片描述
当把GET改为POST后，被B站拒绝了，hh，换成CSDN后可以了。

<form action="https://blog.csdn.net/Sunshine_xiaohao" method="POST">

虽然POST方式不会把账号密码显示在URL中，但是按F12，还是可以查看表单数据：
在这里插入图片描述
这层密码加密就需要后端的配合了。

Sunshine_xiaohao
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html笔记（狂神-完整版）
qq_49898212的博客
06-10 1461
html笔记（狂神-完整版） 生活总是让我们遍体鳞伤，但到后来，那些受伤的地方一定会变成我们最强壮的地方 背景颜色 bgcolor <body bgcolor="widte"> 靓仔 </body> 注释 <!-- 不添加注释 --> <body> 不添加注释： 靓仔 靓仔 </body> <br> <hr> <!-- 添加注释 --> <body>
【狂神】HTML笔记
QinLaoDeMaChu的博客
04-25 1293
目录1. 初识HTMl2. 网页基本元素3. 网页基本标签4. 图像标签5. 链接标签6. 行内元素和块元素7. 列表8. 表格9. 媒体元素10. 页面结构分析11. iframe内联框架12. 初识表单post和get提交13. 文本框和单选框14. 按钮和多选框15. 文本域和文件域16. 搜索框滑块和简单验证17. 表单的应用18. 表单初级验证 1. 初识HTMl 什么是HTML？ Hyper Text Markup Language : 超文本标记语言 超文本包括：文字、图片、音频、视频、动画
B站【狂神说Java笔记】-数组
最新发布
2401_83817843的博客
03-28 1031
千千万万要记得：多刷题！！多刷题！！之前算法是我的硬伤，后面硬啃了好长一段时间才补回来，算法才是程序员的灵魂！！！！篇幅有限，以下只能截图分享部分的资源！！（1）多线程（这里以多线程为代表，其实整理了一本JAVA核心架构笔记集）（2）刷的算法题（还有左神的算法笔记）（3）面经+真题解析+对应的相关笔记（很全面）（4）视频学习（部分）ps：当你觉得学不进或者累了的时候，视频是个不错的选择在这里，最后只一句话：祝大家offer拿到手软！！
狂神JAVA笔记--入门篇
weixin_48577398的博客
04-13 2029
写在前面 1，讲解视频 狂神的JAVA视频课！！！！强推 2，配套笔记 配套笔记我会持续在CSDN上进行更新 一，JAVA预科阶段 1-1，论博客的重要性 1.需要总结和思考。有时候我们一直再赶路，却忘了放慢脚步 2.提升文笔组织能力 3.提升学习总结能力 4.提升逻辑思维能力 5.帮助他人，结交朋友 冰冻三尺非一日之寒，写博客也是，短期内可能看不到效果，但是长期坚持，对自己的提升很有帮助 狂神说 Markdown语法：标题：#，字体：适当的快捷键，分割线：—/***，图片：[外链图片转存失败
学习笔记（狂神SpringBoot全部笔记含--源码--及员工管理系统整合数据库版）
福波斯_阿波罗
12-31 3985
学习笔记（狂神SpringBoot全部笔记及员工管理系统整合数据库版）
小学生都能学会的springmvc入门基础
Javaer
05-22 431
小学生都能学会的springmvc！ 一、什么是springmvc？？ MVC模型大家都知道吧？ 模型(Model)，视图(View)，控制器(Controller)的简写，是一种软件设计规范。 **Model（模型）：**数据模型，提供要展示的数据，因此包含数据和行为，可以认为是领域模型或JavaBean组件（包含数据和行为），不过现在一般都分离开来：Value Object（数据Dao） 和 服务层（行为Service）。也就是模型提供了模型数据查询和模型数据的状态更新等功能，包括数据和业务。 **V
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
此资源为我跟着B站up主【遇见狂神说】java系列视频中前端入门部分学习过程中所写 大部分和视频保持一致，有一些自己的理解和一些扩展的部分
狂神springcloud学习笔记加代码
03-24
狂神springcloud学习笔记加代码 笔记可以看：https://www.kuangstudy.com/bbs/1374942542566551554#header4 视频链接：https://www.bilibili.com/video/BV1jJ411S7xr
狂神Docker学习笔记.pdf
03-10
学习docker时看到的学习笔记
狂神说各种学习视频配套笔记
05-30
包括Java、html、CSS、JavaScript、Mysql、JavaWeb、Mybatis、SpringMVC、Linux、Redis、SpringCloud等
狂神笔记，b站狂神说课程笔记大全(最新)
09-19
b站狂神说课程笔记大全，每个部分都有 狂神说java系列笔记（java基础+javaweb+ssm+微服务）全套 狂神说上课笔记未删减 Java基础到技术升级 1、JavaSE：Java入门 2、JavaSE：基础语法 3、JavaSE：流程控制 4、JavaSE...
MyBatis学习笔记
Eimhin
11-07 351
2、第一个MyBatis程序 2.1 搭建环境(建表) CREATE DATABASE `mybatis` CHARSET utf8; USE `mybatis`; CREATE TABLE `USER` ( `id` INT(20) NOT NULL, `name` VARCHAR(30) DEFAULT NULL, `pwd` VARCHAR(30) DEFAULT NULL, PRIMARY KEY(`id`) )ENGINE=INNODB DEFAULT CHARSET=utf8; IN
最全狂神Docker笔记，包含bug解决方式
博客
05-01 1107
更便捷的升级和扩缩容使用了 Docker之后，我们部署应用就和搭积木一样。项目打包为一个镜像，扩展服务器A！服务器B更简单的系统运维在容器化之后，我们的开发，测试环境都是高度一致的更高效的计算资源利用Docker是内核级别的虚拟化，可以在一个物理机上可以运行很多的容器实例！服务器的性能可以被压榨到极致。docker的理念是将应用和环境打包成一个镜像！
Redis-狂神笔记-菜鸟风闲整理
weixin_46905895的博客
11-26 3977
SQL结构化查询语言 Structured Query Language结构化查询语言， 为啥不叫非结构化查询语言呢？NoSQL 为啥不叫结构化操作语言呢？Operate 为啥不叫结构化查询操作呢？ 因为这个是针对结构化数据的，查询。 那么什么是结构化数据呢？一摞书，一摞笔记本，一捆钢笔。这是半理想状态。 书随意摆放，笔记本随意摆放，钢笔夹在书里，笔记本里，放在笔筒里，这是最不理想的状态。 一摞按照书名首字母排序摆放在书架的书，一摞按照科目（语文、英语、化学…）顺序摆放的笔记本，一捆按照品牌顺序摆放的钢笔。
狂神系列之HTML学习笔记
潘芝的博客
03-29 266
HTML 超文本标记语言 — Hyper Text Markup Language W3C标准 W3C：World Wide Web Consortium W3C标准包括： 结构化标准语言(HTML,XML) 表现标准语言(CSS) 行为标准(DOM,ECMAScript) 1.网页基本信息 <!--告诉浏览器，使用什么规范--> <!DOCTYPE html> <html lang="en"> <!--head标签代表网
前端HTML学狂神笔记
Green_hand001的博客
05-29 1411
HTML 什么是HTML Hyper Text Markup Language(超文本标记语言) 超文本包括：文字，图片，音频，视频，动画等 w3c标准 WOrld Wide Web Consortium(万维网联盟) 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构 W3C标准包括 结构化标准语言（HTML、XML） 表现标准语言（CSS） 行为标准（DOM、ECMAScript） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l8BX4
【狂神说Java】HTML快速入门
路边烧卖
05-17 1602
目录1.初识HTML2.网页基本信息3.网页基本标签4.图像标签5.超链接标签应用6.行内元素和块元素7.列表标签8.表格标签9.媒体元素10.页面结构分析11.iframe内联框架12.初始表单post和get提交13.文本框和单选框14.按钮和多选框15.列表框文本域和文件域16.搜索框滑块和简单验证17.表单的应用18.表单初级验证 初始HTML 网页基本标签 图像，超链接，网页布局 列表，表格，媒体元素 表单及表单应用 表单初级验证 1.初识HTML 什么是HTML HTML Hype
狂神B站之HTML笔记
lisa2017_的博客
02-17 500
文章目录HTML01 初始HTMl02 网页基本元素03 网页基本标签04 图像标签05 链接标签06 行内元素和块元素07 列表08 表格09 媒体元素10 页面结构分析11 iframe内联框架12 初识表单post和get提交13 文本框和单选框14 按钮和多选框15 文本域和文件域16 搜索框滑块和简单验证17 表单的应用18 表单初级验证19 HTML总结18 表单初级验证19 HTML总结 HTML 狂神B站视频：https://www.bilibili.com/video/BV1x4411V7
HTML入门（狂神学习笔记）
weixin_42248256的博客
03-10 222
HTML（狂神学习笔记） 1.什么是HTML ​ Hyper Text Markup Language（超文本标记语言） 2.W3C标准 World Wide Web Consortium（万维网联盟） 成立于1994年，Web技术领域最权威和最有影响力的国际中立性技术标准机构 W3C标准包括 结构化标准语言（HTML，XML） 表现标准语言（CSS） 行为标准（DOM，ECMAScript） 3.网页基本标签 标题标签 ？代表数字，从1到6 <h?> 段落标签 <p
bilibili狂神代码笔记
08-30
《Bilibili狂神代码笔记》是B站UP主狂神所创办的一档以编程教学为主题的视频系列。这个系列的视频涵盖了各种编程语言和技术栈，包括Java、Python、前端开发等，旨在为初学者提供全面的编程入门指导。 《Bilibili...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值