HTML笔记-狂神

news2024/10/4 8:28:25

1. 初识HTML

什么是HTML？
Hyper Text Markup Language : 超文本标记语言

  • 超文本包括：文字、图片、音频、视频、动画等

目前使用的是HTML5，使用 W3C标准

W3C标准包括：

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准语言（DOM、JavaScript）

2. 网页基本元素

HTML基本结构

  • 网页头部
  • 主体部分

网页基本信息

  • DOCTYPE声明：告诉浏览器，我们要使用什么规范
  • 标签 ：网页标题
  • 标签：描述性标签，用来描述网站的一些信息
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <meta charset="UTF-8">
    <!--meta一般用来做SEO-->
    <meta name="keyboards" content="Java">
    <meta name="description" content="学习Java">
    <!--网页标题-->
    <title>Title</title>
</head>
<!--body标签代表网页主体-->
<body>
HelloWorld
</body>
</html>

3. 网页基本标签

标题标签

段落标签

换行标签

水平线标签

字体样式标签

注释和特殊符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<!--1、标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h6>六级标签</h6>

<!--2、段落标签-->
<p>
这是一整段这是一整段这是一整段这是一整段
    这是一整段这是一整段这是一整段
    这是一整段这是一整段
    这是一整段
    这是一整段
</p>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>

<!--3、换行标签-->
<!--br、hr是自闭合标签，习惯上最好加/结尾-->
第一行 <br/>
第二行
<!--4、水平线标签-->
<hr/>

<!--5、字体样式标签-->
粗体：<stronge>I LOVE YOU </stronge>
斜体：<em>I LOVE YOU </em>

<hr/>

<!--6、特殊符号-->
空 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：<br/>
大于号：&gt;      <br/>
小于号：&lt;     <br/>
版权符号：&copy;

<!--7、注释-->
</body>
</html>

4. 图像标签

常见图像格式：

JPG
GIF
PNG
BMP：位图
…
语法：

<body>
<img src="path" alt="text" title="标题" width="x" height="y">
src：图像地址
alt：图像的替代文字（找不到该图片时，才会显示）
title：鼠标悬停提示文字
width:图像宽度
height:图像高度

</body>

练习：新建放置图片的目录
在这里插入图片描述

<body>
<!--src:图片地址
        相对地址：../   1.html文件的上一级目录           
 (不推荐)绝对地址：C:\Users\15642\IdeaProjects\HTML\resources\image\1.JPG
-->
<img src="../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500">

</body>

5. 链接标签

文本超链接：点击文本进行跳转

图像超链接：点击图片进行跳转

语法：

<!--链接标签-->
<a href="path" target="目标窗口位置">链接文本或图像</a>
href：必填 ，表示要跳转到那个页面
target:表示窗口在哪里打开，默认是当前页面打开
       _blank：在新的标签页打开
       _self:在自己的网页中打开

练习：

<body>

<!--文字超链接-->
<a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a>

<br>

<!--图像超链接-->
<a href="http://www.baidu.com">
    <img src="../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500">
</a>

</body>

锚链接：

  • 通过# 实现页面间的跳转
  • 跳转到另一个页面指定的位置

练习：

<body>

<!--
    锚链接
        1.需要一个标记
        2.然后跳转到标记
        3.使用 #
-->
<!--先设置一个标记-->
<a id="top">我是顶部</a>

<!--图片1-->
<p>
    <a href="http://www.baidu.com">
        <img src="../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500">
    </a>
</p>
<!--图片2-->
<p>
    <a href="http://www.baidu.com">
        <img src="../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500">
    </a>
</p>
<!--图片3-->
<p>
    <a href="http://www.baidu.com">
        <img src="../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500">
    </a>
</p>
<!--图片4-->
<p>
    <a href="http://www.baidu.com">
        <img src="../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500">
    </a>
</p>
<!--也可以跳转到另一个页面的指定位置 : href="2.html#top"-->
<a href="#top">跳转到顶部</a>

</body>

功能性链接

<!--邮件链接：mailto-->
<a href="mailto:156420xxxx@qq.com">点击联系我！</a>

