前端学习---- 前端HTML基本元素的介绍

一：显示相关的HTML基础知识

1. 推荐的前端编写工具

在这里插入图片描述

2. VScode的html速写规则（从a标签开始再用）

①、！：代表生成html的基本框架元素
②、html元素：直接书写html,不需要加<>,按回车会自动生成
③、{}：配合②快捷键，在{}中书写文本，会直接在html元素标签内生成文本，里面可以添加 一个 一个 一个符号代表0-9
④、*N：N代表个数，配合上述儿②、③可以一次生成多个html元素
⑤、>：向html的下一级生成html元素
⑥、+：同级下生成不同的html元素

3. html5保留的元素

框架元素

<!DOCTYPE html>
<html><head><meta charset="utf-8" ><title>hello</title>	</head><body></body>
</html>

二：HTML元素

 <!-- H1到H6的代码样例 -->
<h1>疯狂JAVA讲义</h1>
<h2>疯狂JAVA讲义</h2>
<h3>疯狂JAVA讲义</h3>
<h4>疯狂JAVA讲义</h4>
<h5>疯狂JAVA讲义</h5>
<h6>疯狂JAVA讲义</h6>
<hr>
<span>span测试01</span>
<span>span测试02</span>
<span>span测试03</span>
<br>
<div>divtest1</div>
<div>divtest2</div>
<div>divtest3</div>
<p>ptest001</p>
<p>ptest002</p>
<p>ptest003</p>

重点：span和div的布局特征及原理
看到的布局表象特征：div是竖着布局，span是横着布局
div、h1-h6、p等都是块级元素（块级盒子），块级元素特征：独占一行，对宽度和高度是支持的
span、a等都是内联级元素（内联级盒子），内联级元素特征：不独占一行，对宽度和高度不支持

a元素

①、超链接

<a href="http://www.baidu.com" target="_blank">跳转到百度</a>

相关属性：
href:跳转的资源路径
target:代表打开资源的方式，默认值是_self，本窗口打开，其他值：_blank，新窗口打开，_parent,跳出父级框架打开,_top跳出顶级框架打开，结合框架之后，可以自定义值
②、锚点

 <a name="h_element">H1到H6</a>

相关属性：
name:代表锚点的名称
相关方法：
如何跳转到指定锚点位置？注意：记得加上 #锚点name属性的值

<a href="#h_element">跳转到H相关的元素上</a>

跳转到不同页面上的指定锚点

<a href="test.html#a_element">跳转到A相关的元素上</a>

③、固定锚点效果
相关css：
position:设置定位模式，其值有relative,absolute,fixed,static 默认值为static,其中relative是相对定位，absolute是绝对定位，fixed是固定，
left:代表是主体居左的距离
right:代表是主体居右的距离
top:代表是主体居上的距离
bottom:代表是主体居下的距离
left、right、top、bottom的使用有效，必要要让position的值是relative,absolute,fixed三种中的一种

<div style="position:fixed;bottom:10px;right:10px;"><div><a href="#h_element">跳转到H相关的元素上</a></div><div><a href="#a_element">跳转到A相关的元素上</a></div>
</div>

列表相关元素

①、无序列表（常用）

<ul><li>sdaklgj</li><li>sdaklgj</li><li>sdaklgj</li>
</ul>

注意：ul里面只能包含li
②、有序列表（不常用）

<ol start="3" type="a"><li>sdaklgj</li><li>sdaklgj</li><li>sdaklgj</li>
</ol>

相关属性：
start:代表从第几个开始排序
type:使用哪种编码方式，其值有 1、A、a等等
注意：ol里面只能包含li
③、列表（标题+摘要）

<dl><dt>新闻1</dt><dd>新闻1的摘要1</dd><dd>新闻1的摘要2</dd><dt>新闻2</dt><dd>新闻2的摘要</dd>
</dl>

