HTML的学习详解（主要以代码）

最新推荐文章于 2024-06-13 09:50:16 发布
最新推荐文章于 2024-06-13 09:50:16 发布
阅读量378 收藏 5
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45598422/article/details/109721196
版权
本文详细介绍了HTML的基础知识，包括HTML5、W3C标准、HTML的基本结构、常用标签如标题、段落、图像、链接、表格、媒体元素、页面结构元素如header、footer等。还讲解了表单元素及其验证特性，以及如何使用iframe创建内联框架。
摘要由CSDN通过智能技术生成

HTML

HTML：Hyper Text Markup Language（超文本标记语言）
目前网页中常用：HTML5

W3C

World Wide Web Consortium（万维网联盟）
成立于1994年，Web技术领域最权威的和具影响力的国际中立性技术标准机构

W3C的标准

  1. 结构化标准语言（HTML、XML）
  2. 表现标准语言（CSS）
  3. 行为标准（DOM、ECMAScript）

HTML基本结构

网页头部 主体部分

网页信息

Ctrl+/：写注释

<!-- DOCTYPE:告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!-- meta描述性标签，用来描述网站的一些信息   -->
<!--meta一般用来做SEO（搜索引擎优化）-->
    <meta charset="UTF-8">
    <meta name="keywords" content="">
<!-- 网页标题-->
    <title>我的第一个网页</title>
</head>
<!--body标签代表网页主体-->
<body>
Hello,World!
</body>
</html>

基本标签

输入一个标签，然后按下tab可以快速生成，如h1+tab

<!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>hh</p>
<p>s </p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
跑得快<br/>
hh<br/>
s<br/>
<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体：  <strong>i love you</strong>
斜体：  <em>i love you</em>
<br/>
<!--特殊符号-->
空   格：
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
&gt;
<br/>
&lt;
&copy;版权所有
<!--
 特殊符号记忆方式
 &  ;
-->
</body>
</html>

图像标签

常见的图像格式

  • JPG
  • GIF
  • PNG
  • BMP

标签代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--img学习
src：图片地址(必填)
    相对地址，绝对地址
    ../ 上一级目录
alt：图像未找到时，显示alt里的内容（必填）
title：鼠标悬停在图片上显示的文字
-->
<img src="../resources/image/1.png" alt="我的头像" title="悬停文字" width="373" height="365">
</body>
</html>

链接标签（超链接和锚链接）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--使用name标记-->
<a name="top">顶部</a>
<a href="#down">去底部</a>
<!--a标签
href：必填，表示要跳转到那个页面
target：表示窗口在哪里打开
     _blank 在新标签中打开
     _self 在自己的网页中打开
-->
<a href="我的第一个学习.html" target="_blank">点击我跳转到页面1</a>
<a href="http://www.baidu.com">点击我跳转到百度</a>
<br/>
<a href="我的第一个学习.html">
    <img src="../resources/image/1.png" alt="我的头像" title="悬停文字" width="373" height="365">
</a>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>
<a name="down">底部</a>
<!--功能性链接
邮件链接：mailto
QQ链接
-->
<a href="mailto:495793569@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>

块元素和行内元素

块元素

无论内容多少，该元素独占一行（p、h1-h6）

行内元素

左右都是行内元素的可以排在一行（a、stong、em）

列表元素

定义

列表是信息资源的一种展示形式。它可以是信息结构化和条理化，并以列表的样式显示出来

分类

  1. 无序列表
  2. 有序列表
  3. 定义列表

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--有序列表
  应用范围：试卷，问答。。。。
-->
<ol>
    <li>Java</li>
    <li>c++</li>
    <li>python</li>
    <li>web</li>
</ol>
<hr/>
<!--无序列表
   应用范围：导航，侧边栏
-->
<ul>
    <li>Java</li>
    <li>c++</li>
    <li>python</li>
    <li>web</li>
</ul>
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容
应用范围：公司网站底部
-->
<dl>
    <dt>学科</dt>
      <dd>Java</dd>
      <dd>c++</dd>
      <dd>python</dd>
      <dd>web</dd>
    <dt>位置</dt>
      <dd>湖北</dd>
      <dd>北京</dd>
      <dd>上海</dd>
      <dd>西安</dd>
</dl>
</body>
</html>

表格

结构

  • 单元格
  • 行
  • 列
  • 跨行
  • 跨列

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--表格table
 行 tr
 列 td
 跨列  colspan
 跨行  rowspan
-->
<table border="1px">
    <tr>
        <td colspan="3" >学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>60</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>70</td>
    </tr>
    <tr>
        <td rowspan="2">李四</td>
        <td>语文</td>
        <td>70</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>
