HTML基础_01

HTML 基础_01

01.初识 HTML

  • 什么是 HTML！
    Hyper Text Markup Language(超文本标记语言)。超文本包括文字、图片、音频、视频、动画等。
  • HTML5,提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。
  • 优势：纯天然跨平台
  • 常见 IDE：VScode(目前再练习使用)，IDEA（开发 Java 的时候会经常用）, WebStorm

02.网页基本信息

<!--D0 CTYPE:告诉浏览器，我们要使用什么规范-->
<DOCTYPE html>
  <html lang="en">
    <!--head标签代表网页头部-->
    <head>
      <!--meta描述性标签，它用来描述我们网站的一些信息-->
      <!--meta一般用来做sE0-->

      <meta name="description" content="来这个地方可以学习Java" />
      <!--title网页标题-->
      <title>我的第个网页</title>
    </head>
    <!--body标签代表网页主体-->
    <body>
      Hello,World!
    </body>
  </html>
  >
</DOCTYPE>

03.基本标签

  • 标题标签 <h1>
  • 段落标签 <p> </p>
  • 字体样式标签：
  u下划线
  倾斜<em> </em>
  b加粗
  strong也是加粗
  • 换行标签 <br> 下一行
  • 特殊符号标签
  &ge是>
  &lt是<
  &nbsp是空格

04.图像标签

<img src="url" alt="some_text" title="悬停文字" width="300" height="300">
URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。

也可以是绝对地址或者相对地址（推荐使用）。

alt:图片名字，（必填）图片显示不出来就显示他
title:悬停文字

05.超链接标签及其应用

<a href="url/path">链接文本</a>

<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

href:必填，表示要跳转到那个页面
target:表示窗口在哪里打开
    _blank 在新标签中打开
    _self  在自己的网页中打开
  • 锚链接
  1. 需要一个锚标记
  2. 跳转到标记
  • 功能性链接
    娜件链接：mailto
    QQ 链接
posted @ 2023-08-12 06:48  彬彬zhidao  阅读(5)  评论(0)  编辑  收藏  举报