HTML基础

最新推荐文章于 2024-07-25 11:26:35 发布
最新推荐文章于 2024-07-25 11:26:35 发布
阅读量134 收藏
点赞数
分类专栏： 前端 # html 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VIAww/article/details/124700483
版权

HTML基础

初识HTML

HTML：Hyper Text Markup Language(超文本标记语言)

W3C标准：

  • W3C

  • W3C标准：

    • 结构化标准语言(HTML、XML)
    • 表现标准语言(CSS)
    • 行为标准(DOM、ECMAScript)
<!-- DOCTYPE:告诉浏览器，我们使用什么规范，默认是html-->
<!DOCTYPE html>
<html lang="en">

<!-- head标签代表网页头部-->

<head>
    <!-- meta描述标签，用来描述网站的一些信息-->
    <!-- meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="html学习">
    <meta name="description" content="在这里可以进行html学习">

    <!-- 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>
<!--段落标签-->
<p> 两只老虎，两只老虎，</p>

<p>跑得快，跑得快，</p>
<p>一只没有眼睛，</p>
<p>一只没有尾巴，</p>
<p>真奇怪！真奇怪！</p>
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有耳朵，</p>
<p>一只没有尾巴，</p>
<p>真奇怪！真奇怪</p>

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

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

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

<!--特殊符号-->

空    格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br>
&gt;
<br>
&lt;
<br>
&copy;版权所有

<!--
特殊符号记忆方式
& ;


-->


</body>
</html>

图像标签

  • 常见图像格式

    • JPG

    • GIF

    • PNG

    • BMP

    • …

      在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src: 图片地址(必填)
    相对地址，绝对地址
    ../   --上一级目录
alt : 图片名字(必填)

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

超链接标签及应用

在这里插入图片描述

<!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">点击我跳转到页面</a>
<a href="https://www.baidu.com">点击我跳转到百度</a>
<br>

<a href="1.我的第一个网页.html" target="_blank">
<img src="../resources/image/1.jpg" alt="头像" title="悬停文字" width="300" height="300">
</a>




<p>
    <a href="1.我的第一个网页.html" target="_blank">
        <img src="../resources/image/1.jpg" alt="头像" title="悬停文字" width="300" height="300">
    </a>
</p>

<p>
    <a href="1.我的第一个网页.html" target="_blank">
        <img src="../resources/image/1.jpg" alt="头像" title="悬停文字" width="300" height="300">
    </a>
</p><p>
    <a href="1.我的第一个网页.html" target="_blank">
        <img src="../resources/image/1.jpg" alt="头像" title="悬停文字" width="300" height="300">
    </a>
</p><p>
    <a href="1.我的第一个网页.html" target="_blank">
        <img src="../resources/image/1.jpg" alt="头像" title="悬停文字" width="300" height="300">
    </a>
</p><p>
    <a href="1.我的第一个网页.html" target="_blank">
        <img src="../resources/image/1.jpg" alt="头像" title="悬停文字" width="300" height="300">
    </a>
</p><p>
    <a href="1.我的第一个网页.html" target="_blank">
        <img src="../resources/image/1.jpg" alt="头像" title="悬停文字" width="300" height="300">
    </a>
</p><p>
    <a href="1.我的第一个网页.html" target="_blank">
        <img src="../resources/image/1.jpg" alt="头像" title="悬停文字" width="300" height="300">
    </a>
</p><p>
    <a href="1.我的第一个网页.html" target="_blank">
        <img src="../resources/image/1.jpg" alt="头像" title="悬停文字" width="300" height="300">
    </a>
</p><p>
    <a href="1.我的第一个网页.html" target="_blank">
        <img src="../resources/image/1.jpg" alt="头像" title="悬停文字" width="300" height="300">
    </a>
</p>


<!--锚链接-->
<a href="#top">回到顶部</a>

<a name="down">down</a>








</body>
</html>

列表

<!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>
<hr>
<!--无序列表-->
<!--应用范围：导航，侧边栏...-->
<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>Linux</dd>
    <dd>C</dd>
    
</dl>
</body>
</html>

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>

<!--表格table
行 tr
列 td
-->
<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>

媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>

<!--音频和视频
src:资源路径
controls:控制条
autoplay:自动播放
-->
<video src="../resources/video/片头.mp4" controls autoplay></video>
<audio src="../resorces/audio/萤火虫和你.mp3" controls autoplay></audio>
</body>
</html>

页面结构分析

在这里插入图片描述

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

iframe内联框架

在这里插入图片描述

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

<!--iframe内联框架
src:地址
w-h:宽度高度
-->
<iframe src=""name="hello" frameborder="0" width="1000px" height="300px"></iframe>
<a href="1.我的第一个网页.html" target="hello">点击跳转</a>
</body>
</html>

初识表单post和get提交

表单语法

在这里插入图片描述

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

表单元素格式

在这里插入图片描述

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

