HTML基础学习

最新推荐文章于 2024-08-13 20:57:25 发布
最新推荐文章于 2024-08-13 20:57:25 发布
阅读量134 收藏
点赞数
分类专栏： 笔记 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42944538/article/details/121025782
版权
本文详细介绍了HTML，包括HTML5的优势、W3C标准、常见HTML工具、基本结构及标签，如标题、段落、链接、图像、表格、表单、页面结构和多媒体元素。此外，还探讨了HTML中的行内元素、块元素、列表和表格的使用，以及表单验证和隐藏域等功能。
摘要由CSDN通过智能技术生成

HTML

什么是HTML

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

HTML5的优势

  • 世界知名浏览器厂商对HTML5的支持，如：
  1. 微软
  2. google
  3. 苹果
  4. Opera
  5. Mozilla
  • 可以跨平台的使用

W3C标准

  • W3C(万维网联盟)，成立于1994年，Web技术领域最权威和具影响力的 中立性技术标准机构。

  • W3C标准包括

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

常见的HTML工具

  1. 记事本
  2. Dreamweaver
  3. IDEA
  4. WebStorm 等

HTML基本结构

<!--DOCTYPE:告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>

<html lang="en">

<!--head标签代表网页头部-->
<head>
    <!--meta描述性标签，它用来描述我们的一些信息-->
    <!--meat一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="重庆特色">
    <meta name="description" content="非常的美味可口">
    <!--title网页标题-->
    <title>我的第一个网页</title>
</head>
<!--body标签代表网页主体-->
<body>
Hello World!
</body>
</html>

HTML的注释写法 快捷键：Ctrl + /

网页的基本标签

  • 标题标签

    >

  • 段落标签

  • 换行标签

  • 水平线标签

  • 字体样式标签加粗 斜体

  • 注释和特殊符号 注释符 ， &nbsp 空格 ， &gt 大于符号 ，&lt 小于符号 ，&COPY 版权符号

图像标签

  • 常见的图像格式：
  1. JPG
  2. GIF
  3. PNG
  4. BMP
  • 图像标签：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XOSaCgly-1635434992860)(C:\Users\86150\AppData\Roaming\Typora\typora-user-images\image-20211028171741528.png)]

链接标签

  • 链接标签：
<!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/image/TouShang.png" alt="头像" title = “悬停文字” width="300" height="300">
</a>


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


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



</body>
</html>

行内元素和块元素

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

列表

  • 列表就是信息资源的一种展示形式。它可以使信息结构和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。
  • 列表的分类
  1. 无序列表
    • 有序列表
      2. 自定义列表
        (标签名)
        (标签内容) 
<!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++</li>
</ol>
<hr/>
    
<!--无序列表
应用范围：导航，侧边栏...
-->
<ul>
    <li>java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C++</li>
</ul>
    
<!--自定义列表
dl:标签
dt:列表名称
dd:列表类容
运用范围：公司网站底部
-->
<dl>
    <dt>学科</dt>

    <dd>JAVA</dd>
    <dd>Python</dd>
    <dt>代码</dt>
    <dd>运维</dd>
    <dd>C++</dd>
</dl>


</body>
</html>

表格

  • 特点：简单通明，结构稳定
  • 基本结构

  1. 单元格

  2. 行

  3. 列

  4. 跨行 colspan

  5. 跨列 rowspan

    <!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="3" >1-1</td>
    </tr>
    <tr>
        <!--rowspan跨列-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>

</table>
</body>
</html>

    视频和音频

    • 视频元素 src (资源路径) controls (控制条) autoplay （自动播放）
    • 音频元素 同上

页面结构分析

元素名描述
header标题头部区域内容（用于页面或页面中的一块区域）
footer标记脚部区域类容（用于真个页面或页面的一块区域）
sectionWeb页面中的一块独立区域
article独立文章的类容
aside相关内容或应用（常用于侧边栏）
nav导航类辅助类容
<!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>
</head>
<body>
<!--iframe内联框架
src:地址
W-H：宽高
-->
<iframe src="http://www.taobao.com" frameborder="0" name="woeld" width="500" height="500"></iframe>
<a href="7.表格练习.html" target="woeld">点击跳转</a>
</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="post">

    <!--文本输入框：input type="text"-->
    <p>名字：<input type="text" name="username"> </p>

    <!--密码框：input type="password" name="pwd"-->
    <p>密码：<input type="password" name="pwd"> </p>

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

    </body>
    </html>

