HTML简介

汪汪miao~

已于 2024-04-01 08:27:37 修改

阅读量720

点赞数 29

分类专栏：前端文章标签： html 前端

于 2024-03-31 21:19:26 首次发布

本文链接：https://blog.csdn.net/qq_45559559/article/details/137207117

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. HTML基本骨架

HTML5是用来描述网页的一种语言，被称为超文本标记语言。HTML是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字，标签有两种表现形式:

HTML5 的DOCTYPE声明：
DOCTYPE是document type(文档类型)的缩写。是网页必备的组成部分，避免浏览器的怪异模式。

HTML5 的基本骨架

html标签：
定义HTML文档，限定了文档的开始点和结束点。
head标签：
定义文档的头部，描述了文档的各种属和性信息，包括文档的标题、在Web中的位置以及和其他文档的关系，绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
body标签：
定义文档的主体，body元素包含文档的所有内容，会直接在页面中显示出来，也就是用户可以直接看到的内容。
title标签：
定义文档的标题，显示在浏览器窗口的标题或状态栏上，title标签是head标签唯一必须要求包含的东西

meta标签：
用来描述一个html网页文档的属性、关键词等。

2. 标签详解

2.1 标题

标题(Heading)是通过 h1 - h6标签进行定义的,
h1定义最大的标题 h6>定义最小的标题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>1</h1>
    <h2>2</h2>
    <h3>3</h3>
</body>
</html>

在这里插入图片描述

2.2 段落

段落通过p标签定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <p>当我走在这条人行道上，我感受到微风轻拂着我的脸颊，带来一丝清凉。
    街道两旁高楼林立，阳光透过缝隙洒在地面上，形成斑驳的光影。
    人群来来往往，各自匆匆忙忙，仿佛都有着各自的目的地和使命。
    我闭上眼睛，倾听着街头的喧嚣声，感受着这座城市的脉搏，它似乎有着自己独特的节奏和生命力。
    在这个瞬间，我感觉自己融入了这座城市的喧嚣中，成为了这个城市不可或缺的一部分。</p>
</body>
</html>

在这里插入图片描述

2.3 换行

换行通过br标签实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <p>当我走在这条人行道上，我感受到微风轻拂着我的脸颊，带来一丝清凉。<br>
    街道两旁高楼林立，阳光透过缝隙洒在地面上，形成斑驳的光影。<br>
    人群来来往往，各自匆匆忙忙，仿佛都有着各自的目的地和使命。<br>
    我闭上眼睛，倾听着街头的喧嚣声，感受着这座城市的脉搏，它似乎有着自己独特的节奏和生命力。<br>
    在这个瞬间，我感觉自己融入了这座城市的喧嚣中，成为了这个城市不可或缺的一部分。</p>
</body>
</html>

在这里插入图片描述

2.4 水平线

水平线通过hr标签实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <p>当我走在这条人行道上，我感受到微风轻拂着我的脸颊，带来一丝清凉。<br>
    街道两旁高楼林立，阳光透过缝隙洒在地面上，形成斑驳的光影。<br>
    人群来来往往，各自匆匆忙忙，仿佛都有着各自的目的地和使命。<br>
    我闭上眼睛，倾听着街头的喧嚣声，感受着这座城市的脉搏，它似乎有着自己独特的节奏和生命力。<br>
    在这个瞬间，我感觉自己融入了这座城市的喧嚣中，成为了这个城市不可或缺的一部分。</p>
    <hr>
</body>
</html>

在这里插入图片描述

2.5 图片

通过img标签定义图片。

2.6 超文本链接

通过a标签设置超文本链接

