HTML入门

最新推荐文章于 2023-06-08 22:12:06 发布
最新推荐文章于 2023-06-08 22:12:06 发布
阅读量254 收藏
点赞数
分类专栏： JavaSE 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38862073/article/details/118640827
版权

简单入门学习

目录

1、第一个网页

<!-- html注释 -->
<!-- DOCTYPE：告诉浏览器，需要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">

<!-- head标签代表网页头部 -->
<head>
    <!--  meta描述性标签，用来描述网站的一些信息  -->
    <!--  一般用来做SEO  -->
    <meta charset="UTF-8">
    <meta name="keywords" content="this is a first html">
    <meta name="description" content="加速学习">
    <title>第一个网页</title>
</head>

<!-- body标签代表网页主体 -->
<body>
Hello HTML!
</body>
</html>

2、基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>

<!-- 标题标签 -->
<h1>新中国史</h1>
<p>新中国史，“四史”之一。
    70多年的新中国史，是一部党领导人民为国家富强、民族复兴、人民幸福不懈奋斗的历史，
    也是不断探索和深化社会主义建设规律的历史。</p>
<h2>新中国发展历史</h2>
<p>新中国成立后，党团结带领人民建立起社会主义基本制度，开展了大规模的社会主义建设，
    初步形成了完整的国家工业体系和国民经济体系，
    科学文化等各项事业也取得了显著进展。但在这个过程中，
    我们也曾在探索中走过弯路，遭受过巨大挫折，痛定思痛，深刻总结历史经验，
    我们在改革开放进程中最终走出了一条中国特色社会主义的成功之路。这条道路不是上天的馈赠，
    而是党带领中国人民在艰辛探索中开辟出的适合中国国情和长远发展的特色道路。</p>
<h2>社会影响</h2>
<p>学习新中国史，才能了解社会主义建设事业的不易，才能深刻认识中国特色社会主义道路的来之不易，
    提升爱国、爱党和爱中国特色社会主义的自觉与自信。学习新中国史，牢记中国特色社会主义从何而来，
    深刻认识中国特色社会主义显著优势，有助于在新时代进一步增强中国特色社会主义的道路自信、理论自信、制度自信和文化自信；
    有助于激发中国人民为实现中华民族伟大复兴而矢志奋斗的信念。
    总之，知史爱党、知史爱国，学习新中国史，是我们在新长征路上的又一次心灵洗礼。</p>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h3>三级标签</h3>

<!-- 段落标签 -->
<p>学习新中国史，才能了解社会主义建设事业的不易，才能深刻认识中国特色社会主义道路的来之不易，</p>
<p>提升爱国、爱党和爱中国特色社会主义的自觉与自信。学习新中国史，牢记中国特色社会主义从何而来，</p>
<p>深刻认识中国特色社会主义显著优势，有助于在新时代进一步增强中国特色社会主义的道路自信、理论自信、制度自信和文化自信；</p>
<p>有助于激发中国人民为实现中华民族伟大复兴而矢志奋斗的信念。</p>
<p>总之，知史爱党、知史爱国，学习新中国史，是我们在新长征路上的又一次心灵洗礼。</p>

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

<!-- 换行标签 -->
学习新中国史，才能了解社会主义建设事业的不易，才能深刻认识中国特色社会主义道路的来之不易，<br/>
提升爱国、爱党和爱中国特色社会主义的自觉与自信。学习新中国史，牢记中国特色社会主义从何而来，<br/>
深刻认识中国特色社会主义显著优势，有助于在新时代进一步增强中国特色社会主义的道路自信、理论自信、制度自信和文化自信；<br/>
有助于激发中国人民为实现中华民族伟大复兴而矢志奋斗的信念。<br/>
总之，知史爱党、知史爱国，学习新中国史，是我们在新长征路上的又一次心灵洗礼。<br/>

<!-- 粗体，斜体 -->
<h2>字体样式标签</h2>
粗体：<strong>新中国史</strong>
斜体：<em>新中国史</em>

<br/>
<!-- 特殊符号 -->
空       格
<br/>
空 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 格
<br/>
&gt;
<br/>
&lt;
<br/>
&copy;版权所有zpr
<!-- 特殊符号 &  ; （百度，太多记不过来）-->

<h3>三级标签</h3>

</body>
</html>

3、图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img标签
src: 图片地址（必要）
    相对地址（推荐），绝对地址
    ../ 当前目录的上一级目录
alt: 图片名字（必要）
-->
<img src="../resources/image/开国大典.jpg" alt="开国大典" title="此处title表示悬停文字" width="700" height="500">
<br/>
<!--连接标签中链接后可跟属性来指定跳转（#down：跳转到连接中down标记处）-->
<a href="4_链接标签.html#down">跳转</a>
</body>
</html>