<!--    单选框标签
        input type="radio:
        value:单选框的值
        name:表示组   -->
    <p>性别：
        <input type="radio" value="boy" name="sex">男</input>
        <input type="radio" value="girl" name="sex" checked>女</input>
    </p>
<!--    多选框
        input type = "checkbox"-->
    <p>爱好：
        <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>

<!--    按钮
<input type="button" 普通按钮
<input type="image" 图像按钮
<input type="submit">   提交按钮
<input type="reset">    重置
 -->
    <p>按钮：
        <input type="button" name="btnl" value="点击">
        <input type="image" scr="../resources/image/1.jpg">
    </p>



<!--    下拉框：列表框-->
    <p>国家：
        <select name="列表名称" id="">
            <option value="China">中国</option>
            <option value="Eng" selected>英国</option>
            <option value="eth">瑞士</option>
            <option value="Ind">印度</option>
        </select>
    </p>
<!--    文本域

-->

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

-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

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

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

    </p>

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




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


</form>
</body>
</html>
橡皮鸭小队长
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML基础练习题
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
HTML基础知识点
qq_40046544的博客
07-27 8601
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
HTML基础标签
weixin_45348240的博客
03-23 6061
一、HTML介绍 1、什么是HTML? HTML是一门语言，所有的网页都是用HTML这门语言编写出来的。HTML(HyperText Markup Language):超文本标记语言。 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。 标记语言：由标签构成的语言 HTML运行在浏览器上，HTML标签由浏览器来解析 HTML标签都是预定义好的。例如:使用< img>展示图片 2、W3C标准:网页主要由三部分组成 结构:HTML 表现:css 行为:
全网最全HTML基础
a1085653724的博客
04-20 5054
1.HTML结构 认识 HTML 标签 ，HTML 代码是由 "标签" 构成的。 形如: <body>hello</body> (1).标签名(body)放到<>中. (2).大部分标签成对出现,<body>为开始标签,</body>为结束标签. (3).少数标签只有开始标签, 称为 "单标签". (4).开始标签和结束标签之间, 写的是标签的内容.(hello everyone) (5).开始标签中可能会带有 "属性". id
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 22万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
HTML基础知识
xuan971130的博客
03-02 2892
一、基础知识： 1.网站：许多网页的集合。 2.HTML：超文本标记语言（Hyper Text Markup Language），用来描述网页的一种语言。不是一种变编程语言，而是一种标记语言。 3.浏览器内核（渲染引擎）：负责读取网页内容，整理讯息、计算网页的显示方式并显示页面。 4.Web标准的组成 ...
头歌-HTML基础
somewon的博客
03-06 9977
四川师范大学 头歌 web应用开发
HTML基础 - HTML表格
qq_45383769的博客
04-07 1万+
HTML基础 - HTML表格 1.无表头的表格 <table> <tr> <td> <table>标签代表的是表 <tr>标签代表的是行 <td>标签代表的是列 在html页面中的表格来着，就和excl的表格不一样喽，咱自己有自己的规则： 这就是没有表头，也就是最简单的一个表格。（设置了边框为1 ：border= “1”） 2.有表头的表格 <th> <th>表示就是表头了哦，字体是加粗居中显示的
web前端开发（一）—HTML基础
mdxiaohu的博客
07-31 10万+
  目录 web前端简介 什么是HTML？ HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、密码框 表单元素-多行文本框 表单元素-选择框 表单元素-下拉选择框 表单元素-按钮...
HTML基础笔记
02-06
HTML 基础知识笔记HTML 基础知识笔记HTML 基础知识笔记HTML 基础知识笔记
html基础教程
07-22
资源名称：html基础教程内容简介：HTML基础-第一讲HTML基础-第二讲HTML基础第三讲---字体HTML基础第四讲---图像HTML基础第五讲---控制表格及其表项的对齐方式HTML基础第六讲---表格HTML基础第七讲---框架HTML基础第...
HTML基础.xmind
12-07
HTML基础.xmind
html基础整理
04-19
整理一些html常用的基础的标签作用与其网页的展示效果非常基础，简单易懂
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3280
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
[HTML]一文掌握
CSDN20221005的博客
07-21 986
场景：在网页的底部导航中通常会用到。语法：dl>dt>dd特点：dd前会默认显示缩进效果注意：dl中只允许包含dt/dd标签dt/dd中可以包含任意内容。
基于 HTML+ECharts 实现的数据可视化大屏案例（含源码）
柯晓楠
07-24 696
数据可视化已成为企业决策和业务分析的重要工具。通过直观、动态的图表展示，数据可视化大屏能够帮助用户快速理解复杂的数据关系，发现潜在的业务趋势。本文将介绍如何利用 HTML 和 ECharts 实现一个功能丰富的数据可视化大屏案例。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
最新发布
xcLeigh
07-25 1933
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
HTML基础：表单标记详解
本章节详细介绍了HTML基础知识中的表单标记，这是网页设计和交互的重要组成部分。HTML (HyperText Markup Language) 是一种描述性标记语言，非编程语言，主要用于构建网页结构和呈现内容。表单标记`<form>`是HTML的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值