Web前端-HTML（一）

已于 2022-10-25 10:06:45 修改
阅读量369 收藏
点赞数
分类专栏： # 计算机（Java进阶）初级进阶 阶段 文章标签： 前端 html html5 intellij idea
于 2022-06-03 03:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42171159/article/details/124816472
版权
本文详细介绍了HTML的基础知识，包括HTML的发展历程、优势、W3C标准和常用的IDE。接着，深入讲解了HTML的基本结构和常用标签，如标题、段落、图像、超链接、网页布局、列表、表格、媒体元素以及表单元素的使用。内容涵盖了从简单的文本样式到复杂的表单验证，为初学者提供了全面的HTML学习指南。
摘要由CSDN通过智能技术生成

文章目录

一、初始HTML

1.1 概述

在这里插入图片描述
在这里插入图片描述
HTML：超文本标记语言（HyperText Markup Language）

“超文本”就是指页面内可以包含特殊文字、图片、链接、视频等非文字内容。
“标记”就是使用标签的方式将需要的展示的内容包起来。

HTML都是预定义好的标签，每个标签有自己独特的展示效果。

今天的主要内容:就是学习人家提供好标签的意思,以及这些标签的属性

<深圳></深圳> 自定义

1.2 发展史

在这里插入图片描述

1.3 优势

世界知名浏览器厂商对HTML5的支持
微软
Google
苹果
Opera
市场需求
跨平台

1.4 W3C标准

在这里插入图片描述

1.5 常见IDE

在这里插入图片描述

二、网页基本标签

前端工具HBuilder下载

2.1 HTML的基本结构

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--meta描述性标签，它用来描述我们的网站的一些信息-->
    <!--meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meata name = "keywords" contenet="Daniel正在温习前端"/>
    <meta name="descript" content="来博客学习Java第二阶段Html"/>
    <!--title网页标题-->
    <title>我的第一个网页</title>
</head>
<!--body标签代表网页主体-->
<body>
        Hello，World！
</body>
</html>

在这里插入图片描述

2.2 网页的基本标签

标题标签
段落标签
换行标签
水平标签
字体样式标签
注释和特殊符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，一只没有眼睛一只没有尾巴，</p>
<p>真奇怪，真奇怪，两只老虎，两只老虎，跑得快，</p>
<p>跑得快，一只没有眼睛，一只没有尾巴，真奇怪，真奇怪。</p>

<!--换行标签-->
两只老虎，两只老虎，<br/>
跑得快，跑得快，一只没有眼睛一只没有尾巴，<br/>
真奇怪，真奇怪，两只老虎，两只老虎，跑得快<br/>
跑得快，一只没有眼睛，一只没有尾巴，真奇怪<br/>

<!--水平标签-->
<hr/>
<!--字体样式标签-->

跑得快，真奇葩 <br/>

粗体：<strong>strong标签：跑得快，真奇葩</strong> <br/>
<b>b标签：跑得快，真奇葩</b>

斜体：<br/><em>em标签:跑得快，真奇葩</em><br/>
<i>i标签：跑得快，真奇葩</i><br/>
下划线 <br/>
<u>跑得快，真奇葩</u>

<!--注释和特殊符号-->
注释<!--注释标签-->
空格标签：&nbsp;
跑得快，跑得快
跑得快，&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;跑得快，

</body>
</html>

运行结果为：
在这里插入图片描述

三、图像，超链接，网页布局

3.1 常见的图像格式

在这里插入图片描述
案例素材：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--
    ../   代表上一级
    src代表相对位置（必填）
    alt代表图片名字（必填）

    title 悬浮显示
-->
<img src="1.jpg" alt="Daniel的头像" title="Daniel头像" width="10%" height="10%">

</body>
</html>

显示：
在这里插入图片描述

3.2 链接标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>

<a name="top">顶部</a>

<!--
    _blank  新窗口打开
    _self  自己的，本页打开
-->

<!--超链接标签-->
<a href="图像标签.html"  target="_blank">打开图像标签页</a>
<a href="https://www.baidu.com" target="_self">百度一下</a>

<!--锚链接-->
<!--意思是跳到最顶部或最底部或其它页的顶低部-->

<img src="1.jpg" alt="Daniel的头像" title="Daniel头像" width="100%" height="100%">
<img src="1.jpg" alt="Daniel的头像" title="Daniel头像" width="100%" height="100%">
<img src="1.jpg" alt="Daniel的头像" title="Daniel头像" width="100%" height="100%">

<a href="#top">点击可到顶部</a>

<a href="图像标签.html#down">跳到图像标签低部</a>
<!--功能链接
邮箱：mailto
-->
<a href="mailto:1982472575qq.com">向我的邮箱发送文件</a>

