HTML基础入门

最新推荐文章于 2024-05-28 21:47:28 发布
最新推荐文章于 2024-05-28 21:47:28 发布
阅读量279 收藏 3
点赞数 4
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HF1203/article/details/114374639
版权

文章目录

HTML学习（HTML5）

使用工具IDEA ，直接创建java 程序，创建HTML文件

1: 初识HTML （HTML5）
2: 网页基本标签
3：图片，超链接，网页布局
4：列表，表格，媒体元素
5：表格以及表单应用
6：表单初级验证

什么是HTML

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

HTML优势

HTML5 : 各大厂商对HTML的支持 ，以及未来的优势

W3C

万维网联盟 成立于1994年，中立性技术标准机构
http://www.w3.org/
http://www.chinaw3c.org

W3C标准

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

工具

记事本 ，DreamWeaver，IDEA，WebStorm

HTML 基本标签

  • 标题标签
  • 段落标签

  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div align="center">
<!-- 标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--  段落标签-->
<p> 花非花 雾非雾 </p>
<p> 夜半来 天明去 </p>
<p> 来如春梦了无痕 </p>
<p> 去似朝云无觅处 </p>

<!--  换行标签-->
花非花 雾非雾<br/>
夜半来 天明去<br/>
来如春梦了无痕<br/>
去似朝云无觅处<br/>
<!--  水平线标签-->
    <hr>
    <!--  字体 样式标签-->
    <!--  粗体  斜体样式标签-->
    <strong>花非花 雾非雾</strong>
    <em>夜半来 天明去</em>
    <br>
    <!-- 特殊符号-->
    空                                       格
    <br>
    空&nbsp&nbsp&nbsp&nbsp格
    <br/>
    大于号&gt;
    小于号&lt;
    版权符号 &copy;
</div>
</body>
</html>

HTML 图像标签

  • 常见的图片格式： jpg/gif/png/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!-- img 学习 src 图片地址
alt ：图片名字 必填
title：悬停文字
-->
<img src="./resource/image/weixin.png" alt="weixin" title="悬停文字">
</body>
</html>

HTML 超链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<div align="center">
<!-- a 标签
href 链接地址必填项
target  :_blank 跳转新的窗口打开
-->
<a name="top">顶部</a>
<a href="./imageHtml.html"  target="_blank"> 图片超链接</a>
<a href="http://www.baidu.com"  target="_blank"> 跳转到百度</a>
<br/>
<a href="http://www.baidu.com"target="_blank">
    <img src="./resource/image/weixin.png" alt="weixin" title="悬停文字">
</a>

<p>
    <a href="http://www.baidu.com"target="_blank">
        <img src="./resource/image/weixin.png" alt="weixin" title="悬停文字">
    </a>
</p>
<p>
    <a href="http://www.baidu.com"target="_blank">
        <img src="./resource/image/weixin.png" alt="weixin" title="悬停文字">
    </a>
</p>
<p>
    <a href="http://www.baidu.com"target="_blank">
        <img src="./resource/image/weixin.png" alt="weixin" title="悬停文字">
    </a>
</p>
<p>
    <a href="http://www.baidu.com"target="_blank">
        <img src="./resource/image/weixin.png" alt="weixin" title="悬停文字">
    </a>
</p>

<p>
    <a href="http://www.baidu.com"target="_blank">
        <img src="./resource/image/weixin.png" alt="weixin" title="悬停文字">
    </a>
</p>
<p>
    <a href="http://www.baidu.com"target="_blank">
        <img src="./resource/image/weixin.png" alt="weixin" title="悬停文字">
    </a>
</p>
<p>
    <a href="http://www.baidu.com"target="_blank">
        <img src="./resource/image/weixin.png" alt="weixin" title="悬停文字">
    </a>
</p>
<p>
    <a href="http://www.baidu.com"target="_blank">
        <img src="./resource/image/weixin.png" alt="weixin" title="悬停文字">
    </a>
</p>
<!-- 锚链接-->
<a href="#top">回到顶部</a>

<!--功能性链接
邮件链接 mailto
-->
<a href="mailto:3074571354@qq.com">点击联系我</a>
</div>
</body>
</html>

HTML 行内元素 和 块元素

  • 行内元素：内容撑开宽度 ，元素排在一行，不会换行
  • 块元素： 无论内容多少 ，该内容独占一行

HTML 列表

  • 有序列表 ol
  • 无序列表 ul
  • 自定义列表 dl
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
<!--
有序列表：ul
-->
<ol>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
</ol>
<hr>
<!--
无序列表：ul
-->
<ul>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
</ul>
<br>
<!--
自定义 dl
dt ：自定义列表标题
dd：自定义列表内容 /选项
-->
<dl>
    <dt>人名</dt>
    <dd>张三</dd>
    <dd>李四</dd>
    <dd>王五</dd>
    <dd>赵六</dd>


    <dt>人名</dt>
    <dd>张三1</dd>
    <dd>李四2</dd>
    <dd>王五3</dd>
    <dd>赵六4</dd>