</body>
</html>

视频和音频

视频元素

video

音频元素

audio

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--音频和视频
src:资源路径
controls：控制条
autoplay：自动播放
-->
<video src="../resources/video/2.mp4" controls autoplay></video>
<audio src="../resources/audio/1.mp3" controls autoplay></audio>
</body>
</html>

页面结构分析

  • header：标题头部区域的内容
  • footer：标记脚部区域的内容
  • section：Web页面中的一块独立区域
  • article：独立的文章内容
  • aside：相关内容或应用（常用于侧边栏）
  • nav：导航类辅助内容

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="300" height="500"></iframe>
<a href="我的第一个学习.html" target="hello">点击跳转</a>
</body>
</html>

表单元素

表单应用

​ readonly 只读
​ hidden 隐藏域
​ disable 禁用

表单验证

placeholder 提示信息
required 非空判断
pattern 正则表达式

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式
      get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
      post：比较安全，传输大文件
placeholder 提示信息
required 非空判断
pattern 正则表达式
-->
<form action="我的第一个学习.html" method="get">
<!--文本输入框：input type="text"
     value="" 默认初始值
     maxlength="3" 最长能写几个字符
     size="20"  文本框长度
     readonly 只读
     hidden 隐藏域
     disable 禁用
     -->
    <p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>
<!--密码框：input type="password" name="pwd"-->
    <p>密码：<input type="password" name="pwd" hidden></p>
<!-- 单选框标签
   input type="radio"
   value：单选框的值
   name：表示组
-->
    <p>性别
        <input type="radio" value="boy" name="sex" checked>男
        <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"   重置按钮
   disable 禁用
-->
    <p>按钮
        <input type="button" name="btn1" value="点击" disabled>
     <!-- <input type="image" src="../resources/image/1.png">-->
    </p>
<!--下拉框，列表框
   selected :默认选上
-->
    <p>国家
        <select name="列表名称" >
            <option value="cn">中国</option>
            <option value="us">美国</option>
            <option value="jp" selected>日本</option>
            <option value="eth">瑞士</option>
        </select>
    </p>
<!-- 文本域
   cols="50" rows="10" 行和列
 -->
    <p>反馈
        <textarea name="textarea" cols="50" 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>
    <!--URL验证-->
    <p>商品数量
        <input type="number" name="num" max="100" min="0" step="1">
    </p>
<!--滑块-->
    <p>音量
        <input type="range" name="voice" min="0" max="100" step="1">
    </p>