<a target="_blank"
   href="http://wpa.qq.com/msgrd?v=3&uin=1966305104&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:1966305104:53"
         alt="点击,请联系Daniel，谢谢~" title="点击,请联系Daniel，谢谢~"/></a>

</body>
</html>

图像标签低部加代码：低部

(1）进入QQ推广——》推广工具
在这里插入图片描述

3.3 行内元素和块元素

在这里插入图片描述

四、列表，表格，媒体元素

4.1 列表

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>c#</li>
    <li>go</li>
</ol>
<!--无序列表-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>c#</li>
    <li>go</li>
</ul>
<!--自定义列表-->
<dl>
    <dt>学科</dt>

    <dd>语文</dd>
    <dd>数学</dd>
    <dd>英语</dd>
    <dd>科学</dd>
</dl>

</body>
</html>

运行结果显示：
在这里插入图片描述

4.2 表格

blog.csdnimg.cn/6ef2874b34b44b739cacb2c3c43ce6bf.png)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<!--有table不用body标签-->

<table border="1px" align="center" width="50%" cellspacing="0">
    <tr align="center">
        <td colspan="3">学生成绩</td>
       <!-- <td></td>
        <td></td>-->
    </tr>
    <tr align="center">
        <td rowspan="2">Daniel</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr align="center">
        <!--<td></td>-->
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr align="center">
        <td rowspan="2">shenzhen</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr align="center">
        <!--<td></td>-->
        <td>数学</td>
        <td>100</td>
    </tr>
</table>


</html>

运行结果为：
在这里插入图片描述

4.3 媒体元素（音视频）

4.3.1 视频元素

video

4.3.2 音频元素

audio
音视频素材下载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音视频</title>
</head>
<body>

<!--
    controls 表示进度
    autoplay  表示自动播放
-->

<video src="resource/vidoe/粤语吕晨%20-%20习惯失眠%20(悲伤女声版).mp3" controls autoplay></video>

<audio src="resource/audio/大欢%20-%20听闻远方有你.mkv" controls autoplay></audio>

</body>
</html>

显示：
在这里插入图片描述

4.4 页面结构分析

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>

<head> <h2>页面头部</h2></head>
<section> <h2>页面主体</h2></section>
<footer><h2>页面底部</h2></footer>
</body>
</html>

显示效果：
在这里插入图片描述

4.5 iframe内联框架

在这里插入图片描述
打开B站点击分享复制嵌入代码到html中。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe内联框架</title>

</head>
<body>

<iframe src="" frameborder="0"  name="hollow" height="300px" width="1000px">
    <a href="">百度一下</a>

</iframe>

<a href="https://blog.csdn.net/weixin_42171159" target="hollow">百度一下下</a>



<!--B站视频-->
<!--<iframe src="//player.bilibili.com/player.html?aid=641535390&bvid=BV12Y4y147JX&cid=719208675&page=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>-->

</body>
</html>

运行结果：
在这里插入图片描述

五、表单及表单应用

5.1 表达语法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交</title>
</head>
<body>

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

<form action="https://www.baidu.com/" method="post">
    <!--文本输入框：input type="text"-->
    <p>用户名：<input type="text" name="username"></p>
    <!--密码输入框input type="password"-->
    <p>密码：<input type="password" name="pwd"></p>

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

</form>


</body>
</html>

在这里插入图片描述

按F12,提交完可查看
在这里插入图片描述

5.2 表单元素格式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交</title>
</head>
<body>

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

     value="Daniel"   默认初始值
     size="8"       文本框的长度
     maxlength="30"   最长能写几个字符
-->

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

    <!--
        input type="radio"
        value:单选框的值
        name:表示组

    -->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked>男孩
        <input type="radio" value="girl" name="sex">女孩
    </p>

    <!--多选
    input type="checkbox"
    checked  初始化
    -->
    <p>
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="game" name="hobby">游戏
        <input type="checkbox" value="eat" name="hobby" checked>吃饭
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
    </p>

    <!--
        文件
    -->
    <input type="file" value="files">

    <!--
    文本框
    -->
       <p> <textarea name="textarea" cols="20px"  rows="10px" >文本内容</textarea></p>
    <!--
        下拉框选择select
    -->
    <select name="选择国家">
        <option value="china">中国</option>
        <option value="us">美国</option>
        <option value="Janpan" >日本</option>
        <option value="Indra" selected>印度</option>
        <option value="uk">英国</option>
    </select>
    <!--
    按钮
        input type="button"  普通按钮
      input type="reset"    重置
      input type="image"    图像按钮
      input type="submit"   提交按钮
    -->
    <p>
        <input type="button" name="bnt" value="提交">
        <input type="reset" value="清空表单">
      <!--  <input type="image" src="1.jpg">-->

        <!--邮箱验证mail-->
        <input type="email" name="email">
        <!--数字验证-->
        <input type="number" name="number" min="0" max="100" step="10">
        <!--滑块-->
        <input type="range" name="range">
        <!--搜索-->
        <input type="search" name="search">
        <!--URL-->
        <input type="url" name="url">
        <input type="submit">
        <input type="reset">
    </p>
