HTML学习Day01(狂神说Java)

已于 2022-04-07 15:03:32 修改
阅读量650 收藏
点赞数
文章标签： 学习 java intellij-idea
于 2022-03-26 10:57:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43421528/article/details/123752183
版权

文章目录

HTML详解

1.初识HTML

1.1 什么是HTML

  • HTML
    • Hyper Text Markup Language(超文本标记语言)超文本包括：文字，图片，音频，视频，动画等

1.2 HTML发展史

在这里插入图片描述

1.3 HTML的优势

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

1.4 W3C标准

  • W3C
    • World Wide Wed Consortium(万维网联盟)
    • 成立于1994年，Wed技术领域最权威和具影响力的国际中立性技术标准机构
    • http://www.w3.org/
    • http://www.chinaw3c.org/
  • W3C标准包括
    • 结构化标准语言（HTML，XML）
    • 表现标准语言（CSS）
    • 行为标准（DOM，ECMAScript）
  • 常见IDE
    • 记事本
    • DreamWeaver
    • IDEA
    • WebStorm
    • ……

1.5 HTML基本结构

在这里插入图片描述

2.网页基本标签

2.1 网页基本信息

  • DOCTYPE声明

  • 标签

  • 标签

2.2 网页基本标签

  • 标题标签
  • 段落标签（p，然后点击tab键自动生成）
  • 换行标签
  • 水平线标签（hr，然后点击tab键自动生成）
  • 字体样式标签
  • 注释和特殊符号标签
<!--DOCTYPE:告诉浏览器 ，我们使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!-- head代表网页头部-->
<head>
<!--    meta描述性标签，它用来描述我们网站的一些信息-->
<!--    meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="狂神说Java，西部开源">
    <meta name="description" content="来这个地方可以学习Java">
<!--    title网页标题-->
    <title>我的第一个网页</title>
</head>
<!--body标签代表网页主体-->
<body>
hello word
</body>
</html>

<!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>


<!--水平线标签-->
<hr/>

<!--换行标签-->
两只老虎 - 贝瓦儿歌 <br/>
两只老虎两只老虎<br/>
跑得快跑得快<br/>

<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体：<strong>i love you</strong>
斜体：<em>i love you </em>

<br/>
<!--特殊符号-->

空       格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格

<br/>
&gt;大于号
<br/>
&lt;小于号
&copy;版权所有狂神
<!--
特殊符号
& ;

查百度
-->
&

</body>
</html>

3.图像，超链接，网页布局

3.1 图像标签

  • 常见的图像格式
    • JPG
    • GIF
    • PNG
    • BMP
    • ……

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src：图片地址
相对地址
绝对地址
../  --上一级目录

alt:图片名字（必填）

-->
<img src="../resources/1.jpg" alt="狂神" title="悬停头像">
</body>
</html>

3.2 链接标签

  • 文本超链接
  • 图像超链接

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--a标签
href：必填，表示要跳转到哪个页面
target：表示窗口在哪里打开
  __blank:在新标签打开
  __self:在自己的网页中打开
-->

<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
<a href="http://www.baidu.com" target="_self">点击我跳转到百度</a>

<br>

<a href="1.我的第一个网页.html">
    <img src="../resources/1.jpg" alt="狂神" title="悬停文字">
</a>
</body>
</html>

3.3 超链接

  • 页面间链接
    • 从一个页面链接到另一个页面
  • 锚链接
  • 功能性链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<!--a标签
href：必填，表示要跳转到哪个页面
target：表示窗口在哪里打开
  __blank:在新标签打开
  __self:在自己的网页中打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
<a href="http://www.baidu.com" target="_self">点击我跳转到百度</a>
<br>
<a href="1.我的第一个网页.html">
    <img src="../resources/1.jpg" alt="狂神" title="悬停文字">
</a>

<!--锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>
<a name="down">down</a>