注意：dl里只能包含dt,dd;dt后紧跟至少一个dd,dt是列表项，dd是列表项的详情说明
④、无序列表卡片效果
额外知识点：
①、引入css样式，需要使用标签
相关属性：
rel : 代表引入的资源角色，stylesheet代表样式单【必要】
href : 代表引入的资源路径，可用相对路径和绝对路径【必要】
在这里插入图片描述
②、添加HTML的通用属性，比如：id,class
1、使用id属性，在书写css时，需要使用#前缀；使用class属性，在书写css时，需要使用.前缀;
2、使用id属性，属性值要求唯一的;使用class属性，属性值可以重复。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test</title><link rel="stylesheet" href="css/index.css">
</head>
<body><div class="news_box"><div class="title"><span class="lf_sp">新闻动态</span><span class="rt_sp">more+</span></div><ul><li><span>2020-12-23</span><img src="images/1.png" alt="1"><h3>军训常识——管理篇</h3><p>军事理论学习科生的必事理论理论学事理论课考试，记2个学分，记入学生教学档案。军事技能训练考评和军事理论考试。</p></li><li><span>2020-12-23</span><img src="images/1.png" alt="1"><h3>军训常识——管理篇</h3><p>军事理论学习是我校本科生的必修课，完成军训并通过军事理论课考试，记2个学分，记技能训练考评和军事理论考试。</p></li><li><span>2020-12-23</span><img src="images/1.png" alt="1"><h3>军训常识——管理篇</h3><p>军事理论学习是我校本科生的必修课，完成军训并通过军事理论课考试，记2个学分，记技能训练考评和军事理论考试。</p></li><li><span>2020-12-23</span><img src="images/1.png" alt="1"><h3>军训常识——管理篇</h3><p>军事理论学习是我校本科生的必修课，完成军训并通过军事理论课考试，记2个学分，记技能训练考评和军事理论考试。</p></li></ul></div>
</body>
</html>

css代码：

*{margin:0;padding: 0;transition: all 0.5s ease;
}
.news_box{background-color:rgb(243, 243, 243);margin-top:100px;padding-bottom:30px;
}
.news_box .title{width:80%;margin:0 auto 20px;padding-bottom:13px;padding-top: 10px;border-bottom:1px #ddd solid;font-size:21px;
}
.news_box .title .lf_sp{border-bottom:2px #D93124 solid;padding-bottom:12px;
}
.news_box .title .rt_sp{float: right;font-size:14px;color:rgb(170, 170, 170);margin-top: 11px;margin-right: 10px;
}
.news_box .title .rt_sp:hover{color:#910000;cursor: pointer;
}
.news_box ul{overflow: hidden;width:80%;margin:0px auto;}
.news_box ul li{list-style: none;float:left;width:23%;background-color: rgb(255, 255, 255);margin:0 1%; position: relative;
}
.news_box ul li img{width:100%;
}
.news_box ul li h3{color:#D93124;font-size:15px;font-weight: 200;padding:5px;
}
.news_box ul li p{color:#919191;font-size:13px;padding:5px;line-height: 23px;
}
.news_box ul li:hover p{color:#D93124;
}
.news_box ul li span{position: absolute;left:0;top:0;background-color: #F78C83;color:#fff;padding:4px;font-size:12px;
}
.news_box ul li span:hover{padding: 6px;
}

最终效果
在这里插入图片描述

table元素

①、简单的table

<table border="1" style="width:300px;border-collapse: collapse;"><tr><td>1sdgasdgasdgeasgsd</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr></table>

相关html元素：
tr:代表行
td:普通单元格
th:表头单元格，特征：内容居中，加粗
col:代表列，可以对指定列整体做样式、属性处理，span属性可以指定是哪些连续的列
在这里插入图片描述
相关属性：
cellspacing:代表单元格之间的间距，一般不使用，而是采用css处理 border-collapse:collapse;
cellpadding:代表单元格内内容与边框的间距，一般不使用，而是采用css处理padding:5px;
border:代表表格的表框，一般使用
width:代表表格的宽度，一般不使用，采用css处理
align:代表对齐的方式，默认是左对齐（left），可以设置居中对齐（center），一般不使用，采用css处理 text-align:center
②、合并的table

 <table border="1" style="width:300px;border-collapse: collapse;" ><tr><th>姓名</th><th>金额</th><th>时间</th></tr><tr><td rowspan="2">张三</td><td>5000</td><td>2020.09.28</td></tr><tr><td>3000</td><td>2020.09.29</td></tr><tr><td colspan="3">备注：张三的银行流水dddsf</td></tr></table>

