HTML详解

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

目录标题

HTML详解

HTML 是简单的网页结构
而CSS 可以美化我们的基础网页
JavaScript可以让我们的网页 动态起来
而且JavaScript要学习一个Jquery
之后可以学习 VUE

在这里插入图片描述

上面目录中重点知识为：
表单及表单应用
和表单初级验证！！

在这里插入图片描述

在这里插入图片描述

网页基本信息

在这里插入图片描述

HTML的注释为 < !-- – >
快捷键注释 ctrl+/

在这里插入图片描述

网页基本标签

在这里插入图片描述

生成标签的快捷键
例如 标题标签 输出 h1
然后 按住Tab键即可
标签+Tab键

在这里插入图片描述

重点！！!
如果没有添加 段落标签 p
那么 上面的文字 就不会分段 而是直接成为一行文字

在这里插入图片描述

换行标签

br
换行之后你会发现文字之间非常的紧凑 跟段落标签相比

在这里插入图片描述

水平线标签

hr+Tab键

在这里插入图片描述

字体样式标签
粗体 strong+Tab键
斜体 em+Tab键

在这里插入图片描述

注释和特殊符号

特殊符号
空格键：&+nsbp；
大于号：&+gt；
小于号：&+lt；
版权符号：&+copy；

在这里插入图片描述

在这里插入图片描述

特殊符号
&+
会出现你想要符号 自行选择
或者搜寻百度

在这里插入图片描述

图片标签

在这里插入图片描述

相对路径
在表示相对路径中，单点表示当前目录，双点表示上一级目录，反斜杠“/”表示分隔目录；
相对路径特殊符号有以下几种表示意义：
◆以“./”开头，代表当前目录和文件目录在同一个目录里，“./”也可以省略不写！
◆以"…/“开头：向上走一级，代表目标文件在当前文件所在的上一级目录；
◆以”…/…/“开头：向上走两级，代表父级的父级目录，也就是上上级目录，再说明白点，就是上一级目录的上一级目录
◆以”/”开头，代表根目录

在这里插入图片描述

链接标签

在这里插入图片描述

功能有三个 ：
超链接 锚链接 功能性链接

在这里插入图片描述

行内元素和块元素

在这里插入图片描述

列表标签

在这里插入图片描述

有序列表 用 ol 表示
无序列表 用 ul 表示
无序列表 应用范围： 导航 侧边栏
有序列表 应用范围：试卷 问答

在这里插入图片描述

自定义列表 用 dl 表示
应用范围 公司网站底部

在这里插入图片描述

表格标签

在这里插入图片描述

表格 table
行标签 tr rows
列标签 td
border 加边框

在这里插入图片描述

行标签 tr rows
列标签 td
跨行：（用rowspan 来表示） 将一行内的几个单元格 变成一个单元格
跨列同理 用 colspan 来表示

在这里插入图片描述

媒体元素

在这里插入图片描述

视频和音频的区别
重点
标签中 如果没有加 controls
网页中 就不会出现视频和音频的资源
则 如果加入 controls 则会出现 以下图标

在这里插入图片描述

页面结构分析

在这里插入图片描述

在这里插入图片描述

iframe内联框架

内联框架：就是一个网站里面嵌套另外一个网站

在这里插入图片描述

所以可以得出 我们的网页也可以拼装组合

在这里插入图片描述

表单语法（重点）

在这里插入图片描述

易错点：
检查IDE中代码 看密码和账户
代码 是否全部写在了
form表单中
怎么查看 post发送表单中的密码和账号
第一步 打开网页
第二步 检查代码
第三步 点击network
第四步 点击Header

在这里插入图片描述

文本框和单选框

表单元素格式

在这里插入图片描述

单选框

在这里插入图片描述

重点：
radio为单选框！！！
value： 元素初始值 type为radio时必须指定一个值
注意 单选框中一定要有一个分组的概念！！！