6. 行内元素和块元素

块元素

  • 无论内容多少，该元素独占一行
  • p标签、h1-h6…

行内元素

  • 内容撑开宽度，左右都是行内元素的可以在排一行
  • a 标签、strong 标签、em 标签…

7. 列表

列表的分类：

  • 有序列表
  • 无序列表
  • 自定义列表
<body>

<!--有序列表-->
<ol>
    <li>Java</li>
    <li>python</li>
    <li>运维</li>
</ol>
<!--无序列表-->
<ul>
    <li>Java</li>
    <li>python</li>
    <li>运维</li>
</ul>
<!--自定义列表
    dl：标签
    dt:列表名称
    dd：列表内容
-->
<dl>
    <dt>学科</dt>
        <dd>Java</dd>
        <dd>python</dd>
        <dd>运维</dd>
    <dt>位置</dt>
        <dd>北京</dd>
        <dd>珠海</dd>
</dl>

</body>

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

8. 表格

为什么使用表格？

  • 简单通用
  • 结构稳定

基本结构：

  • 单元格
  • 行 tr
  • 列 td
  • 跨行 rowspan
  • 跨列 colspan
<body>
<table border="1px"><!--加个边框-->
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>

    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>

    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>

</table>

</body>

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

<table border="1px"><!--加个边框-->
    <tr>
        <!--让这个单元格跨两列-->
        <td colspan="2">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>

    <tr>
        <!--让这个单元格跨两行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>

    <tr>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>

</table>

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

9. 媒体元素

视频元素：video

音频元素：audio

<!--媒体元素
视频：
    controls:滚动条
    autoplay：自动播放
-->
<video src="../resources/video/4.mp4" controls autoplay></video>

<audio src="../resources/audio/萤火虫和你.mp3" controls></audio>

10. 页面结构分析

在这里插入图片描述

<body>
<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体部分</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>
</body>

11. iframe内联框架

语法：

<iframe src="path" frameborder="0" name="mainFrame"></iframe>
        引用页面地址                 框架标示名

<body>
<!--iframe内联框架-->
<iframe src="//player.bilibili.com/player.html?aid=68373450&bvid=BV12J41137hu&cid=118499718&page=1"
        scrolling="no"
        border="0"
        frameborder="no"
        framespacing="0"
        allowfullscreen="true">
</iframe>

<iframe src="https://www.bilibili.com/" frameborder="1px" name="mainFrame" width="400px" height="100px"></iframe>

<!--通过a标签往iframe里加东西-->
<iframe src="" frameborder="1px" name="hello" width="400px" height="300px"></iframe>
<!--通过target属性绑定指定的iframe-->
<a href="https://www.bilibili.com/" target="hello">点击我跳转到B站</a>

</body>

12. 初识表单post和get提交

表单语法：

<!--初识表单post和get提交
    method:规定如何发送表单数据，常用值：：post、get
        get方式提交：可以在url中看到提交的信息
		post方式提交：比较安全，可以传输大文件
    action:表示向何处发送表单数据,可以是一个网站，或者一个请求处理地址
-->
<form method="get" action="2.基本标签.html">
    <!--文本输入框：text-->
    <p>姓名：<input type="text" name="username"></p>
    <!--密码框：password-->
    <p>密码：<input type="password" name="password"></p>

    <!--提交-->
    <input type="submit">
    <!--重置-->
    <input type="reset">
</form>

效果：
在这里插入图片描述
表单元素格式
在这里插入图片描述

13. 文本框和单选框

单选框：

<!--单选框标签：
    input type="radio"
    value：单选框的值
    name：表示组，name相同为一个组，即只能选择一个
-->
<radio>
	<!--checked表示默认选中-->
    <input type="radio" value="boy" name="sex" checked/>男
    <input type="radio" value="girl" name="sex"/>女
</radio>

多选框：

<!--多选框-->
<p> 爱好：
	<!--checked表示默认选中-->
    <input type="checkbox" value="sleep" name="hobby" checked>睡觉
    <input type="checkbox" value="book" name="hobby">看书
    <input type="checkbox" value="swimming" name="hobby">游泳
    <input type="checkbox" value="write" name="hobby">写作

