快速入门HTML

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

文章目录

HTML

HTML简述

  • HTML

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

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

  • HTML5的优势

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

  • W3C

    • World Wide Web Consortium(万维网联盟)
    • 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
    • http://www.w3.orgl
    • http://www.chinaw3c.orgl

  • W3C标准包括

    • 结构化标准语言(HTML、XML)
    • 表现标准语言(CSS)
    • 行为标准(DOM、ECMAScript )

  • HTML基本机构

    • < body >、< /body >等成对的标签，分别叫开放标签和闭合标签
    • 单独呈现的标签（空元素），如< hr/ >;意为用/来关闭空元素

image-20220726144359539

网页基本信息

  • DOCTYPE声明，代表文档类型
  • < head > 标签,代表网页头部
  • < body > 标签,代表网页主体
  • < title > 标签，代表网页标题
  • < meta >标签，描述性标签，用来描述我们网站的一些信息

网页基本标签

  • 标题标签

    •     <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>

  • 段落标签

    • 	<p>第一行</p>
       <p>第二行</p>
       <p>第三行</p>
       <p>第四行</p>
       <p>第五行</p>

  • 换行标签

    • 	第一行<br/>
	第二行<br/>
    第三行<br/>
    第四行<br/>
    第五行<br/>

  • 水平线标签

    • 	<hr/>

  • 字体样式标签

    • 	<strong>粗体</strong>
	<em>斜体</em>

  • 注释和特殊符号

    • 	空格 		&nbsp;
	大于号 	&gt;
	小于号		&lt;
	版权符号	&copy;

图像标签

  • 常见的图像格式
    • JPG
    • GIF
    • PNG
    • BMP
    • …

image-20220726163535079

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
  </head>
  <body>
      <img src="../resource/image/吴彦祖.png" alt="吴彦祖" title="悬停文字" width="700" height="600">
  </body>
</html>

image-20220726171006441

超链接标签及应用

  • 文本标签
  • 图像超链接

image-20220726171256917

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
  </head>
  <body>
    <!-- 使用name作为标记 -->
    <a id="top">顶部</a>
    <!-- 超链接 -->
    <!-- a标签
    href：必填，表示要跳转到哪个页面
    target：表示窗口在哪里打开
          _blank 在新页面中打开
          _self   默认是在原有页面打开，可省略
     -->
      <a href="图像.html" target="_blank">点击我跳转到页面1</a><br>
      <a href="https://www.baidu.com" target="_self">点击我跳转到百度</a><br>
            <img src="../resource/image/吴彦祖.png" alt="吴彦祖" title="悬停文字" width="700" height="600"><br>
                  <img src="../resource/image/吴彦祖.png" alt="吴彦祖" title="悬停文字" width="700" height="600"><br>
                        <img src="../resource/image/吴彦祖.png" alt="吴彦祖" title="悬停文字" width="700" height="600"><br>

      <!-- 锚链接
      1.需要一个锚标记
      2.跳转到标记
       -->
       <a href="#top">回到顶部</a>

  </body>
</html>

image-20220726173110430

块元素和行内元素

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

列表标签

  • 什么是列表
    • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
  • 列表的分类
    • 无序列表
    • 有序列表
    • 定义列表
<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
  </head>
  <body>
      <!-- 有序列表 -->
      <ol>
        <li>Java</li>
        <li>python</li>
        <li>C</li>
      </ol>

      <hr>

      <!-- 无序列表 
      应用范围：导航，侧边栏......
      -->
      <ul>
        <li>Java</li>
        <li>python</li>
        <li>C</li>
      </ul>

      <hr>

      <!-- 自定义列表 
      dl:标签
      dt:列表名称
      dt:列表名称

      应用范围：公司底部网站
      -->
      <dl>
        <dt>城市</dt>

        <dd>北京</dd>
        <dd>南京</dd>
        <dd>上海</dd>
        <dd>深圳</dd>
        <dd>杭州</dd>

      </dl>

  </body>
</html>

表格标签

  • 为什么使用表格
    • 简单通用
    • 结构稳定
  • 基本结构
    • 单元格
    • 行
    • 列
    • 跨行
    • 跨列
<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
  </head>
  <body>
      <!-- 表格
      行  tr
      列  td
       -->

      <table  border="1px">
          <tr>
            <!-- colspan  跨列 -->
            <td colspan="4" align="center">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>

image-20220726192326249

媒体元素

  • 视频元素
    • video
  • 音频元素
    • audio
<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
  </head>
  <body>
      <!-- 音频和视频
      src：资源路径
      controls:控制条
      autoplay:自动播放
       -->
      <video src="../resource/video/大国崛起.mp4" controls autoplay></video>
      <audio src="../resource/video/最伟大的作品.mp3" controls autoplay></audio>
  </body>
</html>

页面结构分析

image-20220726193026204

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
  </head>
  <body>
      <header><h2>网页头部</h2></header>

      <section>
        <h2>网页主体</h2>
      </section>

      <footer><h2>网页脚部</h2></footer>
  </body>
