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

news2025/1/25 10:54:51

一:显示相关的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元素

 <!-- H1H6的代码样例 -->
<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">H1H6</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.coloradmin.cn/o/1470636.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

社交媒体变革者:剖析Facebook对在线互动的贡献

随着数字化时代的蓬勃发展&#xff0c;社交媒体已经成为人们日常生活中不可或缺的一部分。在这个领域的发展中&#xff0c;Facebook作为先行者和领导者&#xff0c;对在线互动的演变和发展产生了深远的影响。本文将深入剖析Facebook在社交媒体领域的贡献&#xff0c;以及它对在…

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

基于 HTTP 的前端鉴权背景cookie 为什么是最方便的存储方案&#xff0c;有哪些操作 cookie 的方式session 方案是如何实现的&#xff0c;存在哪些问题token 是如何实现的&#xff0c;如何进行编码和防篡改&#xff1f;jwt 是做什么的&#xff1f;refresh token 的实现和意义ses…

探索水下低光照图像检测性能,基于YOLOv6全系列【n/s/m/l】参数模型开发构建海底生物检测识别分析系统

底这类特殊数据场景下的检测模型开发相对来说比较少&#xff0c;在前面的博文中也有一些涉及&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 试探索水下目标检测&#xff0c;基于yolov5轻量级系列模型n/s/m开发构建海底生物检测系统》 《基于YOLOv5C3CBAMCBAM注意力…

查看笔记本电池健康状态-windows11

在 Windows 11 中获取详细的电池报告 Windows 11 中内置的 Powerfg 命令行选项来生成电池报告。 在任务栏上选择“搜索”&#xff0c;键入“cmd”&#xff0c;长按&#xff08;或右键单击&#xff09;“命令提示符”&#xff0c;然后选择“以管理员身份运行” ->“是”。 …

springboot215基于springboot技术的美食烹饪互动平台的设计与实现

美食烹饪互动平台的设计与实现 摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统美食信息管理难度大&…

【电子书】数据库

资料 wx&#xff1a;1945423050 整理了一些互联网电子书&#xff0c;推荐给大家 数据库 ClickHouse原理解析与应用实践.epubECharts数据可视化&#xff1a;入门、实战与进阶.epubHAWQ数据仓库与数据挖掘实战.epubHBase不睡觉书.epubHBase原理与实践.epubMySQL 5.7从零开始学&…

主机开了电脑显示无视频输入怎么办 电脑显示无视频输入的解决方法

照理来说&#xff0c;我们开机之后电脑显示器就会进入工作状态&#xff0c;然后进入桌面&#xff0c;但最近由用户反映自己在开机之后显示无视频输入的字样&#xff0c;很是疑惑&#xff0c;那么电脑显示无视频输入怎么办?今天小编就专门给大家来讲一讲主机开了电脑显示无视频…

接口自动化测试用例如何设计

说到自动化测试&#xff0c;或者说接口自动化测试&#xff0c;多数人的第一反应是该用什么工具&#xff0c;比如&#xff1a;Python Requests、Java HttpClient、Apifox、MeterSphere、自研的自动化平台等。大家似乎更关注的是哪个工具更优秀&#xff0c;甚至出现“ 做平台的 &…

Python文件和异常(二)

目录 三、异常 &#xff08;一&#xff09;处理 ZeroDivisionError 异常 &#xff08;二&#xff09;使用 try-except 代码块 &#xff08;三&#xff09;使用异常避免崩溃 &#xff08;四&#xff09;else 代码块 &#xff08;五&#xff09;处理 FileNotFoundError 异常…

基于相位的运动放大:如何检测和放大难以察觉的运动(02/2)

目录 一、说明二、算法三、准备处理四、高斯核五、带通滤波器六、复杂的可操纵金字塔七、最终预处理步骤八、执行处理九、金字塔的倒塌十、可视化结果十一、结论 一、说明 日常物体会产生人眼无法察觉的微妙运动。在视频中&#xff0c;这些运动的幅度小于一个像素&#xff0c;…

【电子书】系统_网络_运维