<!--搜素框-->
    <p>搜素
        <input type="search" name="search">
    </p>
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>
</form>
</body>
</html>
沐三i
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML代码学习
Tuye的博客
09-09 1453
任务： 请根据给出的需求，在基本模板上完善网页，网页包括首页、登录、注册界面。 实现3个页面功能，页面外观请参考给出的具体图片 首页代码： <html> <body> <h1>各位~注意了，这个页面是...是首页</h1> <p> <center><a href="regis.html" >注册</...
HTML代码学习（上）
在下_诸葛的博客
04-28 977
本人花一天时间学习（复习）HTML，下面是我的学习笔记，记录本人的学到了那些有趣的知识
HTML学习代码
04-09
HTML中废弃代码的讲解和实例，源代码展示，供学习参考。
HTML实例网页代码, 本实例适合于初学HTML的同学 (个人博客网站)
最新发布
有问必答，欢迎打扰，项目开发，网页设计
06-13 692
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
全部HTML代码学习
12-05
.全部HTML代码学习 全部HTML代码学习文件类型 <html></html> （放在档案的开头与结尾） 文件主题 <title></title> （必须放在「文头」区块内） 文头 <head></head> （描述性资料，像是「主题」） 文体 <body></body> （文件本体） 结构性定义（由浏览器控制的显示风格） 标题 <h?></h?> （从1到6，有六层选择） 3.0 标题的对齐 <h? align=left|center|right></h?> 3.0 区分 <div></div> 3.0 区分的对齐 <div align=left|right|center|justify></div> 引文区块 <blockquote></blockquote> （通常会内缩） 强调 （通常会以斜体显示） 特别强调 <strong></strong> （通常会以加粗显示） 引文 <cite></cite> （通常会以斜体显示） 码 <code></code> （显示原始码之用） 样本 <samp></samp> 键盘输入 <kbd></kbd> 变数 <var></var> 定义 <dfn></dfn> （有些浏览器不提供） 地址 <address></address> 3.0 大字 <big></big> 3.0 小字 <small></small>
HTML学习-源码
qq_37431752的博客
02-27 1730
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link href="https://csdnimg.cn/public/favico
html5 canvas开发详解第二版 示例代码
01-09
在"HTML5 Canvas开发详解第二版 示例代码"中，我们可以深入学习和实践Canvas的各种功能。 这本书的第二版示例代码涵盖了多个关键知识点，包括但不限于： 1. **基本绘图**：Canvas API提供了`fillRect()`、`...
《Html5 Canvas开发详解》示例代码
02-03
这本书《Html5 Canvas开发详解》第二版提供了详细的示例代码，帮助学习者深入理解Canvas的用法和技巧。我们将逐一探讨每个章节的可能涵盖的知识点。 1. **第一章**: 基础入门 这一章通常会介绍Canvas的基本概念，...
详解Angular2学习笔记之Html属性绑定
12-29
基本HTML属性 ]=tableColspan> Css 类绑定 <!-- 第一种情况 class 类全部替换 --> ]=divClass>CSS 类绑定，[class] 全部替换的例子 <!-- 第二种情况 替换 class 类的部分属性 --> ]=isSpcial>CSS 类...
JAVA WEB学习课件及代码详解第二部分
07-07
JAVA的J2EE WEB学习资料，其中包括了学习视频、讲义、笔记、以及练习代码等，适合刚接触JAVA同时需要搭建WEB平台的同学使用。 此为第一部分，包括以下课程内容： 1、day05_JDBC 2、day06_JDBC连接池&JDBCTemplate 3...
HTML5开发精要与实例详解（完整版源代码含说明文档）
02-26
HTML5开发精要与实例详解（完整版源代码含说明文档）内容分为两大部分：第一部分通过一系列中大型案例全方位对html 5的各个重要知识点进行了详细的讲解，每个案例包含案例概述、页面效果展示、案例所涉及主要知识点...
HTML学习源代码
03-27
该文件为HTML基础代码，里面有详细的注释。适合初学者下载学习。本着资源共享的原则，免费给大家下载
HTML代码大全（初学者必备！必背！）
10-21
很多初学网页制作的人，都可能会为了记不住HTML代码。这里提供HTML代码。熟练HTML的人这个没有用，不熟练的人还是拿去背一背比较好！
html代码学习,HTML代码基础学习
weixin_32349913的博客
06-09 239
大家好，现在大家已经了解了什么是SEO，怎么学习SEO，也知道什么是域名怎么使用域名了，那么蜗牛就给大家分享一下学习SEO需要懂的基础的不能再基础的内容：HTML代码基础的学习了。一、什么是HTML？HTML(HyperText Markup language)译成中文叫：超文本编辑语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分(外语...
HTML学习
m0_61422721的博客
07-20 400
每个.html文件都有的代码叫做初始代码，要复合html文件的规范写法。!+tab键快速的创建html的初始代码。
java的web开发之旅——第1站&html
qq_49948651的博客
12-20 575
java的web开发之旅——第1站&html
HTML入门学习-含代码和配套资料
热门推荐
fallwind_of_july的博客
06-21 1万+
前段时间学习了一下HTML和简单的网页制作，非常有意思，这里把笔记和代码梳理一下。无论是否看过配套视频的，都比较容易理解，供大家参考学习，文章末尾附上可以下载运行的代码，有兴趣的小伙伴请自行下载运行。 配套视频(星月教你做网站)： https://www.bilibili.com/video/av5862916/?p=1 建议的HTML学习网站： https://www.runoob.com/ht...
HTML基本结构
weixin_34198762的博客
11-26 148
HTML的基本机构 完整的HTML文件至少包括<HTML>标签、<HEAD>标签、<TITLE>标签和<BODY>标签，并且这些标签都是成对出现的，开头标签为<>，结束标签为</>，在这两个标签之间添加内容。通过这些标签中的相关属性可以设置页面的背景色、背景图像等。 1. HTM...
HTML基础学习
weixin_73870552的博客
12-04 1149
1.HTML简介HTML（Hyper Text Markup Language）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行语义化的描述。HTML和其他编程语言不同，HTML不是一门真正意义上的编程语言，而是一种标记语言，通过带有尖角号的标签对文本进行标记，从而实现网页的结构搭建。
HTML代码详解与实例
HTML（HyperText Markup Language）是一种标记语言，用于创建和设计网页的结构。"html代码大全"文档提供了HTML基础元素和常用属性的详细...通过实践和不断学习，你可以熟练运用HTML代码实现各种网页布局和交互效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值