在这里插入图片描述

多选框和按钮

checkbox 为多选框的意思

多选框
input type=“checkbox”
解释： 为什么value值为sleep
value=“sleep” 因为在Html页面上 我们可以看到“睡觉”的值
但是看不到 sleep 的值 所以 我们选定可以的值 那么 我们选定
“睡觉” 的值的时候 就等于选上了 “sleep”的值 所以value要复制等于"sleep"
注意多选框 也要加入分组的概念

按钮和图片按钮
一共四个按钮总结
input type=“button” 普通按钮
input type=“image” 图像按钮
input type=“submit” 提交按钮
input type=“reset” 重置按钮
value 可以给按钮命名值

在这里插入图片描述

列表框文本域和文件域

下拉框 列表框

重点： 下拉框不是input标签
它是 selcet标签

下拉框 列表框
下拉框默认选择该值 添加上selected即可

文本域
textarea name=“textarea”
cols=“30” rows=“10”
宽 30 高 10

文件域
input type=“file” name=“files”
就是选择电脑上的某一份文件

在这里插入图片描述

搜索框滑块和简单验证

URL 是网址

在这里插入图片描述

滑块用type= “range” 来表示
重点！！！
step 的意思为 每一个单元格的范围

在这里插入图片描述

表单的应用

在这里插入图片描述

只读标签 的意思是 改成自己想要的命名
然后在网页上就不能修改了
比如修改账号为 admin 但是在网页上就不能在更改
用 readonly来表示

在这里插入图片描述

还有
禁用标签
在选择框中 可以使用 disable 标签 来固定选择框
从而在页面上再也无法修改 单选框和双选框
checked 为默认选择

在这里插入图片描述

隐藏域标签
比如我们可以将 密码框隐藏掉
但是仍然可以传递出去密码
用 hidden 标签 来表示
在下图中
默认密码为 123456

在这里插入图片描述

还有一个隐藏功能 增强 鼠标可用性
就是点击文本框 旁边的文字
然后呢 鼠标键直接指向了文本框内

在这里插入图片描述

表单初级验证（增加用户安全性和质量性）

提高表单的质量性

在这里插入图片描述

placeholder标签 ：用户提示信息
例如 在账户输入中 提示用户输入用户名

在这里插入图片描述

required 标签：表示这个元素一定不能为空

在这里插入图片描述

重点！
pattern 标签：表示正则表达式（规则表达式）
比如下面我们自定义一个 规则的邮箱
参考网站 https://www.jb51.net/tools/regexsc.htm
还有 脚本之家
www.jb51.net

在这里插入图片描述

表单的初级验证 是为了提高用户的质量性
例如 淘宝中每天要增加很多用户
但是为了 避免一些用户填错信息 或者不填信息就提交表单
那么就增加了 过多的任务量
所以可以用表单验证来提高用户质量性

HTML 总结

在这里插入图片描述