4、链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>

<a name="top">top</a><br/>

<!--a标签
    href: 表示要跳转到按个页面（必要）
    target: 表示窗口在哪打开（默认在当前页面打开）
        _blank 在新页面打来
        _self 在当前页面打开
-->
<a href="1_第一个网页.html" target="_blank">点击跳转到页面1</a><br/>
<a href="https://www.baidu.com" target="_self">点击跳转到百度</a><br/>
<a href="1_第一个网页.html">
    <img src="../resources/image/开国大典.jpg" alt="开国大典" title="此处title表示悬停文字" width="175" height="100">
</a><br/>

<p><img src="../resources/image/开国大典.jpg" alt="开国大典" title="此处title表示悬停文字" width="175" height="100"></p>
<p><img src="../resources/image/开国大典.jpg" alt="开国大典" title="此处title表示悬停文字" width="175" height="100"></p>
<p><img src="../resources/image/开国大典.jpg" alt="开国大典" title="此处title表示悬停文字" width="175" height="100"></p>

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

<!--功能性链接
    邮件链接：mailto
    QQ链接
-->
<a href="mailto:1808002885@qq.com">点击联系我</a><br/>
<!--百度QQ推广-->
<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:24736743:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>
</body>
</html>

5、列表

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

<!--有序列表
应用：试题、问答...
-->
<ol>
  <li>Java</li>
  <li>Python</li>
  <li>C/C++</li>
  <li>PHP</li>
  <li>HTML</li>
</ol>
<hr/>

<!--无序列表
应用：导航、侧边栏...
-->
<ul>
  <li>Java</li>
  <li>Python</li>
  <li>C/C++</li>
  <li>PHP</li>
  <li>HTML</li>
</ul>
<hr/>

<!--自定义列表
  dl: 标签
  dt: 列表名称
  dd: 列表内容
-->
<dl>
  <dt>高级语言</dt>

  <dd>Java</dd>
  <dd>Python</dd>
  <dd>C/C++</dd>
  <dd>PHP</dd>

  <dt>公司</dt>

  <dd>字节跳动</dd>
  <dd>百度</dd>
  <dd>腾讯</dd>
  <dd>阿里</dd>
</dl>

</body>
</html>

6、表格

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

<!--表格table
  行 tr
  列 td
-->
<table border=" ">
  <tr>
    <!-- colspan跨列 -->
    <!-- <td align="value">
      left 左对齐内容（默认值）
      right	右对齐内容
      center 居中对齐内容
      justify 对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）
      char 将内容对准指定字符
    -->
    <td colspan="4" align="center">学生成绩</td>
  </tr>

  <tr>
    <!-- rowspan跨列 -->
    <td rowspan="2">小明</td>
    <td>语文</td>
    <td>100</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>100</td>
  </tr>

  <tr>
    <!-- rowspan跨列 -->
    <td rowspan="2">小红</td>
    <td>语文</td>
    <td>100</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>100</td>
  </tr>
</table>

</body>
</html>

7、媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
  src 资源路径
  controls 控制播放条
  autoplay 自动播放
-->
<!--<video src="../resources/video/" controls autoplay></video>-->
<audio src="../resources/audio/回音哥%20-%20陪我看日出.mp3" controls autoplay></audio>

</body>
</html>

8、界面结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>界面结构</title>
</head>
<body>

<header>
  <h3>网页头部</h3>
</header>

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

<footer>
  <h3>网页脚部</h3>
</footer>

</body>
</html>

9、内联框架

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

<!--iframe
    在网页里面套用一个网页
    src: 地址
    w-h: 宽和高
-->
<!--<iframe src="//player.bilibili.com/player.html?aid=803079014&bvid=BV17y4y1W7Tt&cid=337503574&page=1"-->
<!--        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>-->

<iframe src="" name="hello" frameborder="0" width="1000" height="800"></iframe>
<a href="https://www.baidu.com" target="hello">点击跳转</a>

</body>
</html>

10、表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册登录</title>
</head>
<body>

<!--表单form
  action: 表单提交的位置，可以是网站，也可以是一个请求处理的地址。相当于提交登录后跳转的地址
  method: post/get 提交方式
    get：可以在url中看到提交的信息（账号密码），不安全，高效
    post：较安全，传输大文件