</p>

14. 按钮和多选框

普通按钮：

<!--按钮-->
<p> 按钮：
    <input type="button" name="btn1" value="点击查看">
</p>

效果：
在这里插入图片描述
图片按钮：

<input type="image" name="bt2" src="../resources/image/1.jpg"><!--可以点击提交，相当于submit-->

下拉框：

<p>国家：
    <select name="country">
        <option value="china">中国</option>
        <option value="us">美国</option>
        <!--selected表示默认选中-->
        <option value="ruishi" selected>瑞士</option>
    </select>
</p>

15. 文本域和文件域

文本域：

<!--文本域-->
<p>反馈：
    <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>

文件域：

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

16. 搜索框滑块和简单验证

<!--邮件验证-->
<p> 邮箱：
    <input type="email" name="email">
</p>

<p> URL：
    <input type="url" name="url">
</p>

<p> number：
    <input type="number" name="number" max="100" min="0" step="10">
</p>

<!--滑块：-->
<p>音量：
    <input type="range" name="voice" min="0" max="10">
</p>

<!--搜索框-->
<p>搜索：
    <input type="search" name="search">
</p>

17. 表单的应用

  • 隐藏域 hidden
  • 只读 readonly
  • 禁用 disabled
<body>

    只读：
    <p>姓名：<input type="text" name="username" value="lisa" readonly></p>
    
    <p>禁用：
        <!--disabled可以放到任何地方，无法选择"男"-->
        <input type="radio" value="boy" name="sex" disabled/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    
    <!--隐藏域：hidden，密码框不见了，但值依然在-->
    <p>密码：<input type="password" name="password" hidden value="123456"></p>

</body>

增强鼠标的可用性：

<p>增强鼠标的可用性：<br>
    <label for="mark">你点我试试！！</label>
    <input type="text" id="mark">
</p>

点击文字，自动跳转到对应的输入框
在这里插入图片描述

18. 表单初级验证

思考：

  • 减轻服务器的压力
  • 安全性

常用方式：

  • placeholder 提示信息
  • required 元素不能为空，应用于所有的文本框中
  • pattern 正则表达式
<body>

    <p>姓名：
        <input type="text" name="username" placeholder="请输入用户名">
    </p>
    
    <p>姓名：
        <input type="text" name="username" placeholder="请输入用户名" required>
    </p>
    
    <p> 自定义邮箱：
        <input type="text" name="diyEmail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>

</body>

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

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

相关文章

Flask 表单form.validate_on_submit()什么情况下会是false——解决办法

Flask 表单form.validate_on_submit()什么情况下会是false——解决办法

Flask 表单form.validate_on_submit()什么情况下会是false&#xff1f;&#xff1f; 1、在form中受到validators控制&#xff0c;不满足条件就会导致false 2、在form中使用了raise抛出异常后也会false。 3、表单的地方没写{{ form.csrf_token }}&#xff0c;在HTML 里加上就好…
阅读更多...
FTP的主动传输和被动传输以及实现FTPClient连接池-meethigher

FTP的主动传输和被动传输以及实现FTPClient连接池-meethigher

一、概述 FTP&#xff08;File Transfer Protocol&#xff09;是一种基于TCP实现的用于在计算机之间传输文件的可靠协议&#xff0c;它屏蔽了各种计算机系统的细节&#xff0c;适用于在异构环境中&#xff0c;进行数据传输。它允许用户从一个计算机&#xff08;FTP客户端&…
阅读更多...
驱动开发day4（实现通过字符设备驱动的分布实现编写LED驱动，实现设备文件的绑定）

驱动开发day4（实现通过字符设备驱动的分布实现编写LED驱动，实现设备文件的绑定）