二哥一直坚持
关注
专栏目录
HTML详解连载（1）
08-11
在“HTML详解连载（1）”中，我们将首先介绍HTML的基本结构和元素。一个HTML文档通常由三部分组成：文档声明、头部（head）和主体（body）。文档声明如`<!DOCTYPE html>`告诉浏览器文档遵循的HTML版本。头部则包含元...
HTML 常用选择框
热门推荐
wangfei933的博客
06-04 2万+
常用类型 输入框 type="text" 员工姓名:<input type="text" />
Html——选项框、立方体与选项框
可可的博客
11-11 4754
Html——选项框、立方体与选项框 一、html选项框 1.单选框 name值相同为一个选项，只会有一个内容被选中类型为radio 2.复选框 同一个选项name值要相同，但是可以有多个内容被选上checkbox <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width
html怎么写下拉选择框
最新发布
m0_65659549的博客
05-03 865
代表下拉列表中的一个选项。在实际应用中，你可以根据需要添加更多选项，并根据实际情况调整。在HTML中创建下拉选择框，通常使用。
Html——选项框、立方体与选项框，满满干货指导
2401_84093899的博客
04-03 690
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载朋友，同时减轻大家的负担。**[外链图片转存中…(img-R43H45Jg-1712106504037)][外链图片转存中…(img-WgpZtREd-1712106504038)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-D7BmjmYh-1712106504038)]
零基础HTML入门教程(17)——表单的单选框和复选框
weixin_61808806的博客
12-06 3553
我们上一小结学习了，密码输入框和文本输入框，我们这一小结学习复选框和单选框。单选框用于从若干选项中选择其中一个，例如性别只能从男、女中选择一个： 效果如下 代码如下 效果如下 我们这一小节学习了单选框和复选框，我相信在大家，注册账号或者填写信息的时候很常见，在我们html里面单选框和复选框也很常用，我们要熟练使用。
Html——选项框，程序员中年危机，CSS颜色基本样式
m0_57473261的博客
03-19 942
选择为绿色
html详解资料
12-30
很详细的介绍了如何用html来编写网页，而且配上了很好的例题加以详解
HTML详解（基础快速入门版）
03-20
适用人群：初学HTML，想要了解如何创建表格、超链接以及表单的爱好者们
经典HTML 详解书
06-11
"经典HTML详解书"是一本专为初学者设计的资源，旨在帮助读者深入理解和掌握HTML的基本概念和实践技巧。 1. HTML基础：HTML由一系列元素组成，每个元素都有其特定的标签，如`<html>`、`<head>`和`<body>`等。这些...
PDF：HTML详解.pdf
02-18
PDF：HTML详解.pdf
HTML中文本框\单选框\按钮\多选框
爪哇人的博客
10-23 4581
【代码】HTML中文本框\单选框\按钮\多选框。
html实现选择框的全选与反选
fzxyxf1314的博客
10-20 1530
html中的全选和反选功能的实现
Html——选项框，前端入门视频教程
jixuczy的博客
03-19 988
选择为绿色
html 输入选择框
一步一步的前进
07-26 1873
html 实现输入选择框
第四章 HTML教你如何创建一个选择栏
weixin_52915467的博客
09-18 2616
一个小小的博主每天为大家分享笔记，回顾基础知识 大家可以❤点点关注，收藏专栏❤每天温故而知新❀ 一，首先我们来了解什么是选择框 那么如下图的展示就是我们今天要学习的选择框的制作 1.首先我们要用到的标签及其格式如下： <select size='' name='' multiple='multiple'> <option value='可选择的内容' selected='selected'>...</option> <option>...</opt
html两个类选择器嵌套,CSS层叠样式表--选择器
weixin_28841265的博客
06-03 1413
CSS的作用：用来设置网页结构样式。通过css给html标签设置属性来达到改变标签样式。选择器、盒子模型、浮动、定位1.CSS书写位置内嵌式写法:直接在head标签中创建style标签，在style标签中定义外链式写法:首先新建css文件，然后使用link标签引入使用，可引用多个1.css代码如下.div{color:red;font-size: 30px;}.one{color: blue;}在...
20.html-复合选择器
weixin_50913764的博客
03-26 770
交集选择器： /* 标签选择器（元素选择器）标签名 元素名 只要匹配到对应的标签名元素名 就会被选中 */ /* div{} */ /* 交集选择器:既...又... 既要求元素名（标签名）是div 又要求原色的class属性值包含base 两个标签挨在一起 中间不能有空格 */ div.base{ background-color: chartreuse; } ...
mvc chtml详解
05-17
.cshtml 文件中通常包含 HTML、CSS 和 JavaScript 代码，以及 Razor 语法，用于呈现动态内容。Razor 语法允许开发人员在视图中嵌入 C# 代码，以便在运行时生成动态内容。 例如，以下是一个简单的 .cshtml 文件示例...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值