-->
<form action="1_第一个网页.html" method="get">

    <!--文本输入框：input type="text"
        value: 默认初始值
        maxlength: 最长输入字符
        size: 文本框长度
        readonly: 只读，不可修改
        placeholder：提示信息
        required: 非空判断
    -->
    <p>账号：<input type="text" name="username" placeholder="请输入用户名" required></p>
    <!--密码输入框：input type="password"
        hidden: 隐藏域
    -->
    <p>密码：<input type="password" name="password" required></p>

    <!--单选框：input type="radio"
        value: 单选框的值(必须，不然提交失败)
        name: 表示组
        checked：默认选中
        disabled: 不可选
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked >男
        <input type="radio" value="girl" name="sex">女
    </p>

    <!--多选框：input type="checkbox"
    value: 单选框的值(必须，不然提交失败)
    name: 表示组
    -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <!--checked：默认选中-->
        <input type="checkbox" value="code" name="hobby" checked>编程
        <input type="checkbox" value="beer" name="hobby">啤酒
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

    <!--按钮-->
    <p>按钮：
        <!--普通按钮-->
        <input type="button" name="bt1" value="点击变长"><br/>
        <!--图片按钮-->
<!--        <input type="image" src="../resources/image/开国大典.jpg">-->
    </p>

    <!--下拉框，列表框-->
    <p>国家：
        <select name="nation" id="spacer1">
            <option value="China" selected>中国</option>
            <option value="U.S.">美国</option>
            <option value="Japan">日本</option>
            <option value="India">印度</option>
        </select>
    </p>

    <!--文本域
        cols="30" rows="10" 行列
    -->
    <p>反馈：
        <textarea name="textarea" id="masthead-label-1" cols="30" rows="10" placeholder="请输入文本内容"></textarea>
    </p>

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

    <!--邮件验证-->
    <p>邮箱：
        <input type="email" name="email" required>
    </p>
    <!--url验证-->
    <p>URL：
        <input type="url" name="url" required>
    </p>
    <!--数字-->
    <p>商品数量：
        <input type="number" name="num" max="100" min="0" step="10" required>
    </p>

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

    <p>
        <!--增强鼠标可用性
            通过id="mark"绑定输入框
        -->
        <label for="mark">点一下试试：</label>
        <input type="text" id="mark">
    </p>
    <!--自定义邮箱
    pattern: 正则表达式
    /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
    -->
    <p>自定义邮箱
<!--        <input type="text" name="custom_mail" pattern=""></p>-->
    <p>
        <!--提交表单(默认按钮)-->
        <input type="submit">
        <!--重置表单(默认按钮)-->
        <input type="reset" value="清空表单">
    </p>
</form>

