HTML入门

学习视频

初识HTML

什么是HTML

  • HTML：Hyper Text Markup Language（超文本标记语言）

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

  • HTML 5，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等

HTML 5的优势

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

W3C标准

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

HTML基本结构

<html><!-- 网页头部 --><head><title>我的第一个网页</title></head><!-- 主体部分 --><body>我的第一个网页</body>
</html>

<body>、 </body > 等成对的标签，分别叫开放标签和闭合标签。

单独呈现的标签（空元素），如 <hr/>；意为用/来关闭空元素

网页基本信息

  • DOCTYPE声明

  • < title > 标签

  • <meta> 标签

<!-- DOVTYPE：告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>
<!-- 只有被<html></html>包围的内容才是有效的 -->
<html lang="en"><!-- head标签代表网页头部 -->
<head><!-- mate：描述性标签，它用来描述网站信息 --><meta charset="UTF-8"><meta name="keywords" content="HTML学习"><meta name="description" content="一起学习HTML"><!-- title：网页标题 --><title>Title</title>
</head>
<!-- body标签代表网页主题 -->
<body>
Hello world
</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></body>
</html>

在这里插入图片描述

段落标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本标签学习</title>
</head>
<body><!-- 段落标签 -->
<p>两只老虎    两只老虎</p>
<p>跑得快       跑得快</p>
<p>一只没有耳朵     一只没有尾巴</p>
<p>真奇怪      真奇怪</p>
<p>两只老虎     两只老虎</p>
<p>跑得快        跑得快</p>
<p>一只没有耳朵    一只没有尾巴</p>
<p>真奇怪      真奇怪</p></body>
</html>

在这里插入图片描述

换行标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本标签学习</title>
</head>
<body><!-- 换行标签 -->
两只老虎    两只老虎<br/>
跑得快       跑得快<br/>
一只没有耳朵     一只没有尾巴<br/>
真奇怪      真奇怪<br/>
两只老虎     两只老虎<br/>
跑得快        跑得快<br/>
一只没有耳朵    一只没有尾巴<br/>
真奇怪      真奇怪<br/></body>
</html>

在这里插入图片描述

注意换行标签和段落标签行间距不一样

水平线标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本标签学习</title>
</head>
<body><!-- 水平线标签 -->
<hr/></body>
</html>

字体样式标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本标签学习</title>
</head>
<body><!-- 字体样式标签：粗体、斜体 -->
粗体：<strong>I Love You</strong>
<br/>
斜体：<em>I Love You</em></body>
</html>

在这里插入图片描述

注释和特殊符号

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本标签学习</title>
</head>
<body><!-- 特殊符号——空格 -->
空       格<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</body>
</html>

在这里插入图片描述

图像、超链接、网页布局

图像标签

  • 常见的图像格式

    • JPG
    • GIF
    • PNG
    • BMP
    • ……

  • 语法：*<*img src=“path” alt=“text” title=“text” width=“x” height=“y”/>

  • 示例

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像标签学习</title>
</head>
<body><!-- 图像标签 -->
<!-- src：图片路径 -->
<!-- alt：若图片为找到，用alt的内容代替 -->
<!-- title：鼠标悬停时显示内容 -->
<!-- width：图片宽度 -->
<!-- height：图片高度 -->
<img src="../resources/image/linux.png" alt="linux图片" title="这是一张linux图片" width="384" height="384">
<br/>
<img src="../resources/image/1.png" alt="linux图片">
</body>
</html>

    在这里插入图片描述

链接标签

语法：<a herf=“path” target=“目标窗口位置”>链接文本或图像</a*>*

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

超链接

  • 页面间链接（从一个页面链接到另一个页面）
  • 锚链接（实现页面内跳转）
  • 功能性链接
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签学习</title>
</head>
<body><!-- 标记：使用name作为标记 -->
<a name="top">顶部</a>
<br/><!-- 链接标签 -->
<!-- herf：必填，表示要跳转到的页面target：表示窗口在哪里打开_blank：在新标签页打开_self：在自己的网页中打开--><!-- 页面间链接 -->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面1</a>
<br/>
<a href="https://www.baidu.com">点击我跳转百度</a>
<br/>
<a href="https://www.baidu.com"><img src="../resources/image/linux.png" alt="linux图片" title="这是一张linux图片" width="384" height="384">
</a><!-- 锚链接 -->
<!--1.需要一个锚标记2.跳转到标记（此处在最顶部定义标记）
-->
<br/>
<a href="#top">回到顶部</a><!-- 功能性链接 -->
<!-- 邮件链接 -->
<br/>
<a href="mailto:2136476190@qq.com">点击联系我</a></body>
</html>

在这里插入图片描述