<!--功能性链接
邮件链接：mailto
QQ链接：
-->
<a href="mailto:2480598080@qq.com">点击联系我</a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="你好，点击" title="你好，点击"/></a>
</body>
</html>

3.3 行内元素和块元素

  • 块元素
    • 无论内容多少，该元素独占一行
    • （p、h1-h6…）
  • 行内元素
    • 内容撑开元素，左右都是行内元素的可以在排在一行
    • （a.strong.em…）

4.列表，表格，媒体元素

4.1 列表

  • 什么是列表

    列表就是信息资源的一种展现形式。它可以使信息结构化和条理化，以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

  • 列表的分类

    • 无序列表
    • 有序列表
    • 定义列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围：试卷，问答
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
</ol>
<hr/>
<!--无序列表
应用范围：导航，侧边栏
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
</ul>
<!--自定义列表
dl:标签
dt：列表名称
dd：列表内容
应用范围：
公司底部
-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>c</dd>
    <dt>位置</dt>

    <dd>西安</dd>
    <dd>重庆</dd>
    <dd>新疆</dd>
</dl>

</body>
</html>

4.2 表格

  • 为什么使用表格
    • 简单通用
    • 结构稳定
  • 基本结构
    • 单元格
    • 行
    • 列
    • 跨行
    • 跨列
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
行tr
列td
-->
<table border="1px">
    <tr>
        <td colspan="3">学生成绩</td>

    </tr>
    <tr>
        <td rowspan="2">狂神</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>

        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">勤俭</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>

        <td>数学</td>
        <td>100</td>
    </tr>
</table>
</body>
</html>

4.3 视频和音频

  • 视频元素 video
  • 音频元素 audio
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体学习</title>
</head>
<body>
<!--音频和视频
src:资源路径
controls:控制条
antoplay:自动播放
-->
<!--<video src="../resources/video/天蓝色的音乐.mp4" controls autoplay></video>-->
<audio src="../resources/audio/房东的猫%20.mp3" controls AUTOPLAY></audio>


</body>
</html>

5.表单及表单应用

5.1 页面结构分析

在这里插入图片描述

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

</head>
<body>
<header><h2>网页头部</h2></header>
<section><h2>网页主体</h2></section>
<footer><h2>网页脚部</h2></footer>
</body>
</html>

5.2 iframe内联框架

在这里插入图片描述

5.3 表单语法

在这里插入图片描述

<!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="1.我的第一个网页.html" method="get">
<!--文本输入框 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>

5.4 表单元素格式

在这里插入图片描述

<!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="1.我的第一个网页.html" method="get">
<!--文本输入框 input type="text"
value="狂神"  默认初始值
maxlength="8" 最长能写几个字符
size="30   文本框的长度
-->
    <p>名字：<input type="text" name="username" ></p>
<!--    密码框 input type="password"-->
    <p>密码：<input type="password" name="pwd"></p>
<!--    单选框标签
input type="radio"
value:单选框的值
name：表示组
checked 默认值
-->
    <p>性别：
    <input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女
    </p>
<!--    多选框-->
    <p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby" checked>敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
    </p>
<!--    按钮
input type="button" 普通按钮
input type="image"   图片按钮
input type="submit"  提交按钮
input type="reset" 重置
-->
<!--    <p>按钮：-->
<!--        <input type="button" name="btn1" value="点击变长">-->
<!--        <input type="image" src="../resources/image/1.jpg">-->
<!--    </p>-->
<!--    下拉框,列表框-->
    <p>国家:
        <select name="列表名称" >
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="rth" selected>瑞士</option>
            <option value="yindu">印度</option>
        </select>
    </p>
<!--    文本域-->
    <p>反馈:
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>
<!--    文件域
input type="file"
name="files"
-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
<!--    邮件验证-->
    <p>邮箱:
        <input type="email" name="email">

    </p>
<!--    URL-->
    <p>URK:
        <input type="url" name="url">

    </p>
    <p>数字:
        <input type="number" name="num" max="100" min="0" step="10">

    </p>