相关属性：
colspan:代表合并列，要合并几列，属性值就写几
rowspan:代表合并行，要合并几行，属性值就写几

html5保留的框架元素iframe

iframe简介

在这里插入图片描述

iframe简单代码示例：

<iframe src="index2.html" frameborder="0" style="width:100%;height:600px;"></iframe>

工作台代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>index</title><style>.iframe_box{display:flex;}.iframe_box .ilf{width:15%;}.iframe_box .irt{width:85%;}</style>
</head>
<body><div class="iframe_box"><div class="ilf"><ul><li><a href="http://www.baidu.com" target="gs">菜单1</a></li><li><a href="index2.html" target="gs">菜单2</a></li><li><a href="http://hbu.cn" target="gs">菜单3</a></li></ul></div><div class="irt"><iframe src="http://www.baidu.com" name="gs" frameborder="0" style="width:100%;height:600px;"></iframe></div></div> 
</body>
</html>

html5保留的通用常用属性

在这里插入图片描述

第三章：Form表单相关的HTML元素知识

1.form表单

form表单相关属性

在这里插入图片描述

什么是请求参数

举例：请求地址是javags.jsp?username=gs&age=28&sex=1
目的：与后台交互及传递数据
解释：
①、以？为分隔，？前面的是具体的后代请求地址；？后面的是具体的请求所需要传送的数据对
②、请求参数是有请求参数对以&连接的，每一对内部由=连接的
生成请求参数的规则
在这里插入图片描述
请求方式区别
get请求：请求的数据少（但是是相对的），能在浏览器地址栏中看见请求参数，一般 查 操作使用get请求
post请求：请求的数据多，不能在浏览器地址栏中看见请求参数，一般 增、删、改 操作使用post请求

2. html5保留的表单控件及属性

input表单控件

①、当type=“text”，生成单行文本框;
②、当type=“password”，生成密码框，与文本框的区别是，输入的内容是不可见；
③、当type=“radio”，生成单选框，如要生成一组单选框，还需要指定name属性值一致；
④、当type=“checkbox”，生成复选框，如要生成一组复选框，还需要指定name属性值一致；
⑤、当type=“file”，生成文件上传域，可上传文件；
⑥、当type=“image”，生成图像域，主要作用跟提交按钮一样，就是提交的功能；
⑦、当type=“submit”，生成提交按钮，让表单提交的功能，按钮的文字默认是提交，可以通过value属性来修改；
⑧、当type=“reset”，生成重置按钮，让表单里所有的表单控件内容重置，不是清空，按钮的文字默认是重置，可以通过value属性来修改；
⑨、当type=“button”，生成普通按钮，没有任何能力，按钮的文字没有默认值，需要通过value属性来设置；

readonly设置表单控件只读，就是不可修改
disabled设置表单控件可不用，与readonly的区别，readonly是外表样子看着不可用，而disable是不仅外边看着不可用，而且真的不可用（无法生成请求参数）
checked设置单选框或者复选框时候默认选中

button按钮

相关属性：
在这里插入图片描述
注意：
1、button与input生成按钮的区别：
button是有开始，结束标签的，所以按钮的文字需要写到开始和结束标签之间；
input是空标签，按钮的文字，是通过value属性来设置的
2、button不设置type属性时，type属性的值默认是submit，天生具有表单提交的能力

下拉框与列表框select

①、下拉框与列表框如何形成请求参数
在这里插入图片描述
②、列表框相关属性
在这里插入图片描述
③、option与optgroup元素及相关属性
在这里插入图片描述

文本域textarea

①、相关属性
在这里插入图片描述
注意：
textarea控件如果要设置默认值，需要在textarea开始和结束标签之间设置，不能通过value属性；但是，如果需要使用JavaScript获取textarea的内容时，需要使用value属性。

fieldset与legend

对于表单控件样式上的分组，实例代码如下：
在这里插入图片描述

3. html5新增的常用表单属性

form属性

在这里插入图片描述

formaction属性

在这里插入图片描述
在这里插入图片描述

formxxx属性

在这里插入图片描述

autofocus属性

在这里插入图片描述