</form>
</body>
</html>

显示效果为：
在这里插入图片描述
在这里插入图片描述

5.3、表单的应用

ex.案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
<table align="center">
    <tr>
        <td><a href="">会员注册</a></td>
        <td colspan="2">USER REGISTER</td>
        <!--<td></td>-->
    </tr>
    <tr>
        <td align="right">用户名</td>
        <td colspan="2">
            <input type="username" name="username" size="50px">
        </td>
        <!--<td></td>-->
    </tr>
    <tr>
        <td align="right">密码</td>
        <td colspan="2">
            <input type="password" name="pwd" size="50px" >
        </td>
       <!-- <td></td>-->
    </tr>
    <tr>
        <td align="right">确认密码</td>
        <td colspan="2">
            <input type="password" name="pwd" size="50px">
        </td>
       <!-- <td></td>-->
    </tr>
    <tr>
        <td align="right">Email</td>
        <td colspan="2">
            <input type="email" name="email" size="50px">
        </td>
       <!-- <td></td>-->
    </tr>
    <tr>
        <td align="right">姓名</td>
        <td colspan="2">
            <input type="text" name="name" size="50px">
        </td>
        <td></td>
    </tr>
    <tr>
        <td align="right">性别</td>
        <td colspan="2">
            <input type="radio" name="sex" value="男" checked="checked">
            <input type="radio" name="sex" value="女">
             
        </td>
        <!--<td></td>-->
    </tr>
    <tr>
        <td align="right">出生日期</td>
        <td colspan="2">
            <input type="birthday" name="birthday" size="50px">
        </td>
        <!--<td></td>-->
    </tr>
    <tr>
        <td align="right">验证码</td>
        <td colspan="2">
            <input type="text">

        </td>
        <td> <img src="" alt=""></td>
    </tr>
    <tr>
        <td></td>
        <td colspan="2">
            <input type="submit" value="注册">
        </td>
       <!-- <td></td>-->
    </tr>
</table>
</form>
</body>
</html>

结果显示为：
在这里插入图片描述

隐藏域 hidden
只读 readonly
禁用 disabled

六、表单初级验证

思考：为什么要进行表单验证？

常用方式

placeholder 提示信息：eg:请输入用户名
required 非空判断
pattern 正则表达式