a标签中可以是任意内容，设置链接之后点击都可以跳转。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <a href="https://image.baidu.com/search/detail?ct=
   503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&hs=0&pn=2&spn
   =0&di=7308398814245683201&pi=0&rn=1&tn=baiduimagedetail&is=0%
   2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=3309036479%2C1418171806&os=
   3307548634%2C3547055573&simid=4162450612%2C523269078&adpicid=0&l
   pn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E5%9B%BE%E7%89%
   87&objurl=https%3A%2F%2Finews.gtimg.com%2Fom_bt%2FOjPq2cnMN_-ivD
   KjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA%2F1000&fromurl=ippr_z2C%24qAzdH
   3FAzdH3Fgjo_z%26e3Bqq_z%26e3Bv54AzdH3F6wtgAzdH3FwAzdH3Fdadn88a0A
   adcQMaa&gsm=&islist=&querylist=&dyTabStr=MCwzLDIsMSw0LDYsNSw4LDcs
   OQ%3D%3D">图片</a>
</body>

</html>

在这里插入图片描述
点击后跳转：

2.7 常用文本标签

定义着重文字：em
定义粗体文本：b
定义斜体字：i
定义加重语气：strong
定义删除字：del
无效果：span

2.8 有序列表

有序列表是一列项目，列表项目使用数字进行标记。
有序列表始于ol标签。每个列表项始于 li 标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <ol>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
  </ol>
</body>

</html>

在这里插入图片描述

2.9 无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点(典型的小黑圆圈)进行标记无序列表始于 ul 标签。每个列表项始于 li 标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
  </ul>
</body>

</html>

在这里插入图片描述

2.10 表格

表格：table
行：tr
列：td

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <table>
    <tr>
        <td>苹果</td>
        <td>香蕉</td>
        <td>橘子</td>
    </tr>
    <tr>
        <td>黄瓜</td>
        <td>萝卜</td>
        <td>白菜</td>
    </tr>
    <tr>
        <td>可乐</td>
        <td>雪碧</td>
        <td>芬达</td>
    </tr>
  </table>
</body>

</html>

在这里插入图片描述

2.11 Form表单

表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,按钮等，这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件。
<form action = "url" method = "get/post" name = "myform"></ form>
action：服务器地址
name：表单名称

表单元素：

表单标签
表单域
表单按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <input>
        <input type="submit">
    </form>
</body>

</html>

在这里插入图片描述

2.12 文本框

文本域通过input type = “text” 标签来设定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        First name <input type="text" name="firstname">
        <br>
        Last name <input type="text" name="lastname">
    </form>
</body>

</html>

在这里插入图片描述

2.13 密码框

通过input type = “password” 定义密码字段。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
      Password <input type="password" name="pwd">
    </form>
</body>

</html>

在这里插入图片描述

2.14 提交按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
      Password <input type="password" name="pwd">
      <input type="submit" value="submit">
    </form>
</body>

</html>

在这里插入图片描述

2.14 容器

容器标签通过div标签实现，使各个模块之间更易于区分。

3. 块元素与内联元素

内联元素与块级元素的区别：

块级元素：
在页面中独占一行自上向下垂直排列，可以设置width、height属性，一般块级元素可以包含行内元素和其他块级元素。
内联元素：
行内元素不会独占页面的一行，只会占自身的大小，从左到右从上到下依次排列，行内元素设置width、height属性无效，一般内联元素包含内联元素不包含块级元素。

常见块级元素(不换行，能够识别宽高)：
div、form、h1~h6、hr、p、table、ul等。
常见内联元素：
a、b、em、i、span、strong等。
行内块级元素：
button、img、input等。

4. HTML5新标签

在这里插入图片描述

汪汪miao~

关注

29
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
HTML简介

表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,按钮等，这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件。无序列表是一个项目的列表，此列项目使用粗体圆点(典型的小黑圆圈)进行标记无序列表始于 ul 标签。文本域通过input type = “text” 标签来设定。标题(Heading)是通过 h1 - h6标签进行定义的,容器标签通过div标签实现，使各个模块之间更易于区分。h1定义最大的标题 h6>定义最小的标题。通过img标签定义图片。换行通过br标签实现。
复制链接

扫一扫

专栏目录