</html>

iframe内联框架

image-20220726194738484

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
  </head>
  <body>
    <!-- iframe   内联框架 
    src:地址
    w-h：宽度高度
    -->
      <iframe src="https：//www.baidu.com" name="hello" frameborder="0" width="1000px" height="800"></iframe>
  </body>
</html>

表单post和get提交

image-20220726195618008

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
  </head>
  <body>
      <h1>注册</h1>

      <!-- 表单form 
      action：表单提交的位置，可以是网站，也可以是一个请求处理地址
      method:post，get提交方式
        get方式提交：我们可以在url中看到我们提交的信息，不安全！但是效率高
        post方式提交：比较安全，传输大文件
      -->

      <form action="我的第一个网站.html" method="post">
        <!-- 文本输入框：<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>

image-20220726200634890

image-20220726200615647

文本框和单选框

image-20220726201226019

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

按钮和多选框

  <!-- 多选框  -->
         <p>爱好:
           <input type="checkbox" value="sleep" name="hobby">睡觉
           <input type="checkbox" value="code" name="hobby">敲代码
           <input type="checkbox" value="read" name="hobby">读书
           <input type="checkbox" value="eat" name="hobby">吃东西
         </p>

         <!-- 按钮 
         input type="button"普通按钮
         input type="image"图片按钮
         input type="submit"提交按钮
         input type="reset"重置按钮

         -->
          <p>按钮：
              <input type="button" name="btn1" value="点击变长">
          </p>

image-20220726205508512

列表文本域和文件域

    <!-- 下拉框，列表框 -->
          <p>下拉框：
            <select name="列表名称" >
              <option value="china">中国</option>
              <option value="japan">日本</option>
              <option value="thailand" selected>泰国</option>
              <option value="ameraca">美国</option>
            </select>
          </p>

          <!-- 文本域 -->
          <p>反馈：
            <textarea name="textarea" id="" 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>

            <p>url：
              <input type="url" name="url">
            </p>

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

            <!-- 滑块 -->
            <p>音量：
              <input type="range" name="voice" min="0" max="100">
            </p>

            <!-- 搜索框 -->
            <p>搜索：
              <input type="search">
            </p>

表单的应用

  • 隐藏域hidden
  • 只读readonly
  • 禁用disabled

表单初级验证

  • 目的
    • 减轻服务器的压力
    • 保证数据的安全性
  • 常用方式
    • placeholder提示信息
    • required 非空判断
    • pattern正则表达式