Daniel521-Spark
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Java基础-数组（五）
Daniel的博客
05-02 1948
文章目录1.数组的概述2.数组声明创建1.数组的定义：2.理解数组3.创建与声明4.jvm内存分析5.三种初始化1.静态初始化2.动态初始化3.数组的默认初始化6.数组的四个基本特点3.数组使用4.多维数组5.Arrays类6.稀疏数组 1.数组的概述 数组是相同类型数据的有序集合 数组描述的是相同类型的若干个数据，按照一定的先后次序排列组合而成。 其中，每一个数据称作一个数组的元素，每个数组元素可以通过一个下标来访问它们。 使用数组的原因： （1）没有数组：存在多个变量，需要声明多个变量的名称，这些名称
fuck japan
软体疯子专栏
01-08 4万+
五、Spring（2）
Daniel的博客
07-22 217
如果@Autowired自动装配的环境比较复杂，自动装配无法通过一个注解【@Autowired】完成的时候，我们可以使用@Qualifier(value=“xxx”）去配置@Autowired的使用，指定一个唯一的bean对象注入！byname的时候，需要保证所有bean的id唯一，并且这个bean需要和自动注入的属性的set方法的值一致！bytype的时候，需要保证所有bean的class唯一，并且这个bean需要和自动注入的属性的类型一致！使用注解需要导入context约束，增加注解的支持！......
servlet模板
dxm809的博客
09-19 264
package ${enclosing_package}; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class ${primary_ty.
前端页面三级目录实现
weixin_42409913的博客
11-02 2290
一：先看效果： 二：代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
web前端html代码,WEB前端--HTML(示例代码)
weixin_34335039的博客
06-10 4747
HTML基础一、基本概念1、简介HTML：网页超文本标记语言，不是编程语言，是描述性的标记语言。2、基本结构3、标记：html开头，表示网页文档的开始二、编写方法文档工具，如：记事本IDE三、浏览html文件1、运行效果如果用pycharm编写，不要直接运行，直接找到文件路径打开这个文件最快捷。因为pycharm直接运行是作为一个服务监听起来，比较慢。2、看源文件鼠标右键-->查看源文件HT...
web前端开发（一）—HTML基础
热门推荐
mdxiaohu的博客
07-31 10万+
  目录 web前端简介 什么是HTML？ HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、密码框 表单元素-多行文本框 表单元素-选择框 表单元素-下拉选择框 表单元素-按钮...
WEB前端-背景属性
syh_SYH0321的博客
10-21 5119
img和背景图片的区别： img不需要专门写宽高就能够显示在页面上 而背景图片默认是撑不开容器的 需要专门写宽高 一般产品插入图都推荐使用img 而一些小的icon 或者很少更新的图片 再或者超大的图片推荐使用背景图 而且背景图可以让内部的文字盖在上面，但是img不行（除非后期用定位）取值：no-repeat不平铺，repeat-x横向平铺，repeat-y纵向平铺，repeat横向纵向都平铺------默认。closest-side： 指定径向渐变的半径长度为从圆心到离圆心最近的边。
WEB前端-案例汇总
11-08
这个资源大汇总几乎涵盖了前端开发的所有领域，对于想要深入学习和理解Web前端技术的人来说，是一份非常宝贵的学习资料。 1. HTML基础：HTML（HyperText Markup Language）是构建网页的基础，包括标签、属性、结构...
前端-web前端-模板-各行各业二十个模板7.10.4
07-10
前端-web前端-模板-各行各业二十个模板7.10.4 前端-web前端-模板-各行各业二十个模板7.10.4 前端-web前端-模板-各行各业二十个模板7.10.4 前端-web前端-模板-各行各业二十个模板7.10.4
前端-web前端-模板-各行各业二十个模板7.10.6
07-10
前端-web前端-模板-各行各业二十个模板7.10.6 前端-web前端-模板-各行各业二十个模板7.10.6 前端-web前端-模板-各行各业二十个模板7.10.6 前端-web前端-模板-各行各业二十个模板7.10.6
前端-web前端-模板-各行各业二十个模板7.13.2
07-13
前端-web前端-模板-各行各业二十个模板7.13.2 前端-web前端-模板-各行各业二十个模板7.13.2 前端-web前端-模板-各行各业二十个模板7.13.2 前端-web前端-模板-各行各业二十个模板7.13.2 前端-web前端-模板-各行各业二...
前端-web前端-模板-各行各业二十个模板7.10.3
07-10
前端-web前端-模板-各行各业二十个模板7.10.3 前端-web前端-模板-各行各业二十个模板7.10.3 前端-web前端-模板-各行各业二十个模板7.10.3 前端-web前端-模板-各行各业二十个模板7.10.3 前端-web前端-模板-各行各业二...
前端开发攻略---在Vue3项目中修改Element-Plus主题色
nibabaoo的博客
08-22 221
在Vue3项目中修改Element-Plus主题色
【js】各类前端输入校验方法
galaxyJING的博客
08-21 359
【代码】【js】各类前端输入校验方法。
vue中定义一个url文件,在vue文件中引入
weixin_65767506的博客
08-22 293
1.在src/utils文件夹下创建一个url.js。3.在其他vue文件中引入。2.url.js的内容为。4.在挂载时打印一下。打印出来就可以用了.
浅谈JavaScript 框架在现代 Web 开发中的作用
08-21 527
随着近年来 Web 开发的快速发展，JavaScript 框架已成为用于构建任何应用程序的强大、灵活和可扩展元素的重要实用程序。一些框架，如Angular、React、Vue.JS等，有助于以系统的方式处理固有的网站开发复杂性，以提高效率。它们提供已经为基本编程功能和常规任务编写的 JavaScript 代码，从而缩短了必要的原始编码时间。此外，它们还增加了 Web 应用程序的功能和交互性，从...
【IC前端虚拟项目】用例的完善与补充
moon9999的博客
08-20 102
当然只不过是参考，个人不建议在寄存器测试这个环节投入太多的经历，也没有必要非在环境中讲寄存器模型以seq方式呈现，只要用起来方便就是最合适的。如果之后在实际的项目中寄存器模型时通过seq的方式集成到环境中的（比如我现在负责的项目，验证环境就是如此），那么转换过来也是没有什么难度的，这点大可放心。此外，在组织更多随机用例的过程中可以练习多种不同约束的transaction以不同的比例关系通过同一个seq/sqr uvm_do的操作。好了，具体的用例大家可以参考我的代码，尽量以自己的思路来进行扩充。
前端宝典十六：深入浅出8大设计模式
最新发布
franktaoge的博客
08-24 833
本文主要探讨前端开发中的各种设计模式，主要分类有： - 单例模式 - 建造者模式 - 代理模式 - 装饰器模式 - 适配器模式 - 策略模式 - 观察者模式 - 发布订阅模式 通过对他们实际开发中的使用场景的解析，深入浅出的一起更全面直观的进行学习：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Daniel521-Spark

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值