行内元素和块元素

  • 块元素

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

  • 行内元素

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

列表、表格、媒体元素

列表

  • 什么是列表？

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

  • 列表的分类

    • 无序列表
    • 有序列表
    • 定义列表
<!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><li>C/C++</li>
</ol><!-- 无序列表 -->
<ul><li>Java</li><li>Python</li><li>运维</li><li>前端</li><li>C/C++</li></ul>
<!-- 自定义列表 -->
<!--dl：标签dt：列表名称dd：列表内容
-->
<dl><dt>学科</dt><dd>Java</dd><dd>Python</dd><dd>C/C++</dd><dd>Linux</dd>
</dl></body>
</html>

在这里插入图片描述

表格

  • 为什么使用表格
    • 简单通用
    • 结构稳定
  • 基本结构
    • 单元格
    • 行
    • 列
    • 跨行
    • 跨列
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格学习</title>
</head>
<body><!-- 表格 -->
<!--table：表格标签tr：行标签td：列标签border：显示边框
-->
<table border="1px"><tr><!-- colspan：跨列 --><td colspan="4">1-1</td></tr><tr><!-- rowspan：跨行 --><td rowspan="2">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></tr>
</table></body>
</html>

在这里插入图片描述

视频和音频

  • 视频元素——video

  • 音频元素——audio

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>媒体元素学习</title>
</head>
<body><!-- 视频 -->
<!--video：视频标签src：视频路径controls：控制autoplay：自动播放
-->
<video src="../resources/video/测试视频.mp4" controls autoplay></video><br/>
<!-- 音频 -->
<audio src="../resources/audio/测试音频.m4a" controls></audio></body>
</html>

在这里插入图片描述

页面结构分析

元素名描述
header标题头部区域的内容（用于页面或页面中的一块区域）
footer标记脚部区域的内容（用于整个页面或页面的一块区域）
sectionWeb页面中的一块独立区域
article独立的文章内容
aside相关内容或应用（常用于侧边栏）
nav导航类辅助内容

iframe内联框架

语法：<iframe src=“path” name=“mainFrame”></iframe>

path：引用页面地址

name：框架标识名

表单及表单应用

表单语法

<form mathod="post" action="result.html"><p>名字：<input name="name" type="text"> </p><p>密码：<input name-"password" type="password"> </p><p><input type="submit" name="Button" value="提交"><input type="reset" name="Reset" value="重填"></p></form>
  • method规定如何发送表单数据，常用值：get、post
  • action表示向何处发送表单数据

表单元素格式

属性说明
type指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name指定表单元素的名称
value元素的初始值。type为radio时必须指定一个值
size指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlengthtype为text或password时，输入的最大字符数
checktype为radio或checkbox时，指定按钮是否是被选中

表单的应用

  • 隐藏域——hidden
  • 只读——readonly
  • 禁用——disable

表单初级验证

表单验证常用方式：

  • placeholder——提示内容
  • require——非空，必填
  • pattern——正则表达式

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录注册</title>
</head>
<body><h1>注册</h1><!-- 表单 -->
<!--form：表单标签action：表单提交的位置，可以是网站，也可以是一个请求处理地址method：提交方式，有get、post两种get：可以在url中看到我们提交的信息，不安全post：不能在url中看到我们提交的信息，安全
-->
<form action="1.我的第一个网页.html" method="get"><p>名字：<input type="text" name="username" maxlength="10" placeholder="请输入用户名"></p><p>密码：<input type="password" name="password"></p><!-- 邮箱验证 --><p>邮箱:<input type="email" name="email"></p><!-- 单选框 --><!-- radio属性要用name分组 --><p>性别:<input type="radio" value="boy" name="gender">男<input type="radio" value="girl" name="gender">女</p><!-- 多选框 --><p>爱好:<!-- checked:默认选中 --><input type="checkbox" value="sleep" name="hobby" checked>睡觉<input type="checkbox" value="code" name="hobby">敲代码<input type="checkbox" value="chat" name="hobby">聊天<input type="checkbox" value="game" name="hobby">打游戏</p><!-- 按钮 --><p>验证:<input type="button" name="btn1" value="点击开始验证"></p><!-- 下拉框,列表框 --><p>下拉框：<select name="nationality"><!-- 使用selected设置默认选项 --><option value="China" selected>中国</option><option value="America">美国</option><option value="Switzerland">瑞士</option><option value="India">印度</option></select></p><!-- 文本域 --><p>反馈:<textarea name="textarea" cols="50" rows="10"></textarea></p><!-- 文件域 --><p>上传文件:<input type="file"></p><!-- 数字 --><p>选择数量:<input type="number" name="num" max="100" min="0" step="10"></p><!-- 滑块 --><p>滑块:<input type="range" min="0" max="100"></p><!-- 搜索框 --><p>搜索:<input type="search" name="search"></p><p><input type="submit" value="提交"><input type="reset" value="重置"></p></form></body>
</html>