</dl>

</body>
</html>

HTML 表格标签

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

HTML 音视频标签

  • 视频标签：video

  • 音频标签：audio

视频标签 音频标签

HTML 页面结构分析

  • 头部 header
  • 脚部 footer
  • 导航栏 nav
  • 独立区块域 section
  • 文章 article
  • 侧边栏 aside
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页结构</title>
</head>
<body>
<header>
   <h1> 网页头部</h1>
</header>
<section>
    <h1>网页主体</h1>
</section>
<footer>
    <h1>网页脚本</h1>
</footer>

</body>
</html>

HTML内联标签 iframe

  • iframe 内联框架

<iframe src=“path” name=“框架标识名”>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!-- iframe 内联标签
src：引用页面地址
name：框架标识名
-->

<iframe src="//player.bilibili.com/player.html?aid=374476805&bvid=BV1VZ4y1P7mh&cid=304138012&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<iframe src="//www.baidu.com" frameborder="2px" width="1000px" height="800px"></iframe>
</body>
</html>

HTML表单语法

<form method=“post” action=“result.html”>

  • label 增强鼠标可用性

    • for 指向一个id 标记到制定的属性

  • select 下拉框

    • option 操作选项

  • input 属性

    • maxlength 最长几个字符

    • value 默认值

    • type 属性：url ，number ，email ，search ，range以及以下基本属性

      • checkbox 多选框

        • name 可以用用一个值表示一个组

        • value 选择值

      • 按钮

        • image 图片按钮 与submit 有同样的提交效果

        • button 普通按钮

      • radio 单选标签

        • value 单选值

        • name 可以用用一个值表示一个组

      • password 密码文本

      • text 普通文本

      • submit 提交

      • reset 重置 清空表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<!-- 表单form表单
action:提交的位置 可以是网站 也可以是请求处理的地址
-->
<div align="center">
<form action="firstHtml.html" method="get">
    <p>账号： <input type="text" value="123" name="account"></p>
    <p>密码： <input type="password" name="password"></p>
    <!--单选 radio-->
    <p> 性别<input type="radio" value="man" name="sex"> 男
        <input type="radio" value="girl" name="sex">女 </p>

    <!--多选 checkbox-->
    <p> 爱好
        <input type="checkbox" value="sleep" name="hobby" checked> 睡觉
        <input type="checkbox" value="eat" name="hobby" disabled>吃喝
        <input type="checkbox" value="play" name="hobby">玩乐
    </p>
    <!--按钮 button/image-->
    <p>按钮
        <input type="button" name="btn1" value="点击变长">
        <input type="image" src="resource/image/weixin.png">
    </p>
    <!--文件域-->
    <p>文件域
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </p>
    <!--    邮件认证-->
    <p>邮件认证
        <input type="email" name="email" value="3074571354@qq.com">
    </p>
    <!--    url认证-->
    <p>url认证
        <input type="url" name="url" value="http://www.baidu.com">
    </p>

    <!--    数字认证-->
    <p>数字认证
        <input type="number" name="url" max="100" min="10" step="5">
    </p>
    <!-- 滑块-->
    <p>滑块
        <input type="range" name="voice" min="10" max="100" step="5">音量
    </p>

    <!-- 搜索-->
    <p>搜索
        <input type="search" name="search" >
    </p>
    <!-- label 增强鼠标可用性-->
    <p>鼠标可用性
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">

    </p>
    <!-- 下拉框-->
    <p>下拉框
        <select name="address">
            <option value="shenzhen">深圳</option>
            <option value="shanghai">上海</option>
            <option value="beijing">北京</option>
            <option value="guangzhou">广州</option>

        </select>
    </p>
    <!--文本域 多行文本-->
    <p>反馈
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea></p>
    <p><input type="submit"> <input type="reset"></p>

</form>
</div>
</body>
</html>

HTML表单初级验证

  • 常用方式
    • placeholder 基本提示
    • required 必填项
    • pattern 正则表达式验证 https://www.jb51.net/tools/regexsc.htm(常用正则表达式，邮箱验证貌似不可行)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单初级验证</title>
</head>
<body>
<div align="center">
    <form method="get" action="firstHtml.html">
    <p> 账号
        <input name="account"  type="text" placeholder="请输入账号" required>
    </p>
    <p> 密码
        <input name="password"  type="password" placeholder="请输入密码" required>
    </p>
    <!--https://www.jb51.net/tools/regexsc.htm-->
    <p>邮箱
        <input type="text" name="sex" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" required>
    </p>
    <p>性别
        <input type="radio" name="sex" required> 男
        <input type="radio" name="sex"required> 女
    </p>
    <p>
        <input type="submit" >
        <input type="reset">
    </p>
    </form>
</div>

</body>
</html>

HTML总结

在这里插入图片描述