<!--    滑块-->
    <p>音量:
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>
<!--    搜索框-->
    <p>搜索框:
    <input type="seacher" name="seacher">
    </p>
    <p>

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

    </p>
</form>
</body>
</html>

5.5 表单应用

  • 隐藏域
  • 只读
  • 禁用

6.表单初级验证

  • 思考：为什么要进行表单验证
  • 常用方式
    • placeholder 提示信息
    • required 非空判断
    • pattern 正则表达式
【狂神说Java】阶段二笔记1. HTML5
Yy_sushine的博客
02-12 611
文章目录1 HTML1.1 网页基本信息1.2 网页基本标签1.3 图像标签1.4 链接标签1.5 列表标签1.6 表格标签1.7 媒体元素1,8 页面结构1.9 iframe内联框架1.10 表单 1 HTML HTML：Hyper Text Markup Language（超文本标记语言） 浏览器厂商对HTML5的支持：跨平台 W3C World Wide Web Consortium（万维网联盟） 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构 http://
Day 13 狂神说Java基础笔记（HTML01-19）
weixin_44436378的博客
06-12 340
01-初始HTML Hyper Text Markup Language 超文本标记语言 W3C World Wide Web Consortium 万维网联盟 结构化标准语言（HTML\XML） 表现标准语言（CSS） 行为标准（DOM、ECMAScript） 02-网页基本信息 <!--DOCTYPE:告诉浏览器，我们要使用什么规范--> <!--head标签代表网页头部 --> <!--meta描述性标签，它用来描述网站的一些信息--> <!--meta一般用
【狂神说Java】HTML快速入门
路边烧卖
05-17 1645
目录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
狂神说java，html5基础知识讲解全总结
u011062735的博客
06-11 1099
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>狂神HTML5讲解知识总结-标题</title> <meta name="keywords" content="搜索关键字，如果此处书写大量的关键字信息，是一种黑冒的作法，而且现在的搜索算法很先进，已经根据网页内内容，生成关键信息。"> <meta
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
此资源为我跟着B站up主【遇见狂神说】java系列视频中前端入门部分学习过程中所写 大部分和视频保持一致，有一些自己的理解和一些扩展的部分
【狂神说Java】HTML5完整教学笔记
qq_44005101的博客
05-18 1400
【狂神说Java】HTML5完整教学笔记01 HTML详解1.1 初识HTML1.2 网页基本标签1.3 图像、超链接标签及网络布局1.4 表单及表单应用1.5 表单初级验证 01 HTML详解 1.1 初识HTML Hyper Text Markup Language（超文本标记语言） 超文本包括：文字、图片、音频、视频、动画等。 Html5+Css3 —>现在使用的版本 Html5提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，
JavaWeb学习Day04（狂神说Java）
qq_43421528的博客
04-16 487
10.MVC三层架构 什么是MVC：Model（模型），View（视图），Controller（控制器） 10.1 早些年 用户直接访问控制层，控制层就可以直接操作数据库 servlet--CRUD-->数据库 弊端：程序十分臃肿，不利于维护 servlet的代码中：处理请求，响应，视图跳转，处理业务代码，处理逻辑代码 架构：没有什么是加一层解决不了的 程序员调用 | JDBC | mysql oracle sqlServer…… 10.2 MVC三层架构 Model模型： 业务处理：业务逻
javaweb笔记+狂神+知识总结
04-01
"狂神"可能是指一位知名的JavaWeb讲师或教程作者，他的笔记为学习者提供了深入理解和实践该技术的宝贵资源。下面将详细阐述JavaWeb的主要知识点。 1. **Servlet**：Servlet是Java Web应用程序的核心组件，它是一个...
狂神说MySQL学习笔记
Monk_Monster的博客
07-20 2409
目录 MySQL 1、初识MySQL 1.1为什么学数据库 1.2 什么是数据库 1.3 数据库分类 1.4 MySQL简介 1.5连接数据库 2、操作数据库 2.1操作数据库 2.2数据库的列类型 2.3数据库的字段类型（重点） 2.4 创建数据库表 2.5数据表的类型 2.6修改删除表 3、MySQL数据管理 3.1外键（了解） 3.2 DML语言（全记住） 3.3添加 3.4 修改 3.5 删除 4、DQL查询数据（最重点） 4.1DQL 4.2指定查询字
狂神说Mysql课堂学习笔记，jdbc（含代码，下载链接）
weixin_46002328的博客
03-03 901
连接数据库 命令行连接！ mysql -uroot -p123456 命令行连接 mysql -uroot -p123456 --连接数据库 show databases; -- 查看所有的数据库 mysql > use school; -- 切换数据库use数据库名 database changed show tables; -- 查看数据库中所有的表 describe student; -- 显示数据库中所有的表的信息 create database westos; -- 创建一个数据
java前端之HTML
yalu_123456的博客
06-11 359
概述 什么是HTML 超文本标记语言 ( Hyper Text Markup Language ) 超文本 : 文字 , 图片 , 音频 , 视频 , 动画 ,… 发展历史 -HTML2.0 --> 文字 , 特别丑的文本框 HTML 5 ---- > 动画 , 渲染… HTML的优势 所有的浏览器都支持 市场的需求—从C/S—>b/s架构 跨平台 W3C标准 万...
JAVA前端部分（HTML+CSS+JavaScript）（狂神说笔记）
a_123456598的博客
11-10 1603
【HTML】 1.初识HTML： 2.元素=标签+属性+内容 （1）网页基本标签 （2）图像标签 （3）超链接标签 a、页面间链接 b、锚链接 c、功能性链接 QQ链接代码在“QQ推广”里生成。 【补充】块元素和行内元素 元素包括：标签、属性、内容。 （4）列表标签 （5）表格标签 （6）媒体元素 3.页面结构 放在<body></body>里面。 4.内联框架： targ
【狂神说Java】前端知识体系
路边烧卖
05-17 892
目录0、前端知识体系0.1、前端三要素0.2、结构层（HTML）0.3、表现层（CSS）0.4、行为层（JavaScript）JavaScript框架UI框架JavaScript构建工具0.5、三端同一混合开发（Hybrid App）微信小程序 0、前端知识体系 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 0.1、前端三要素
狂神Java学习笔记——HTML（一）
hyx的博客
06-08 704
初识HTML HyperTextMarkupLanguage（超文本标记语言） < body >、< /body>等成对的标签，分别叫做开放标签和闭合标签，单独呈现的标签（空元素），如< hr/ >;意为用/来关闭空元素。 html注释：< !–注释内容–> <!--DOCTYPE：告诉浏览器使用什么规范（默认是html）--> <!DOCTYPE html> <!--语言 zh中文 en英文--> <htm
【狂神说JAVA】JavaWeb
pan_h1995的博客
11-13 3226
JavaWeb Java Web 1、基本概念 1.1、前言 web开发： web，网页的意思 ， www.baidu.com 静态web html，css 提供给所有人看的数据始终不会发生变化！ 动态web 淘宝，几乎是所有的网站； 提供给所有人看的数据始终会发生变化，每个人在不同的时间，不同的地点看到的信息各不相同！ 技术栈：Servlet/JSP，ASP，PHP 在Java中，动态web资源开发的技术统称为JavaWeb； 1.2、web应用程序 web应用程序：可以提供浏览器
嵌入式通信协议：MODBUS简明学习笔记
weixin_73867577的博客
11-02 359
学习Modbus的简明学习笔记
# SpringMVC学习
11-04 909
SpringMVC 是 Spring 框架的一部分，专门用于构建 Web 应用程序。它遵循 MVC（Model-View-Controller）设计模式，通过一系列组件和机制实现了请求的接收、处理和响应。
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
最新发布
ceshiren_com的博客
11-05 506
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
SPI通信详解-学习笔记
qq_45059758的博客
11-04 512
SPI通信
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值