表单元素

属性说明
type指定元素的类型：text、password、checkbox、radio、submit、reset、file、hidden、image、button，默认text
name指定表单元素的名称
value元素的初始值。type为radio时必须指定一个值
size指定表单元素的初始宽度。
maxlengthtype为text或passworld时，输入的最大字符数
checkedtype为radio或checkbox时，指定按钮是否被选中
<!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="post">

    <!--文本输入框：input type="text"
        maxlength="8"  最长能写几个字符
        size ： 文本框的长度
    -->
    <p>账号：<input type="text" name="username" value="旺哥好帅" maxlength="8"size="30"> </p>

    <!--密码框：input type="password" name="pwd"-->
    <p>密码：<input type="password" name="pwd"> </p>

<!--radio:单选框标签
value ： 单选框的值
name : 表示组
-->
    <p>性别：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

<!--checkbox : 多选框
-->
<p>爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="tingge" name="hobby">听歌
    <input type="checkbox" value="huahua" name="hobby">画画
    <input type="checkbox" value="xiezi" name="hobby">写字
</p>

<!--
input type="button" ：普通按钮
input type="image" : 图片按钮
input type="submit" ：提交按钮
input type="reset" ：重置按钮
-->
    <p>按钮：
        <input type="button" value="开始" name="bt1">
        <input type="image" src="../resources/image/Dian.png">
    </p>



    <p>
<!--submit ： 提交  reset ： 重置-->
    <input type="submit">
    <input type="reset" value="清空表单">
    </p>
    </form>

    </body>
    </html>

下拉列表框 文本域 文件域等其他表单控件

<!--下拉框，列表框
select  下拉列表框
selected ： 默认被选中
-->
    <p>国家：
        <select name="列表名称" id="国籍">
            <option value="chnar">中国</option>
            <option value="rs" selected>瑞士</option>
            <option value="usa">美国</option>
            <option value="yidali">意大利</option>

        </select>
    </p>

<!--
textarea : 文本域
cols 多少列
rows 多少行
-->
    <p>反馈：
        <textarea name="textarea" id="" cols="50" rows="10">文本内容</textarea>
    </p>

<!--input type="file" ：文件域-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
<!--input type="email" ：邮件验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>
<!--input type="url" : 网站验证-->
    <p>网址：
        <input type="url" name="url">
    </p>
<!--input type="number" ：数字验证-->
    <p>商品数量：
        <input type="number" name="num" max="100" min="0" step="1">
    </p>
<!--input type="range" : 滑块-->
    <p>音量:
        <input type="range" min="0" max="100" name="yingliang">
    </p>
<!--搜索框-->
    <p>
        <input type="search"name="search">
    </p>

表单的应用

  • 隐藏域 hidden 可以隐藏密码
  • 只读 readonly 只能读不能删除
  • 禁用 disabled 不能选择

表单初级验证

  • 常用方式
  1. placeholder 提示信息 如：请输入账号
  2. required 非空判断 提示信息不能为空
  3. pattern 正则表达式