资料 wx&#xff1a;1945423050 整理了一些互联网电子书&#xff0c;推荐给大家 系统_网络_运维 4G无线网络原理及优化.epubHyperledger Fabric 技术内幕&#xff1a;架构设计与实现原理.epubJSP应用与开发技术&#xff08;第3版&#xff09;.epubKali Linux 2网络渗透测试实…

前后端分离Vue+node.js在线学习考试系统gqw7o

与其它应用程序相比&#xff0c;在线学习平台的设计主要面向于学校&#xff0c;旨在为管理员和学生、教师、院系提供一个在线学习平台。学生、教师、院系可以通过系统及时查看公告信息等。 在线学习平台是在Windows操作系统下的应用平台。为防止出现兼容性及稳定性问题&#xf…

深入理解指针2

各位小伙伴们&#xff0c;我们继续来学习指针&#xff0c;指针和结构体以及动态内存管理对后面的数据结构学习有非常大的帮助&#xff0c;所有我们一定要把这些知识点学会。OK,正式进入学习之旅吧 1.数组名的理解 在上⼀个章节我们在使⽤指针访问数组的内容时&#xff0c;有这…

【RN】学习使用 Reactive Native内置UI组件

简言 当把导航处理好后&#xff0c;就可以学习使用ui组件了&#xff08;两者没有先后关系&#xff0c;个人习惯&#xff09;。 在 Android 和 iOS 开发中&#xff0c;一个视图是 UI 的基本组成部分&#xff1a;屏幕上的一个小矩形元素、可用于显示文本、图像或响应用户输入。甚…

300分钟吃透分布式缓存-14讲:大数据时代,MC如何应对新的常见问题?

大数据时代 Memcached 经典问题 随着互联网的快速发展和普及&#xff0c;人类进入了大数据时代。在大数据时代&#xff0c;移动设备全面融入了人们的工作和生活&#xff0c;各种数据以前所未有的 速度被生产、挖掘和消费。移动互联网系统也不断演进和发展&#xff0c;存储、计…

低代码与大语言模型的探索实践

低代码系列文章&#xff1a; 可视化拖拽组件库一些技术要点原理分析可视化拖拽组件库一些技术要点原理分析&#xff08;二&#xff09;可视化拖拽组件库一些技术要点原理分析&#xff08;三&#xff09;可视化拖拽组件库一些技术要点原理分析&#xff08;四&#xff09;低代码…

推荐系统经典模型YouTubeDNN

文章目录 YouTubeDNN概念YouTubeDNN模型架构图YouTubeDNN召回阶段YouTubeDNN层级介绍 YouTubeDNN排序阶段YoutubeDNN模型中的一些Trick负采样问题特征构造上下文选择 总结 YouTubeDNN概念 YouTubeDNN是YouTube用于做视频推荐的落地模型&#xff0c;其大体思路就是召回阶段使用…

【MySQL面试复习】什么是聚簇索引(聚集索引)和非聚簇索引(二级索引)/什么是回表?

系列文章目录 在MySQL中&#xff0c;如何定位慢查询&#xff1f; 发现了某个SQL语句执行很慢&#xff0c;如何进行分析&#xff1f; 了解过索引吗&#xff1f;(索引的底层原理)/B 树和B树的区别是什么&#xff1f; 系列文章目录什么是聚簇索引&#xff08;聚集索引&#xff09…

逆向茶话会笔记

安卓逆向 用用burp设置代理或者用charles抓包 windows httpopen 类比web站点渗透测试 推荐书 飞虫 安卓大佬不怎么打ctf 喜欢在看雪和吾爱破解 提问环节 q websocket grpc抓包有什么推荐的工具&#xff1f; a 不太了解 游戏安全和llvm 既要逆游戏也要逆外挂 逆游戏入…

分布式知识整理

分布式锁 以商场系统超卖现象举例 超卖现象一 现象&#xff1a; 商品卖出数量超出了库存数量。 产生原因&#xff1a; 扣减库存的动作在程序中进行&#xff0c;在程序中计算剩余库存&#xff0c;在并发场景下&#xff0c;导致库存计算错误。 代码复现 es.shutdown(); cycl…