首页 > 其他分享 >HTML基础和常用标签

HTML基础和常用标签

时间:2024-09-19 21:53:04浏览次数:11  
标签:常用 网页 标签 标题 HTML 图片 页面

合抱之木,生于毫末;九层之台,起于累土;千里之行,始于足下。

文章目录


前言

写在开始:

HTML是用来搭建网页的基础语言,就像是你在盖房子时用的砖块,每个砖块(标签)都有特定的功能,负责不同的结构。接下来,我用更通俗的方式介绍HTML基础和常见标签。

正文部分有很多我手写的笔记,希望大家理解,不要嫌弃我的字丑奥.
在这里插入图片描述


文章有误敬请斧正 不胜感恩!

以下是本篇文章正文内容,


在这里插入图片描述

1. HTML的基本结构

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>网页标题</title>
  </head>
  <body>
    <h1>这是一个大标题</h1>
    <p>这是一个段落。</p>
  </body>
</html>
解释:
  • <!DOCTYPE html>:告诉浏览器,这是一个HTML5文件,不用管它的细节,就当成“说明书”。
  • <html>:整个网页的最外层,就像你家房子的外墙。
  • <head>:网页的“脑袋”,里面放一些网页的信息,比如标题、字符编码等。
  • <body>:网页的“身体”,所有显示在屏幕上的内容,比如文字、图片,都放在这里。

2. 常见标签的介绍

2.1 标题和文本
  • <h1> - <h6>:标题标签,<h1>是最大的标题,<h6>是最小的标题。

    <h1>这是最大标题</h1>
    <h2>这是次一级标题</h2>
    

    用法很简单,按你需要的大小选择标签,<h1>是主标题,<h2>-<h6>依次往下。

  • <p>:段落标签。所有文字内容都可以放在这个标签里。

    <p>这是一个段落。</p>
    
  • <b><strong>:加粗文字。虽然看上去效果一样,但<strong>更多强调的是“重要性”。

    <b>这是加粗的文字</b>
    <strong>这也是加粗的文字,但强调了它的重要性。</strong>
    
  • <i><em>:斜体文字。<em>也是强调的意思。

    <i>这是斜体文字</i>
    <em>这是强调的斜体文字</em>
    
2.2 链接和图片
  • <a>:超链接,用于添加链接。

    <a href="https://www.example.com">点击我去百度</a>
    
  • <img>:图片标签,用于展示图片。

    <img src="image.jpg" alt="图片描述" width="200" height="100">
    
    • src:图片的地址(相当于图片的“源”)。
    • alt:当图片加载不出来时显示的文字。
    • widthheight:图片的宽度和高度。
    • 图像路径的解析:
    • 在这里插入图片描述
2.3 列表
  • <ul>:无序列表,展示项目符号的列表。

    <ul>
      <li>苹果</li>
      <li>香蕉</li>
    </ul>
    
    • ul是外面的包裹,li是里面每一项。
  • <ol>:有序列表,按顺序编号。

    <ol>
      <li>第一项</li>
      <li>第二项</li>
    </ol>
    
    

    在这里插入图片描述

2.4 表格
  • <table>:用于创建表格。

    <table border="1">
      <tr>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
      <tr>
        <td>张三</td>
        <td>25</td>
      </tr>
    </table>
    
    • tr:表示表格的一行。

    • th:表头,表示标题单元格。

    • 在这里插入图片描述

    • td:数据单元格,放每个表格内容的地方。

    table效果:
    -在这里插入图片描述

2.5 表单
  • <form>:用户提交信息的表单,比如登录页面。

    <form action="/submit" method="POST">
      <label for="name">名字:</label>
      <input type="text" id="name" name="name">
      <input type="submit" value="提交">
    </form>
    
    • action:表单提交到的地址。
    • method:数据提交的方式,通常用POST
    • 在这里插入图片描述
2.6 其他常用标签
  • <div>:块级元素,用于包裹内容,可以用来布局页面。

    <div>
      <p>这是一个包含段落的div块。</p>
    </div>
    
  • <span>:内联元素,和div类似,但不换行,适合包裹少量内容。

    <span>这是内联元素。</span>
    
  • <br>:换行标签,强制换行。(break)

    这是第一行。<br>这是第二行。
    
  • <hr>:水平线,表示一个分割。

    <hr>
    

3. HTML5新标签(语义化标签)

HTML5新增了一些更容易理解的标签,让网页更“语义化”,便于搜索引擎和开发者阅读。

  • <header>:定义页面的头部,比如导航条、LOGO等。
  • <nav>:导航栏,放菜单或链接。
  • <section>:页面的独立部分,通常用于分块内容。
  • <article>:独立的文章或博客内容。
  • <footer>:页面的底部内容。

4. HTML注释

注释是用来给代码加说明的,不会在页面上显示出来。