HF1203
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
html基础入门
08-09
html入门基础 适合零基础或初学者，讲解详细，简洁明了
html基础入门学习.md
11-14
总结了html的常用标签，属性以及最重要的表单操作，适合html基础入门
HTML基础入门视频课程
06-11
课程中使用的所有英文单词都会逐一查询并记录，真正做到零基础入门学习，适合初学者的教程！课程内容包括：1.HTML简介、文档结构2.Sublime的使用3.常用标签4.超链接、表格、表单5.内嵌框架iframe6.HTML5简介、新特性...
前端基础入门html技术
11-18
前端入门提供给刚入刚的小伙伴们免费学习
前端基础入门三大核心之HTML篇：深入解析PNG8、PNG16、PNG24与PNG32的差异及网页应用指南
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-23 1023
理解PNG格式的不同变体及其适用场景，是前端开发者必备的基础技能之一。通过合理的选用，不仅能提升网站的视觉效果，还能确保良好的性能体验。在实际工作中，你还遇到过哪些关于图像格式选择的挑战？或是有独到的优化策略？欢迎在评论区分享你的见解和经验，让我们一起探讨前端图像优化的更多可能性。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
【前端】XML和HTML的区别详解
double222222的博客
05-28 735
XML（eXtensible Markup Language）是一种标记语言，主要用于存储和传输数据。XML的设计目标是强调数据的自描述性和可扩展性。XML标签没有预定义，用户可以根据需要创建自己的标签。HTML（HyperText Markup Language）是一种标记语言，用于创建和展示网页内容。HTML的设计目标是强调内容的显示和链接能力。HTML标签是预定义的，每个标签都有特定的意义和用途。XML：标签是用户自定义的，可以根据需要创建任何标签，标签名必须遵循规则。HTML。
WPF WebBrowser控件解析 HTML
weixin_45381071的博客
05-27 267
【代码】WPF WebBrowser控件解析 HTML。
动态插入HTML内容有哪些常见用法
codemami的博客
05-22 475
动态列表和表格：对于需要从服务器获取数据并在页面上显示的列表或表格，可以使用JavaScript动态插入HTML内容。当用户滚动到页面底部或点击“加载更多”按钮时，可以使用JavaScript动态加载并插入新的内容块。用户交互反馈：当用户在网页上进行某些操作时（如点击按钮、提交表单等），可以使用JavaScript动态插入HTML内容来提供即时的反馈或结果。实时更新：对于需要实时更新的网页内容（如聊天室、股票行情等），可以使用JavaScript定时从服务器获取最新数据，并动态更新页面上的HTML元素。
HTML静态网页成品作业(HTML+CSS)——动漫熊出没介绍网页(3个页面)
weixin_42283461的博客
05-23 858
HTML静态网页成品作业(HTML+CSS)——动漫熊出没介绍网页(3个页面)
html通过数据改变，图片跟着改变
凡尘
05-22 304
html通过数据来控制样式展示
echarts柱状图，折线图样式
ndkfa的博客
05-22 232
【代码】echarts柱状图，折线图样式。
百度页面奔跑的白熊html、css
2302_80141844的博客
05-16 1336
用keyframes定义动画（类似定义类选择器）@keyframes动画名称{0%{100%{
HTML静态网页成品作业(HTML+CSS)——家乡沅陵介绍网页(1个页面)
weixin_42283461的博客
05-28 230
HTML静态网页成品作业(HTML+CSS)——家乡沅陵介绍网页(1个页面)
JS 实现鼠标框选（页面选择）时返回对应的 HTML 或文案内容
guoqkmiss的博客
05-23 1310
鼠标框选上报能监控用户在页面的行为，能为后续的数据分析等提供便利基于JS中的Selection和Range实现的，使用原生JS涉及到的操作比较多，包含键盘、鼠标右键、全选等能对框选的内容进行分类，区别html和text，更方便的看出用户选择了哪些内容。
【html项目实战】年长者便捷上网中心
weixin_56334307的博客
05-28 197
本HTML作品名为“年长者便捷上网中心”，旨在为年长用户提供一个友好且易于操作的在线界面。考虑到年长用户对于大字体、清晰的颜色和简洁布局的需求，该作品在设计和样式上进行了精心打造，以确保用户能够轻松浏览和使用。
HTML 页面布局
最新发布
m0_73983707的博客
05-28 212
如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上-位置，如:padding-top、padding-left、padding-right .组成:内容(content)、内边距(padding)、边框(border)、外边距(margin)border:设置边框的属性，如:1px solid #000;，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。② 宽度默认是父元素的宽度，高度默认由内容撑开。页面中所有的元素(标签)，都可以看做是一个。
HTML静态网页成品作业(HTML+CSS)——游戏阴阳师介绍网页(4个页面)
weixin_42283461的博客
05-28 270
HTML静态网页成品作业(HTML+CSS)——游戏阴阳师介绍网页(4个页面)
html零基础入门教程
05-28
好的，下面是一个简单易懂的HTML零基础入门教程： 1. HTML是什么？ HTML全称为“Hypertext Markup Language”，即“超文本标记语言”。它是一种用于创建网页的标准标记语言，通过HTML标签来描述网页的各种元素。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值