placeholder属性

在这里插入图片描述

list属性

在这里插入图片描述

autocomplete属性

在这里插入图片描述

4. html5新增的常用表单元素

新增的input控件

在这里插入图片描述

output控件（可用其他显示的html元素替代）

在这里插入图片描述

<form action=""><input type="color" id="color1" name="color1" oninput="a.value= this.value"><output for="color1" name="a"></output><br><br><br><input type="range" id="range1" name="range1" min="0" max="100" step="5" oninput="b.value= this.value"><output for="range1" name="b"></output>
</form>

注意：
output是开始和结束标签，不是空标签，跟input标签不一样，input是空标签
oninput：监听表单控件值实时发生变化触发的事件
onchange：监听表单控件值最终改变时触发的事件

meter控件

相关属性
在这里插入图片描述
代码实例：

<meter value="120" min="10" max="200" low="30" high="160">120</meter>千米/小时

注意：
meter是开始和结束标签，不是空标签，

progress控件

相关属性：
在这里插入图片描述
代码实例：

<progress max="100" value="20"></progress>

注意：
progress是开始和结束标签，不是空标签，

5. html5表单验证

基本表单验证（属性验证）

①、相关属性：
在这里插入图片描述
②、代码：

<form action="#"><input type="text" required name="gs"/><br/><input type="text" required name="book" pattern="\d{3}-\d-\d{3}-\d{5}"></br><input type="number"name="box" min="0" max="100" step="5" required></br/><input type="submit"></form>
<form action="#"><input type="text" required name="gs"/><br/>
自定义表单验证

①、checkValidity()方法：
在这里插入图片描述

    <form action="add" method="post">生日：<input name="birth" id="birth" type="date"/><p>邮件地址：<input name="email" id="email" type="email"/><p><input type="submit" onclick="return check();"></form>	<script>var check = function(){return commonCheck('birth',"生日","字段必须是有效的日期") && commonCheck('email',"邮件地址","字段必须符合电子邮件的格式");}var commonCheck = function(field,fieldName,tip){var target = document.getElementById(field);if(target.value.trim() ==""){alert(fieldName+"字段必须填写");return false;}else if(!target.checkValidity()){alert(fieldName+tip);return false;}return true;}</script>

额外知识点：
1、trim()方法是去掉字符串左右的空格
2、return false 作用一：是阻止默认事件发生；作用二：函数提前结束；
②、setCustomValidity()方法(极不推荐使用)：
在这里插入图片描述
在这里插入图片描述
③、novalidate | formnovalidate属性（关闭校验）：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/491995.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

我的NPI项目之Android 安全系列 -- Android Strongbox 使能(一)

我的NPI项目之Android 安全系列 -- Android Strongbox 使能(一)

这里借用Android14高通相关的技术文档作为基础文档&#xff0c;该文档描述的是基于NFC的secure element. NFC型号为SN220. 有些概念的说明&#xff1a; 1. RoT 在我们目前的这个上下文中&#xff0c;首先RoT下几个内容&#xff0c;Bootinfo/ Additonal params(images hash) /…
阅读更多...
曲线生成 | 图解B样条曲线生成原理(附ROS C++/Python/Matlab仿真)

曲线生成 | 图解B样条曲线生成原理(附ROS C++/Python/Matlab仿真)

目录 0 专栏介绍1 控制点计算之插值2 控制点计算之近似3 仿真实现3.1 ROS C实现3.2 Python实现3.3 Matlab实现 0 专栏介绍 &#x1f525;附C/Python/Matlab全套代码&#x1f525;课程设计、毕业设计、创新竞赛必备&#xff01;详细介绍全局规划(图搜索、采样法、智能算法等)&a…
阅读更多...
备考2024年小学生古诗文大会正当时：往届真题15题和独家解析

备考2024年小学生古诗文大会正当时：往届真题15题和独家解析

“一年之计在于春”&#xff0c;如何备考2024年小学生古诗文大会&#xff1f;我的建议是现在就开始&#xff0c;每天每周花点时间&#xff0c;夯实古诗文大会试题背后的知识&#xff0c;既能在比赛中取得不错的成绩&#xff0c;还能对语文学习有长远的促进。 我们今天来看15道往…
阅读更多...
C# Onnx 使用onnxruntime部署夜间雾霾图像的可见度增强