Cx陈
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
快速入门HTML和CSS
m0_54129816的博客
03-12 1776
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言这里只是讲一些我自己学习网页制作后认为可以快速掌握的学习方法和小技巧。因为不可能一篇本章就可以把HTML讲的非常清楚明白。感兴趣的可以向下看一看。一、HTML和CSS是什么？二、清楚要重点学什么说回来网页制作这块，我认为重点学习的话是css和javaScript，html的元素常用的会用后，拿过来知道几个结构我觉得差不多了，css才是能让你的网页焕然一新的工具。另外为什么说javascript也是重点？因为学到最后每个人做出来.
HTML 快速入门
liyananBest的博客
07-20 451
文章目录HTML一、什么是 HTML二、HTML 基本结构三、HTML 基本标签1、标题标签2、段落标签3、换行标签4、水平线标签5、粗体、斜体标签6、注释7、特殊符号四、图像标签五、链接标签锚链接六、行内元素和块元素行内元素块元素七、列表什么是列表列表分类1、有序列表2、无序列表3、自定义列表八、表格跨行跨列九、视频和音频1、视频2、音频十一、表单重要属性十二、表单中的输入控件1、文本框2、密码框3、单选框4、多选框5、下拉框6、文本域7、文件域8、按钮普通按钮提交按钮重置按钮图像按钮十三、表单应用1、只
前端零基础快速入门html
web前端学习
05-20 705
前端零基础快速入门html
cmake快速入门
热门推荐
不忘初心
09-12 22万+
简介 cmake是kitware公司以及一些开源开发者在开发几个工具套件(VTK)的过程中所产生的衍生品。后来经过发展，最终形成体系，在2001年成为一个独立的开放源代码项目。其官方网站是www.cmake.org，可以通过访问官方网站来获得更多关于cmake的信息，而且目前官方的英文文档比以前有了很大的改进，可以作为实践中的参考手册。 下载和安装以及使用：https://fukun.org/archives/0421949.html 一、为何要使用项目构建工具？ ......
HTML快速入门
weixin_42140899的博客
02-16 403
一，HTML的初识 1，HTML是什么？ HTML（HyperText Markup Language） 是计算机语言中的其中一种，是一种标签语言。全称叫超文本标签语言。 超文本：文字，图片，音乐，视频，程序，链接… 一张网页上面放的放的就是超文本。 标签：叫标记 ，<abc> <name></name> ，html中定义好一些标签，如<h1>&lt...
快速入门HTML学会网页制作.docx
11-23
快速入门 HTML 学会网页制作 HTML（Hyper Text Markup Language）是一种标志语言（markup language），用于网页制作，是网页制作所必备的。它的结构包括头部分和主体部分，头部提供关于网页的信息，主体部分提供...
html基础文档快速入门
02-04
本快速入门教程将引导你了解HTML的基本结构、元素和属性，帮助你快速掌握创建静态网页的核心技能。 一、HTML文档结构 HTML文档通常由三部分组成：文档声明、头部和主体。文档声明位于文档顶部，如`<!DOCTYPE html>`...
template:快速入门 html 应用程序的基本模板
06-27
快速入门HTML应用程序通常涉及一系列步骤，包括设置基础模板、初始化项目、配置服务器以及构建和运行项目。在这个过程中，JavaScript是核心语言，用于实现动态功能。 标题"template:快速入门 html 应用程序的基本...
WebSphere快速入门.doc
11-30
"WebSphere 快速入门" 本书主要介绍 WebSphere 的快速入门知识，涵盖了电子商务的基础知识、WebSphere 应用服务器、Java Servlet 和 JSP 等技术基础。本书共分七章，分别介绍电子商务基础知识、IBM 电子商务应用...
使用ant+jmeter如何生成html报告
2301_78276982的博客
07-16 781
下载apache-ant，放到对应路径下，然后进行环境变量配置。系统变量的CLASSPATH添加E:\Installation Pack\eclipse\apache-ant-1.9.6\lib;用户变量的PATH添加：E:\Installation Pack\eclipse\apache-ant-1.9.6\bin。打开cmd，执行 ant，提示"Buildfile:build.xml does not exist!Build failed"则配置成功，ant命令可用。如下图所示。
Html_Css问答集(12)
白话魔法师
07-16 435
html与css学习中的一些疑问，问答中轻松获取知识。
Html_Css问答集(11)
白话魔法师
07-16 569
html与css学习中的一些疑问，问答中轻松获取知识。
PhantomJs将html生成img|pdf
u014614478的博客
07-16 522
PhantomJS 生成图片，pdf，爬虫等功能
CH15-DOM元素属性
IT技术类博客
07-13 1019
DOM 元素
「实战应用」如何用DHTMLX将上下文菜单集成到JavaScript甘特图中（三）
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
07-16 405
本文主要介绍如何用DHTMLX Gantt将上下文菜单集成到JavaScript Gantt图中，欢迎下载最新版组件体验！
前端开发体系+html文件详解
m0_63432840的博客
07-14 443
target：指定超文本资源路径打开方式 _self(本窗口内打开) _blank(新窗口内打开) _parent(跳出父级窗口) _top（跳出顶级窗口)controls="true"手动控制音频播放，也可换为autoplay（进入网页自动播放）或loop（循环播放）width="500px" height="300px"可改变视频窗口大小但不会改变原视频外框的形状。此时的a标签为为锚点，如果要跳到另一个同目录页面的一个指定位置，在href后加其他页面路径。优先级：行内样式>内部样式=外部样式。
【Godot4.2】MLTag类：HTML、XML通用标签类
最新发布
巽的博客
07-16 667
HTML和XML采用类似的标签形式。之前在Godot中以函数库形式实现了网页标签和内容生成。能用，但是缺点也很明显。函数之间没有从属关系，但是多有依赖，而且没有划分出各种对象和类型。如果以完全的面向对象形式来设计标签类或者元素类，将可以更贴近HTML或XML的本来面目。也更容易生成。整体思路是设计如下的类继承结构：实现之后，将可以充分的定义和生成HTML、XML和SVG标签，并用于内容生成或文档解析。纯面向对象的设计，尤其是基于继承的多个类组成的体系在某些方面还是很有用的。
html（抽奖设计）
2301_81704123的博客
07-13 358
可以根据自己的喜好设计抽奖内容，或者修改颜色。
html两小时快速入门
09-09
对于HTML的快速入门，我可以为您提供一些基本的指导和资料。首先，HTML是用于创建网页的标记语言。下面是一个简单的HTML代码示例，它创建了一个最基本的网页： ```html <!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head> <body> <h1>欢迎来到我的网页！</h1> <p>这是一个段落。</p> </body> </html> ``` 在这个示例中，`<html>`标签包含了整个HTML文档。`<head>`标签用于定义文档的标题和其他元数据。`<body>`标签包含了实际显示在网页上的内容。 `<h1>`标签用于定义一个标题，而`<p>`标签用于定义一个段落。 您可以使用任何文本编辑器创建一个`.html`文件，并将上述代码复制到文件中保存。然后，您可以使用浏览器打开该文件，以查看结果。 这只是HTML的入门知识，如果您想深入学习HTML，可以参考一些在线教程和资源，例如： - [MDN＊＊＊/Introduction_to_HTML) - [W3Schools HTML 教程](https://www.w3schools.com/html/) - [菜鸟教程 HTML 教程](https://www.runoob.com/html/html-tutorial.html) 这些资源提供了更详细和全面的HTML学习内容，希望对您有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值