在这里插入图片描述

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

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

相关文章

从传统到智慧：文旅产业的数字化变革

从传统到智慧：文旅产业的数字化变革

随着科技的迅猛发展和数字化时代的到来&#xff0c;文旅产业正经历着一场前所未有的变革。传统的旅游模式和服务方式逐渐被智慧化的技术和应用所取代&#xff0c;为游客带来更加便捷、高效、个性化的体验。本文将探讨文旅产业如何从传统模式向智慧化转型&#xff0c;以及数字化…
阅读更多...
springboot 集成 nacos (demo 版)

springboot 集成 nacos (demo 版)

环境要求&#xff1a;本地安装 nacos&#xff08;windows版本&#xff09;&#xff0c;jdk 是 8&#xff0c;安装完还得在 nacos 上面配置一个 yaml 类型的配置文件&#xff0c;方便项目演示读取。 提示&#xff1a;如标题所示&#xff0c;本文只介绍如何从零到一的去集成 naco…
阅读更多...
基于Java SSM框架实现智能快递分拣系统项目【项目源码】

基于Java SSM框架实现智能快递分拣系统项目【项目源码】

基于java的SSM框架实现智能快递分拣系统演示 JAVA简介 Java主要采用CORBA技术和安全模型&#xff0c;可以在互联网应用的数据保护。它还提供了对EJB&#xff08;Enterprise JavaBeans&#xff09;的全面支持&#xff0c;java servlet API&#xff0c;JSP&#xff08;java serv…
阅读更多...
xss 盲打使用

xss 盲打使用

使用beef等内网xss平台&#xff0c;或外网xss平台&#xff08;XSS平台-仅用于xss安全测试专用、XSS平台 - &#xff08;支持http/https&#xff09;XSS Platform&#xff09; 将生成的js脚本写到网站的留言框处&#xff0c;但对应的用户(尤其是admin)查看留言&#xff0c;就会…
阅读更多...
【Vue.js设计与实现】第一篇：框架设计概览-阅读笔记（完结）

【Vue.js设计与实现】第一篇：框架设计概览-阅读笔记（完结）

从高层设计的角度去探讨框架需要关注的问题。 参考&#xff1a;速读《Vue.js 设计与实现》 - 掘金 (juejin.cn) 系列目录&#xff1a; 标题博客第一篇&#xff1a;框架设计概览【Vue.js设计与实现】第一篇&#xff1a;框架设计概览-阅读笔记第二篇&#xff1a;响应系统【Vue.…
阅读更多...
Vue-51、Vue技术github案例(发送ajax)

Vue-51、Vue技术github案例(发送ajax)

1、在index引入bootstrap.csss (注意第三方css库最好在indxe里面引入) 2、List.vue源码 <template><div class"row"><div v-show"users.length" class"card" v-for"p in users" :key"p.login"><a :hr…
阅读更多...
Qt/C++音视频开发65-切换声卡/选择音频输出设备/播放到不同的声音设备/声卡下拉框

Qt/C++音视频开发65-切换声卡/选择音频输出设备/播放到不同的声音设备/声卡下拉框

一、前言 近期收到一个用户需求&#xff0c;要求音视频组件能够切换声卡&#xff0c;首先要在vlc上实现&#xff0c;于是马不停蹄的研究起来&#xff0c;马上查阅对应vlc有没有自带的api接口&#xff0c;查看接口前&#xff0c;先打开vlc播放器&#xff0c;看下能不能切换&…
阅读更多...
一条select在mysql中的执行过程

一条select在mysql中的执行过程

查询缓存&#xff1a; 一个select语句&#xff0c;会先到查询缓存中看看&#xff0c;若是以前执行过&#xff0c;直接将查询结果返回给客户端&#xff0c;若是查询缓存没有命中&#xff0c;就需要执行后面的计划 分析器 如果没有命中查询缓存&#xff0c;就要开始分析器了&am…
阅读更多...
第八篇：node模版引擎Handlebars及他的高级用法（动态参数）

第八篇：node模版引擎Handlebars及他的高级用法（动态参数）

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! ​ 目录 &#x1f4d8; 引言&#xff1a; &#x1f…
阅读更多...
【VSCode 光标返回上一位置】

【VSCode 光标返回上一位置】

默认按键 Windows: Alt ← ;或者 鼠标侧键 Linux: Ctrl Alt - ;貌似数字键盘的减号没效果 Mac: Ctrl - 自定义修改方法&#xff1a; VSCode左下角 “管理 / Manage” “键盘快捷方式 / KeyBoard Shortcuts” 搜索 “前进 / Go Forward 或 后退 / Go Back” 双击需…
阅读更多...
HarmonyOS4.0系统性深入开发33相对布局（RelativeContainer）