</body>
</html>
心，始终在路上
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML从入门到精通
cgblpx的博客
06-01 4万+
目录 1 前端技术： 1 1.1 学习方法 1 1.1.1 前端要怎么学？ 1 1.1.2 前端技术栈 5 1.2 HBuilderX 7 1.2.1 介绍 7 1.2.2 安装 7 1.2.3 主题 9 1.2.4 字体 9 1.2.5 去掉px转rem提示 9 1.2.6 备注字体颜色 10 1.2.7 项目结构 11 1.2.8 jQuery语法支持 11 1.3 Web概述 12 1.4 静态页面HTML 13 1.4.1 概念 13 1.4.2 结构 13 1.4.3 入门案例 14 1.4.4
HTML入门（详细）
qq_63525426的博客
05-03 2万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 22万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
Html入门练习
道亦无名
06-28 2万+
开始学些Html的时候主要进行一些简单的静态网页的处理： 1、HTML 标题 HTML 标题（Heading）是通过 - 等标签进行定义的。 2、HTML 段落 HTML 段落是通过 标签进行定义的。 3、HTML 链接 HTML 链接是通过 标签进行定义的。 4、HTML 图像 HTML 图像是通过 标签进行定义的。 5、HTML 元素 HTML 元素指的是从开始标签
菜鸟教程：零基础HTML入门
weixin_52163352的博客
11-08 2万+
HTML入门 文章目录一、HTML是什么？二、入门实例1.新建html文档2.html常用标签三、属性总结 一、HTML是什么？ HTML全称：Hyper Text Markup Language 中文名：超文本标记语言 HTML是由W3C组织定义的语言标准，是用于描述页面机构的语言。 二、入门实例 1.新建html文档 如图： 每一个html文件开头必须是这个标签，作用是告诉浏览器此文档为html文档。 ：根元素在所有的html文件中这个元素级别最高 网页编码格式，一般为UTF-8 中间内容就是这个h
HTML入门学习笔记+详细案例
Biteht的博客
04-22 1万+
✨HTML入门学习笔记+详细案例 作者介绍: 🎓作者:偷偷敲代码的青花瓷🐱‍🚀 👀作者的Gitee:代码仓库 ✨✨我和大家一样都是热爱编程✨,很高兴能在此和大家分享知识,希望在分享知识的同时,能和大家一起共同进步,取得好成绩🤳,今天和大家分享的章节是HTML基础,如果有错误❌,欢迎指正哟😋,咋们废话不多说,跟紧步伐,开始学习吧~😊 文章目录1.什么是HTML2.入门实例3.HTML标签详解3.1 标题标签3.2 段落标签3.3 换行标签3.4 格式化标签3.5 链接标签外部链接内部
HTML零基础入门教程完整版
哈哈
09-11 2万+
HTML零基础入门教程完整版
HTML零基础入门详细教程
一步一个脚印，踏实努力，向着目标前进
06-08 2769
欢迎来到HTML的零基础入门教程。HTML是构建网页的基础，是Web开发的必备技能之一。在本教程中，我们将介绍HTML的基础知识，包括HTML的基本结构、标签、属性等内容。让我们开始吧！
HTML基础入门（详细）
weixin_51143430的博客
08-28 3257
HTMLHTML结构2.HTML常见标签2.1注释标签2.2换行符2.3加粗标签2.4文字格式化2.4.1加粗2.4.2倾斜 2.4.3下划线 HTML结构 2.HTML常见标签 2.1注释标签 <!--注释> ctrl快捷键可快速进行注释或取消注释 2.2换行符 2.3加粗标签 2.4文字格式化 2.4.1加粗 2.4.2倾斜 2.4.3下划线 ......
HTML入门标签
10-11
比较详细的HTML标签，常用到的标签都包括在内了。新手可以看看
html入门学习.zip
01-01
html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习 html入门学习html...
HTML 入门资料Demo
最新发布
01-23
HTML 入门手册(一)：https://shuaici.blog.csdn.net/article/details/135680716 HTML 入门手册(二)：https://shuaici.blog.csdn.net/article/details/135698613 HTML 英文全称 " HyperText Mark-up Language " , ...
HTML入门学习及笔记.zip
01-01
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入门学习的源...
JDBC中使用的jar包
weixin_38862073的博客
05-27 1919
无需C币，直接下载 MySQL连接：mysql-connector-java-8.0.16.jar 链接：https://pan.baidu.com/s/139TmVwqftBZyrwgL9DXgWg 提取码：0w0q 复制这段内容后打开百度网盘手机App，操作更方便哦 DBCP连接池：commons-dbcp-1.4.jar和commons-pool-1.6.jar 链接：https://pan.baidu.com/s/1E83JtTSI6DsKEkWB64doXA 提取码：d468 复制这段内容后打开
Java中Data类的简单使用
weixin_38862073的博客
04-21 1118
import java.util.Calendar; /* * 日历类 * 获取年月日 时分秒 星期 * */ public class _01_Calendar { public static void main(String[] args) { // 创建日历对象 Calendar c = Calendar.getInstance(); // 获取本周第几天（周日是第一天）。星期表示为0~6 System.out.print
Java1.8新特性
weixin_38862073的博客
06-08 1011
新特性 目录一、Lambda表达式二、函数式接口 一、Lambda表达式 * * Lambda表达式 * 是一种没有名字的函数，也可称为闭包，是Java8的新特性 * 本质上是一段匿名内部类，也可以是一段可传递的代码。也称箭头函数 * 特点： * 允许把函数作为一个方法的参数（函数作为参数传递到方法中） * 使用Lambda表达式可以让代码变得更加简洁 * 应用场景： * 列表迭代、Map映射、Reduce聚合、想替代一个不想命名的函数或类，该函数或
Java中Object类的几个常用方法
weixin_38862073的博客
04-12 440
equals 方法 /* * Object：是Java中提供的一个根类 * 所有类都直接或间接的继承了 Object * 如果一个类没有显示继承父类，那么该类默认继承 Object * Object 中的方法是所有类都有的功能 * Object xxx = new xxx; 可以发生多态 * 如果一个方法需要传递数据，却不能确定数据的类型的时候，可以写 Object * * 学习方法 * 1 该方法属于哪个类 * 2 是什么方法（静态/成员） * 3 功能、入参、出参分别是？
HTML入门：构建Web页面的基础
作为Web程序开发的基础，它为网页提供了结构化信息的框架，使...这本HTML入门教材围绕HTML的基本结构、字符实体以及创建简单网页的过程展开，强调了理论与实践的结合，旨在帮助新手快速上手HTML，掌握网页开发的基石。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值