C# Onnx 使用onnxruntime部署夜间雾霾图像的可见度增强

目录 介绍 模型信息 效果 项目 代码 下载 C# Onnx 使用onnxruntime部署夜间雾霾图像的可见度增强 介绍 github地址&#xff1a;https://github.com/jinyeying/nighttime_dehaze [ACMMM2023] "Enhancing Visibility in Nighttime Haze Images Using Guided APSF a…
阅读更多...
【Vue3】学习watch监视：深入了解Vue3响应式系统的核心功能（上）

【Vue3】学习watch监视：深入了解Vue3响应式系统的核心功能（上）

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…
阅读更多...
c++入门学习⑧——模板

c++入门学习⑧——模板

目录 前言 基本介绍 什么是模板&#xff1f; 作用 特点 分类 函数模板 语法 使用方式 注意事项 函数模板和普通函数区别 普通函数和函数模板的调用规则 局限性 类模板 语法 类模板的成员函数创建时机 类模板实例化对象 类模板实例化对象做函数参数 类模板成…
阅读更多...
JAVA工程师面试专题-《Mysql》篇

JAVA工程师面试专题-《Mysql》篇

目录 一、基础 1、mysql可以使用多少列创建索引&#xff1f; 2、mysql常用的存储引擎有哪些 3、MySQL 存储引擎&#xff0c;两者区别 4、mysql默认的隔离级别 5、数据库三范式 6、drop、delete 与 truncate 区别&#xff1f; 7、IN与EXISTS的区别 二、索引 1、索引及索…
阅读更多...
✅鉴权—cookie、session、token、jwt、单点登录

✅鉴权—cookie、session、token、jwt、单点登录

基于 HTTP 的前端鉴权背景cookie 为什么是最方便的存储方案&#xff0c;有哪些操作 cookie 的方式session 方案是如何实现的&#xff0c;存在哪些问题token 是如何实现的&#xff0c;如何进行编码和防篡改&#xff1f;jwt 是做什么的&#xff1f;refresh token 的实现和意义ses…
阅读更多...
c# 广度优先搜索（Breadth-First Search，BFS）

c# 广度优先搜索（Breadth-First Search，BFS）

在这篇文章中我将讨论用于树和图的两种遍历机制之一。将使用 C# 示例介绍广度优先搜索 (BFS)。图是最具挑战性和最复杂的数据结构之一。 广度优先搜索的工作原理&#xff1a;广度优先搜索 &#xff08;BFS&#xff09;是一种探索树或图的方法。在 BFS 中&#xff0c;您首先探索…
阅读更多...
C# Onnx Yolov8-OBB 旋转目标检测

C# Onnx Yolov8-OBB 旋转目标检测

目录 效果 模型信息 项目 代码 下载 C# Onnx Yolov8-OBB 旋转目标检测 效果 模型信息 Model Properties ------------------------- date&#xff1a;2024-02-26T08:38:44.171849 description&#xff1a;Ultralytics YOLOv8s-obb model trained on runs/DOTAv1.0-ms.ya…
阅读更多...
LabVIEW燃料电池船舶电力推进监控系统

LabVIEW燃料电池船舶电力推进监控系统

LabVIEW燃料电池船舶电力推进监控系统 随着全球经济一体化的推进&#xff0c;航运业的发展显得尤为重要&#xff0c;大约80%的世界贸易依靠海上运输实现。传统的船舶推进系统主要依赖于柴油机&#xff0c;这不仅耗能高&#xff0c;而且排放严重&#xff0c;对资源和环境的影响…
阅读更多...
WPF 开发调试比较：Visual Studio 原生和Snoop调试控制台

WPF 开发调试比较：Visual Studio 原生和Snoop调试控制台

文章目录 前言运行环境简单的WPF代码实现一个简单的ListBoxVisual Studio自带代码调试热重置功能测试实时可视化树查找窗口元素显示属性 Snoop调试使用Snoop简单使用调试控制台元素追踪结构树Visual/可视化结构树Logical/本地代码可视化树AutoMation/自动识别结构树 WPF元素控制…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023