头文件&#xff08;head.h&#xff09; #ifndef __HEAD_H__ #define __HEAD_H__ #define PHY_LED1_MODER 0x50006000 #define PHY_LED2_MODER 0x50007000 #define PHY_LED3_MODER 0x50006000 #define PHY_LED1_ODR 0x50006014 #define PHY_LED2_ODR 0x50007014 #define PHY_LE…
阅读更多...
Yakit工具篇：中间人攻击(平替Burp)的相关技巧-02

Yakit工具篇：中间人攻击(平替Burp)的相关技巧-02

简介 前面写了一篇中间人攻击的代理与劫持相关的配置&#xff0c;今天来介绍一下劫持过程相关的详细设置&#xff0c;以及标记/替换流量&#xff0c;History处理&#xff0c;过滤流量&#xff0c;网站树视角等使用技巧和流程。 劫持的详细解释 劫持界面 开始劫持前我们先对…
阅读更多...
QWidget快速美化-圆形蓝色单选框

QWidget快速美化-圆形蓝色单选框

将代码复制进QRadioButton的样式表 效果: 代码: QRadioButton{font:75 9pt "Arial";background:transparent;color:white;border:none; }QRadioButton:disabled{color:gray; }QRadioButton::indicator{width:12px;height:12px;border-radius:8px; }QRadioButton::i…
阅读更多...
leetcode:2347. 最好的扑克手牌(python3解法)

leetcode:2347. 最好的扑克手牌(python3解法)

难度&#xff1a;简单 给你一个整数数组 ranks 和一个字符数组 suit 。你有 5 张扑克牌&#xff0c;第 i 张牌大小为 ranks[i] &#xff0c;花色为 suits[i] 。 下述是从好到坏你可能持有的 手牌类型 &#xff1a; "Flush"&#xff1a;同花&#xff0c;五张相同花色的…
阅读更多...
CUDA学习笔记（十五）Stream and Event

CUDA学习笔记（十五）Stream and Event

Stream 一般来说&#xff0c;cuda c并行性表现在下面两个层面上&#xff1a; Kernel levelGrid level 到目前为止&#xff0c;我们讨论的一直是kernel level的&#xff0c;也就是一个kernel或者一个task由许多thread并行的执行在GPU上。Stream的概念是相对于后者来说的&…
阅读更多...
c语言进制的转换8进制转换2进制与2转8

c语言进制的转换8进制转换2进制与2转8

c语言进制的转换之8进制转换2进制与2转8 c语言的进制的转换 c语言进制的转换之8进制转换2进制与2转8一、八四二一法则二、二进制转换八进制方法三、八进制转换二进制方法四、八进制程序打印 一、八四二一法则 二、二进制转换八进制方法 如&#xff1a;111000110101001转换成八…
阅读更多...
爬虫使用什么库更事半功倍？

爬虫使用什么库更事半功倍？

目录 一、requests库 二、BeautifulSoup库 三、Scrapy框架 四、selenium库 五、Pyppeteer库 六、Scrapy-Splash库 总结 在当今的大数据时代&#xff0c;爬虫技术已经成为了收集和处理大量数据的重要手段。而选择合适的库可以大大提高爬虫的效率和准确性。本文将介绍一些…
阅读更多...
桶装水水厂送水小程序开发

桶装水水厂送水小程序开发

桶装水小程序是水店水厂进行线上营销的关键工具&#xff0c;帮助打通线上线下&#xff0c;方便用户在线下单&#xff0c;也方便水店水厂做好门店管理。 桶装水小程序&#xff0c;即订水小程序&#xff0c;专为水店水厂打造&#xff0c;助力实现信息化门店管理&#xff0c;同时…
阅读更多...
如何从零设计开发一个软件程序

如何从零设计开发一个软件程序

前言 当参与了许多项目&#xff0c;或者见识了许多优秀的软件&#xff0c;难免心里会有一些波澜和冲动。谁又不想拥有一个自己的软件呢? 但是当自己独立开发一个软件时&#xff0c;发现挺难的,不知道该如何下手。 结合自己开发软件的心得进行描述&#xff0c;可能或多或少与你…
阅读更多...
2003-2020年全国各地级市金融发展水平测算数据（含原始数据和具体测算过程）