<!-- 这是一段注释 -->
快捷键:Ctrl+/

5.查阅文档

只推荐这仨
标签是记不完的,只有多用多查才能理解记忆.

1.w3school 在线教程

2.菜鸟教程 - 学的不仅是技术,更是梦想! (runoob.com)

3.使用 canvas 来绘制图形 - Web API | MDN (mozilla.org)

总结

HTML是我们前端部分最基础也最为根本的部分,我们绝对不能轻视这一块的学习,

合抱之木,生于毫末;九层之台,起于累土;千里之行,始于足下。

正是这个道理.

HTML就是通过这些标签组合在一起,搭建出一个完整的网页。

学会这些基础标签后,我们基本就能用它们搭建出简单的网页。

后续再深入了解CSS(样式)和JavaScript(交互)

让我们的网页更加富有特色才能更加富有竞争力,更美观,更能吸引别人的眼球,更能得到青睐.


在这里插入图片描述

标签:常用,网页,标签,标题,HTML,图片,页面
From: https://blog.csdn.net/2301_79175212/article/details/142370602

相关文章

  • Git常用命令介绍
    Git,是一个开源的分布式版本控制系统,用以有效、高速的处理从很小到非常大的项目版本管理。支持克隆/下载。Git教程:https://git-scm.com/book/zh/v2TortoiseGit 客户端: https://tortoisegit.org/download/SmartGit客户端支持windows/macOS/Linux: https://www.syntevo.c......
  • 用来测试 autosize.js 的 HTML 代码,自动适应 textarea 高度
     1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<metaname="viewport"content="width=device-width,initial-scale=1.0">6<title>VueAutosiz......
  • 如何把PDF转换成HTML?
    这篇文章会教你4种把PDF转换为HTML的方法,并对比每种方法的优缺点。虽然PDF是一种可靠且高效的文档格式,但把PDF转换为HTML5(最新版本的HTML)可以让用户通过新方式的与文档进行交互,从而给文档增加商业价值。将PDF转换为HTML的方法方法1:把PDF页面作为图像展示把PDF页面在HTML5中......
  • HTML讲解(一)body部分
    目录1.什么是HTML 2.HTML基本框架3.标题声明4.修改标题位置5.段落声明6.修改段落位置7.超链接访问8.图像访问9.改变网页背景及文本颜色10.添加网页背景图11.超链接改变颜色12.设置网页边距小心!VS2022不可直接接触,否则!没这个必要,方源面色淡然一把抓住!顷刻炼化!......
  • HTML讲解(二)head部分
    目录1. 2.的使用2.1charset2.2name2.2.1describe关键字2.2.2keywords关键字2.2.3author关键字2.2.4http-equiv小心!VS2022不可直接接触,否则!没这个必要,方源面色淡然一把抓住!顷刻炼化!     讲解声明:在HTML中,<head>内容的部分可以包括以下部分我们......
  • 【软件测试】自动化测试常用函数 二
    目录......
  • tmux的简便常用项教程
    Tmux是会话(session)与终端窗口(terminalwindow)的解绑工具,可以同时运行多个命令,可以让新窗口"接入"已经存在的会话允许每个会话有多个连接窗口,因此可以多人实时共享会话,支持窗口任意的垂直和水平拆分。创建一个名字为ft的新窗口tmuxnew-sft重新进入名字为ft的窗口tmuxa-tf......
  • MySQL零基础入门教程-1 mysql安装卸载、启动关闭、常用命令、sql语句分类(非常详细),基础
    教程来源:B站视频BV1Vy4y1z7EX001-数据库概述_哔哩哔哩_bilibili我自己听讲收集整理的课程的完整笔记,供大家学习交流吧:夸克网盘分享本文内容为完整笔记的第一篇一、数据库概述1、什么是数据库?什么是数据库管理系统?什么是SQL?他们之间的关系是什么?P1、P2数据库英文单词DataBase,简称DB,......
  • 从零开始搭建自己的个人博客——前端篇之前端“三剑客”(html、css和js)的介绍
    第一章前言    我们总听大佬们常说编程有前端和后端之分,但是关于前端和后端我们总是一知半解,而我们想要搭建自己的个人博客,那么必然避免不了对前端网页的接触。本篇文章就是对前端进行介绍,你可以了解到什么是前端“三剑客”,它们都有什么作用。    不过,关于......
  • ArcGIS标注表达式用到的字段值有空值导致标签无法显示怎么办
    数据:几个楼,包含三个字段信息,其中有的楼没有地下楼层的话,地下楼层字段值为空目标:用标注“显示名称+地上楼层+地下楼层”等信息, 遇到的问题:如果只是简单的把字段相加,地下楼层为空的要素标签不显示 然后我尝试把地下层数换成string类型,试了试还是不行,没有变化 查了下VBScr......