HarmonyOS4.0系统性深入开发33相对布局（RelativeContainer）

相对布局&#xff08;RelativeContainer&#xff09; 概述 RelativeContainer为采用相对布局的容器&#xff0c;支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点&#xff0c;也支持指定父容器作为锚点&#xff0c;基于锚点做相对位置布局。下图是一个…
阅读更多...
【python基础】爬虫练习

【python基础】爬虫练习

不知道大家有没有通过豆瓣网寻找一些排名较高的电影&#xff0c;反正小编基本上是顺着排名一点点找电影看。 本文将详细介绍如何使用Python爬虫抓取豆瓣网电影评论用户的观影习惯数据&#xff0c;并进行简单的数据处理和分析。 目录 一、配置环境1.1、 安装Python1.2、 安装Re…
阅读更多...
『C++成长记』string使用指南

『C++成长记』string使用指南

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;C &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、string类介绍 二、string类的常用接口说明 &#x1f4d2;2.1string类对象的常…
阅读更多...
Sg7050ccn晶体振荡器spxo规格书

Sg7050ccn晶体振荡器spxo规格书

SG7050CCN是一款CMOS输出石英晶体振荡器&#xff0c;小体积尺寸7.0x5.0mm,四脚贴片&#xff0c;额定频率2.5MHz ~ 50MHz&#xff0c;电源电压4.5V至5.5V,工作温度范围B : -20 C to 70 C / G : -40 C to 85 C C&#xff0c;具有小体积轻薄型&#xff0c;低抖动&#xff0c;低功耗…
阅读更多...
Unity打包Android，jar文件无法解析的问题

Unity打包Android，jar文件无法解析的问题

Unity打包Android&#xff0c;jar无法解析的问题 介绍解决方案总结 介绍 最近在接入语音的SDK时&#xff0c;发现的这个问题. 当我默认导入这个插件的时候&#xff0c;插件内部的文件夹&#xff08;我下面话红框的文件夹&#xff09;名字原本为GCloudVoice&#xff0c;这时候我…
阅读更多...
vit细粒度图像分类（八）SIM-Trans学习笔记

vit细粒度图像分类（八）SIM-Trans学习笔记

1.摘要 细粒度视觉分类(FGVC)旨在从相似的从属类别中识别物体&#xff0c;这对人类准确的自动识别需求具有挑战性和实用性。大多数FGVC方法侧重于判别区域挖掘的注意机制研究&#xff0c;而忽略了它们之间的相互依赖关系和组成的整体对象结构&#xff0c;而这些对模型的判别信…
阅读更多...
解锁文档处理的全新维度：ONLYOFFICE 文档开发者版

解锁文档处理的全新维度：ONLYOFFICE 文档开发者版

前言 相信大家对于 ONLYOFFICE 这款办公软件可能已经有所耳闻&#xff0c;最近因工作需要&#xff0c;我在众多办公协作工具中选择了 ONLYOFFICE&#xff0c;原因主要是它开源经济实惠&#xff0c;可以部署在自己的服务器上并且能够轻松集成到我们的平台中。在数字化信息时代&…
阅读更多...
torch与cuda\cudnn和torchvision的对应

torch与cuda\cudnn和torchvision的对应

以上图片来源于这篇博客 于是&#xff0c;我需要手动下载0.9.0torchvision 直接在网站https://pypi.tuna.tsinghua.edu.cn/simple/后面加上torchvision&#xff0c;就不用ctrlF搜torchvision了&#xff0c;即进入下面这个网站&#xff0c;找到对应版本的包下载安装即可 https…
阅读更多...
Github设置clone慢的解决方案

Github设置clone慢的解决方案

Github设置代理clone依然慢的解决方案 1、前提&#xff1a; 注意&#xff1a; 必须要有科学上网&#xff01;必须要有科学上网&#xff01;必须要有科学上网&#xff01;重要的事情说三遍&#xff1b; 2、http/https方案&#xff08;git clone时使用http&#xff09;&#x…
阅读更多...
MirrorLayer可以正常触摸屏幕原理分析

MirrorLayer可以正常触摸屏幕原理分析

背景&#xff1a; 上次blog分享了给学员朋友们布置的作业&#xff0c;今天来进行简单的揭秘。 问题&#xff1a; 在多屏互动时候有一个屏幕的画面是一个MirrorLayer&#xff0c;另一个屏幕画面是真实的&#xff0c;即2个屏幕上有一个是MirrorLayer&#xff0c;这个时候疑问就…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023