2003-2020年全国各地级市金融发展水平测算数据（含原始数据和具体测算过程）

2003-2020年全国各地级市金融发展水平测算数据 1、时间&#xff1a;2003-2020年 2、来源&#xff1a;城市统计年鉴 3、指标&#xff1a;年末金融机构存款余额、金融机构贷款余额、GDP、金融发展水平 4、范围&#xff1a;300个地级市 5、计算公式&#xff1a;金融发展水平&…
阅读更多...
小团队管理的艺术：实现1+1＞2的协同效能

小团队管理的艺术：实现1+1＞2的协同效能

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 在现代工作环境中&#…
阅读更多...
【Solidity】智能合约案例——③版权保护合约

【Solidity】智能合约案例——③版权保护合约

目录 一、合约源码分析&#xff1a; 二、合约整体流程&#xff1a; 1.部署合约&#xff1a; 2.添加实体&#xff1a; 3.查询实体 4.审核版权&#xff1a; 5.版权转让 一、合约源码分析&#xff1a; Copyright.sol&#xff1a;主合约&#xff0c;定义了版权局的实体&#xff…
阅读更多...
SpringBoot轻松实现ip解析(含源码)

SpringBoot轻松实现ip解析(含源码)

文章目录 前言应用场景(1)网站访问分析(2)欺诈风险控制(3)限制服务区域(4)显示访问者来源 示例前期准备Ip2region 特性1、IP 数据管理框架2、数据去重和压缩3、极速查询响应 版本依赖导入库具体代码ConstantAddressUtils(在线解析)IpUtil(离线解析)IpController执行结果 总结源…
阅读更多...
Redis的持久化策略：RDB与AOF（面试题详解）

Redis的持久化策略：RDB与AOF（面试题详解）

文章来源&#xff1a;Redis持久化的两种方式&#xff1a;RDB与AOF&#xff08;详解&#xff09;&#xff0c;订正了一些错误 一、概述&#xff1a; RDB和AOF持久化的由来&#xff1f; 因为Redis中的数据是基于内存的&#xff0c;所以如果出现服务器断电或者服务器宕机&#xf…
阅读更多...
Spring Boot集成SpringFox 3.0与Pageable参数处理

Spring Boot集成SpringFox 3.0与Pageable参数处理

Springfox 3.0有多个模块&#xff0c;提供了spring boot starter&#xff0c;与Spring Boot集成时仅需引入springfox-boot-starter&#xff0c;如下&#xff1a; <dependency><groupId>io.springfox</groupId><artifactId>springfox-boot-starter<…
阅读更多...
FL Studio 21 for Mac中文破解版百度网盘免费下载安装激活

FL Studio 21 for Mac中文破解版百度网盘免费下载安装激活

FL Studio 21 for Mac中文破解版是Mac系统中的一款水果音乐编辑软件&#xff0c;提供多种插件&#xff0c;包括采样器、合成器和效果器&#xff0c;可编辑不同风格的音乐作品&#xff0c;Pattern/Song双模式&#xff0c;可兼容第三方插件和音效包&#xff0c;为您的创意插上翅膀…
阅读更多...
ElementType枚举类

ElementType枚举类

作用 可用于注解Target指定作用位置&#xff0c;例如&#xff1a;在注释类上声明作用于注解 种类 TYPE类、接口&#xff08;包括注释类型&#xff09;或枚举声明FIELD字段声明&#xff08;包括枚举常量METHOD方法声明PARAMETER形式化参数说明CONSTRUCTOR构造函数说明LOCAL_VAR…
阅读更多...
人工智能站队将再添一名大将，苹果明年或将推出AppleGPT

人工智能站队将再添一名大将，苹果明年或将推出AppleGPT

KlipC报道&#xff1a;据外媒报道&#xff0c;苹果公司计划每年投资 10 亿美元&#xff0c;将生成式人工智能&#xff08;AI&#xff09;整合到其产品线中。据知情人士透露苹果计划最早在2024年底开始在iPhone和iPad上融入生成式人工智能技术。 KlipC的合伙人Andi D表示&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023