小城小人物
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML基础学习（全）
qq_44732593的博客
07-11 1万+
HTML概述 HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。 HTML骨架格式 日常生活的书信，我们要遵循共同的约定。 同理：HTML 有自己的语言语法骨架格式： <HTML> <head> <title></title> </head> <body> &
HTML零基础入门教程完整版
哈哈
09-11 2万+
HTML零基础入门教程完整版
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 22万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
Html基础学习
02-02
网站简单的Html基础编程，以ppt的形式结合代码了解Html中的各个标签
HTML基础学习.zip
01-01
HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML...
HTML基础学习示例代码.zip
01-01
HTML基础学习示例代码HTML基础学习示例代码HTML基础学习示例代码 HTML基础学习示例代码HTML基础学习示例代码HTML基础学习示例代码 HTML基础学习示例代码HTML基础学习示例代码HTML基础学习示例代码 HTML基础学习示例...
html基础学习
11-12
总之，HTML基础学习涵盖了网页的结构、样式设计以及简单的交互功能。通过学习这些基础知识，初学者能够创建出具有基本功能和样式的静态网页，并为进一步学习动态网站开发（如JavaScript、PHP或Python等后端技术）...
HTML样式- CSS——WEB开发系列08
一条晒干的咸鱼的博客
08-13 773
HTML 和 CSS 是构建现代网页的基础。HTML（超文本标记语言）负责定义网页的结构，而 CSS（层叠样式表）则用于控制网页的外观和布局。
JS UI库DHTMLX Suite v8.4全新发布——图表、网格组件等API全面升级
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
08-13 429
本文将为大家介绍强大JavaScript UI库DHTMLX Suite v8.4新功能，欢迎下载新版体验！
salesforce rich text 字段支持html中内嵌JavaScript吗
Debug yourself!
08-13 359
如果你尝试在 Salesforce 的富文本字段中插入 JavaScript，代码会被过滤掉。推荐的方式是在适当的地方使用 Salesforce 支持的 JavaScript 功能，比如自定义按钮、Visualforce 页面或 Lightning 组件，而不是在富文本字段中直接嵌入脚本代码。
240810-Gradio通过HTML组件打开本地文件+防止网页跳转到about:blank
专注机器学习之路
08-10 201
这个代码改动后，你应该能够实现点击 HTML 组件后仅打开指定的 PPTX 文件，而不会跳转到空白页面。为了防止每次点击 HTML 组件后自动跳转到。，以防止默认的跳转行为。
html 关于table合并外边框以及自动滚动问题汇总
lfl18326162160的博客
08-13 150
固定高度显示上下滑动。
掌握网络数据的钥匙：Python Requests-HTML库深度解析
AIGC搞起
08-13 423
是一个Python第三方库，它扩展了requests的功能，允许用户获取和操作由JavaScript动态生成的网页内容。它使用pyppeteer作为后端，使得开发者能够以同步的方式处理异步的网页内容。是一个强大的库，它扩展了Python在处理网络请求和动态内容方面的能力。通过本文的介绍，你已经了解了如何安装和使用这个库，以及如何在实际场景中应用它。记住，每个库都有其局限性，合理地使用和调试是成功的关键。希望本文能帮助你更有效地利用库，解锁网络数据的潜力。
css实现太极图
yinge0508的博客
08-13 160
【代码】css实现太极图。
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 1697
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
HtmlUnit：探索Web自动化的强大工具
Aaron_945的博客
08-12 649
HtmlUnit 是一个开源的“无头”（headless）浏览器，它模拟了浏览器环境，允许开发者在不需要实际浏览器界面的情况下执行JavaScript、CSS、DOM操作以及HTTP请求。它模拟了浏览器的许多方面，包括DOM操作、CSS选择器、AJAX请求等，使得开发者可以在服务器端或无需图形界面的环境中执行Web应用程序的自动化测试。通过模拟浏览器的行为，HtmlUnit使得开发者能够在无需实际浏览器界面的情况下执行复杂的Web操作。对于AJAX请求，HtmlUnit提供了。
【python】使用字符串格式化渲染html
最新发布
longforone的博客
08-13 349
将 CSS 中的“{}”全部替换为“{{}}”，这种方法是可行的。在 Python 进行字符串格式化时，“{{}}”中的“{}”及其他内容会被当作普通字符串处理，不会被格式化。但当我开启 PyCharm 的代码格式化功能时，原本的“{{}}”会被转换为“{\n{ }\n}”，因此使用起来较为麻烦，甚至不太能用。然而，由于 HTML 模板中存在 CSS 样式，其“{}”语法与 Python 格式化字符串的语法产生了冲突。接着，针对“body”部分使用关键字参数进行字符串格式化，如此一来，看起来也更为直观。
HTML基础学习：标签与语法要点
"HTML基础标签的学习，包括HTML的基本概念、书写原则、常用标签和文档类型。\n\nHTML（HyperText Markup Language）是用于创建网页的标记语言，它描述了文档的结构，而不是具体的表现形式。HTML标签是其核心组成部分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小城小人物

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值