【Web前端入门学习】——HTML

news2024/12/23 8:53:43

目录

  • HTML简介
    • HTML文件结构
    • 常用文本标签
      • 标题标签
      • 段落标签
      • 有序列表和无序列表
      • 表格标签
    • HTML属性
      • a标签—超链接标签
      • 图片标签
    • HTML区块
      • 块元素与行内元素
    • HTML表单

HTML简介

HTML全称是Hypertext Markup Language超文本标记语言。
HTML的作用： 为网页提供结构，告诉浏览器哪部分是标题，哪些部分是段落，哪些部分是列表等。
HTML如何告诉浏览器哪些部分是标题、段落或列表呢？
HTML通过标签（或者叫元素）来定义文本、图像、链接等等。HTML标签是由尖括号包围的关键字。
HTML标签可以通过属性来提供更多信息，标签通常成对出现 ，包括开始标签和结束标签，拥有开始标签和结束标签的也成为双标签，内容处于这两个标签之间。

双标签：

<p>这是一个段落。</p>   <!--段落标签-->
<hl>这是一个标题。</hl>  <!--一级标题标签-->
<a href="#">这是一个超链接。</a> <!--超链接标签-->

单标签：（没有结束标签）

<input type="text">  <!--input标签-->
<br>  //换行标签
<hr>  //分割线标签

单标签与双标签的区别： 单标签用于没有内容的元素，双标签用于有内容的元素。

HTML文件结构

在这里插入图片描述

使用vscode生成完整的HTML文件结构：
在空白的HTML文档首行输入*!+Tab*，就会得到一个完整的HTML文档结构，名字叫做Document。
如下图所示：
在这里插入图片描述
鼠标右键点击Open with live Server
在这里插入图片描述
使用浏览器打开的界面如下：
在这里插入图片描述
将文档名字改为“HTML 练习”，再次用浏览器打开页面，结果如下：
在这里插入图片描述
此时文件目录的搭建已经基本完成了。

常用文本标签

标题标签

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

在这里插入图片描述

段落标签

    <p>这是一个段落标签。</p>
    <p>更改字体样式：<b>字体加粗</b></p>
    <p>更改字体样式：<strong>字体加粗</strong></p>
    <p>更改字体样式：<i>斜体</i></p>
    <p>更改字体样式：<u>下划线</u></p>
    <p>更改字体样式：<s>删除线</s></p>

在这里插入图片描述

有序列表和无序列表

无序列表：

<!--无序列表ul-->
    <ul>
        <li>无序列表元素1</li>
        <li>无序列表元素2</li>
        <li>无序列表元素3</li>
    </ul>

有序列表：

    <!--有序列表ol-->
    <ol>
        <li>有序列表元素1</li>
        <li>有序列表元素2</li>
        <li>有序列表元素3</li>
    </ol>

在这里插入图片描述

表格标签

    <!--表格标签-->
    <h1>th--table header</h1>
    <h1>tr--table row</h1>
    <h1>td--table data</h1>
    <table>
        <tr>
            <th>tile 1</th>
            <th>tile 2</th>
            <th>tile 3</th>
        </tr>
        <tr>
            <td>元素1</td>
            <td>元素2</td>
            <td>元素3</td>
        </tr>
        <tr>
            <td>元素11</td>
            <td>元素22</td>
            <td>元素33</td>
        </tr>
        <tr>
            <td>元素12</td>
            <td>元素21</td>
            <td>元素31</td>
        </tr>
    </table>


同时也可以为我们的表格添加边框

<!--表格标签-->
    <h1>th--table header</h1>
    <h1>tr--table row</h1>
    <h1>td--table data</h1>
    <table border="1"> <!--1代表表格宽度,border是table标签的一个属性-->
        <tr>
            <th>tile 1</th>
            <th>tile 2</th>
            <th>tile 3</th>
        </tr>
        <tr>
            <td>元素1</td>
            <td>元素2</td>
            <td>元素3</td>
        </tr>
        <tr>
            <td>元素11</td>
            <td>元素22</td>
            <td>元素33</td>
        </tr>
        <tr>
            <td>元素12</td>
            <td>元素21</td>
            <td>元素31</td>
        </tr>
    </table>

在这里插入图片描述

HTML属性

HTML属性用于定义元素的行为和外观，以及与其他元素的关系。
基本语法：

<开始标签 属性名=“属性值”>

每个HTML元素可以具体不同的属性。

    <p id="describe" class="section">这是一个段落标签。</p>
    <a href="https://www.baidu.com">这是一个超链接标签。</a>

属性名称不区分大小写，属性值对大小写敏感。

    <img src="example.jpg" alt="">
    <img SRC="example.jpg" alt="">
    <img src="EXAMPLE.JPG" alt="">
    <!--前两者相同，后两者完全不一样-->

a标签—超链接标签

    <a href="https://www.baidu.com">这是第一个段落标签。</a>
    <br><!--换行标签-->
    <a href="https://www.baidu.com" target="_blank">这是第二个段落标签。</a>
    <hr><!--水平分割线-->

target属性——决定链接的打开方式。
target属性有四个属性值：
_blank:表示链接在新的窗口或者标签页中打开。
_self:是一个默认值，表示链接在当前窗口或者标签页中打开。
_parent:表示链接会在父窗口和父框架中打开。
_top:表示链接会在顶层窗口或顶层框架中打开。

图片标签

    <img src="logo.png.jpeg" alt="">

也可以直接粘贴图片的链接。
alt后面的值可以不留白，如果图片无法显示，那么在alt的值输入该图片无法显示，结果如下：
在这里插入图片描述
img内还可以设置图片的高度和宽度

    <img src="logo.png.jpeg" alt="" width="100" height="100">

在这里插入图片描述

HTML区块

有些元素在浏览器中是独占一行的，而其他元素不能和这个元素位于同一行。
独占一行是指在浏览器中独占一行而不是在vscode代码文件中独占一行。根据元素的表现形式分为行内元素和块元素。

块元素与行内元素

块级元素：通常用于组织和布局页面的主要结构和内容，例如段落、标题、列表、表格。他们用于创建页面的主要部分。将内容分隔成逻辑块。

1、块级元素通常会从新行开始，并占据整行的宽度。因此他们会在页面上呈现为一块独立的内容块。
2、块元素可以包含其他块级元素和行内元素。
3、常见的块级元素：
<div> <p> <h1>到<h6> <ul> <ol> <li> <table> <form>等

行内元素： 通常用于添加文本样式或为文本中的一部分应用样式。他们可以在文本中插入小的元素，例如超链接、强调文本等。

1、行内元素通常在同一行内呈现，不会独占一行。
2、他们只占据其内容所需的宽度，而不是整行的宽度。
3、 行内元素不能包含块级元素，但可以包含其他行内元素。
4、常见的行内元素包括：
<span> <a> <strong> <em> <img> <br> <input>等

div标签： div标签是一个块级标签，通常用于创建一个可以包含其他元素的容器块，也可以说是创建一个页面的布局结构。
span标签： 用于内联样式化文本，给文本的一部分应用样式或者标记。

在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML区块</title>
</head>
<body>
    <div class="nav">
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
        <a href="#">链接4</a>
        <a href="#">链接5</a>
    </div>
    <div class="content"></div>
    <h1>文章标题</h1>
    <p>文章内容</p>
    <p>文章内容</p>
    <p>文章内容</p>
    <p>文章内容</p>
    <span>这是一个span标签。</span>
    <span>这是一个span标签。</span>
    <span>这是一个span标签。</span>
    <span>这是一个span标签。</span>
</body>
</html>

在这里插入图片描述

HTML表单

form标签： form标签是表单中的容器。如果要创建一个表单，那么只需要将表单中的所有元素必须包含在form标签内部。
input标签： type属性
type属性默认值text，会默认出现文本框

    <form>
        <input type="text">
    </form>

在这里插入图片描述
type属性placeholder，作用是可以在文本框中填写一些你想要让他显示的字。

    <form>
        <input type="text" placeholder="请输入内容">
    </form>

在这里插入图片描述
在这里插入图片描述
type属性value，规定了填写的值，而placeholder只是在文本框中给一个提示。

    <form>
        <input type="text" placeholder="请输入内容"><br><br>
        <input type="text" value="请输入内容">
    </form>

在这里插入图片描述
在form表单中，有专门为input做标记的标签label，仅限于与input对应使用。
单选框：

    <form>
        <label>用户名</label>
        <input type="text" placeholder="请输入内容"><br><br>
        <label>密码</label>
        <input type="text" value="请输入内容"><br><br>
        <label for="">性别</label>
        <input type="radio">男
        <input type="radio">女
        <input type="radio">其他
    </form>

在这里插入图片描述
实现单选只需要在input内部加name属性。

    <form>
        <label>用户名</label>
        <input type="text" placeholder="请输入内容"><br><br>
        <label>密码</label>
        <input type="text" value="请输入内容"><br><br>
        <label for="">性别</label>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <input

在这里插入图片描述

label标签在创建时会自动添加一个for属性，for属性可以把label标签绑定到input元素。

多选框：
多选对应的type属性值是checkbox。

    <form>
        <label>用户名</label>
        <input type="text" placeholder="请输入用户名"><br><br>
        <label for="pwd">密码</label>
        <input type="password" id="pwd" value="请输入密码"><br><br>
        <label>性别</label>
        <input type="radio" name="gender"> 男
        <input type="radio" name="gender"> 女
        <input type="radio" name="gemder"> 其他
        <label>爱好</label>
        <input type="checkbox" name="hobby">唱歌
        <input type="checkbox" name="hobby">跳舞
        <input type="checkbox" name="hobby">RAP
        <input type="checkbox" name="hobby">弹琴<br><br>

        
    </form>

在这里插入图片描述

    <form>
        <label>用户名</label>
        <input type="text" placeholder="请输入用户名"><br><br>
        <label for="pwd">密码</label>
        <input type="password" id="pwd" value="请输入密码"><br><br>
        <label>性别</label>
        <input type="radio" name="gender"> 男
        <input type="radio" name="gender"> 女
        <input type="radio" name="gemder"> 其他
        <label>爱好</label>
        <input type="checkbox" name="hobby">唱歌
        <input type="checkbox" name="hobby">跳舞
        <input type="checkbox" name="hobby">RAP
        <input type="checkbox" name="hobby">弹琴<br><br>
        <input type="submit">
        
    </form>
    <form action="#"></form>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1489564.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Stream流（Java）

Stream流（Java）

目录 一、介绍 二、Stream流的使用步骤 三、Stream流常见的中间方法 四、Stream流常见的终结方法 一、介绍 Stream也叫Stream流&#xff0c;是JDK8开始新增的一套API&#xff0c;可以用于操作集合或者数组的数据。 优势&#xff1a;Stream流大量的结合了Lambda的语法风格来…
阅读更多...
SpringCloud远程调用为啥要采用HTTP

SpringCloud远程调用为啥要采用HTTP

关于SpringCloud远程调用采用HTTP而非RPC。 首先SpringCloud开启Web服务依赖于内部封装的Tomcat容器&#xff0c;而今信息飞速发展&#xff0c;适应大流量的微服务&#xff0c;采用Tomcat处理HTTP请求&#xff0c;开发者编写Json作为资源传输&#xff0c;服务器做出相应的响应&…
阅读更多...
解决uni-app中使用webview键盘弹起遮挡input输入框问题

解决uni-app中使用webview键盘弹起遮挡input输入框问题

这个平平无奇的回答&#xff0c;可能是全网最靠谱的解决方案。 这里我用的是vue3 setup .vue文件的方式 <view> <web-view :fullscreen"false" :webview-styles"{top: statusBarHeight40,height:height,progress: {color: green,height:1px } }"…
阅读更多...
软考57-上午题-【数据库】-数据库的控制功能

软考57-上午题-【数据库】-数据库的控制功能

一、事务管理 1-1、事务的定义 事务是一个操作序列&#xff0c;这些操作&#xff0c;要么都做&#xff0c;要么都不做。 事务和程序是两个不同的概念&#xff0c;一般一个程序可以包含多个事务。 1-2、事务定义的语句 1、事务开始&#xff1a;BEGIN TRANSACTION 2、事务提…
阅读更多...
Vue.js 实用技巧：深入理解 Vue.set 方法

Vue.js 实用技巧：深入理解 Vue.set 方法

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
交友盲盒系统PHP开源的盲盒源码

交友盲盒系统PHP开源的盲盒源码

源码介绍&#xff1a; 交友盲盒系统是一款基于PHP开发的开源免费盲盒系统&#xff0c;旨在为用户提供一个充满乐趣和惊喜的社交体验。该系统具有丰富的功能和灵活的扩展性&#xff0c;可以轻松地满足各种线上交友、抽奖活动等场景的需求。 安装说明&#xff1a; PHP版本&…
阅读更多...
算法沉淀——动态规划之完全背包问题（leetcode真题剖析）

算法沉淀——动态规划之完全背包问题（leetcode真题剖析）

算法沉淀——动态规划之完全背包问题 01.【模板】完全背包02.零钱兑换03.零钱兑换 II04.完全平方数 完全背包问题是背包问题的一种变体&#xff0c;与01背包问题不同&#xff0c;它允许你对每种物品进行多次选择。具体来说&#xff0c;给定一个固定容量的背包&#xff0c;一组物…
阅读更多...
IDEA自带 .http 请求工具文档

IDEA自带 .http 请求工具文档

基础语法 请求格式 基础格式 Method Request-URI HTTP-Version Header-field: Header-valueRequest-Body其中&#xff0c;GET 请求可以省略 Method 不写&#xff1b;HTTP-Version 可以省略不写&#xff0c;默认使用 1.1 版本。 示例&#xff1a; GET https://www.baidu.co…
阅读更多...
Kubernetes基础(二十七)-nodePort/targetPort/port/containerPort/hostPort

Kubernetes基础(二十七)-nodePort/targetPort/port/containerPort/hostPort

1 nodePort/targetPort/port/containerPort 1.1 实现层级 1.2 配置方式 ########service########### apiVersion: v1 kind: Service metadata: labels: name: app1 name: app1 namespace: default spec: type: NodePort ports: - <strong>port: 8080 t…
阅读更多...
C语言文件操作，linux文件操作，文件描述符，linux下一切皆文件，缓冲区，重定向

C语言文件操作，linux文件操作，文件描述符，linux下一切皆文件，缓冲区，重定向

目录 C语言文件操作 如何打开文件以及打开文件方式 读写文件 关闭文件 Linux系统下的文件操作 open 宏标志位 write&#xff0c;read&#xff0c;close&#xff0c;lseek接口 什么是当前路径&#xff1f; linux下一切皆文件 文件描述符 文件描述符排序 C语言文件操…
阅读更多...
Linux 操作系统概述

Linux 操作系统概述

GNU计划 GNU --"GNUs Not UNIX" 建立一个自由、开放的UNIX操作系统&#xff08;Free UNIX&#xff09; GNU 通用公共许可证&#xff08;General Public License&#xff0c;GPL&#xff09; ”四项基本自由“ 按照自己的意愿自由地运行该软件自由地学习并根据…
阅读更多...
SD-WAN网络中，CPE设备的重要性与选择

SD-WAN网络中，CPE设备的重要性与选择

在SD-WAN企业组网的部署中&#xff0c;CPE&#xff08;Customer Premises Equipment&#xff09;扮演着至关重要的角色&#xff0c;被称为“企业边缘设备”或“客户端设备”。其作用不仅限于连接网络&#xff0c;更是SD-WAN网络的网关&#xff0c;负责管理多个WAN连接和VPN隧道…
阅读更多...
挑战杯 基于深度学习的人脸性别年龄识别 - 图像识别 opencv

挑战杯 基于深度学习的人脸性别年龄识别 - 图像识别 opencv

文章目录 0 前言1 课题描述2 实现效果3 算法实现原理3.1 数据集3.2 深度学习识别算法3.3 特征提取主干网络3.4 总体实现流程 4 具体实现4.1 预训练数据格式4.2 部分实现代码 5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 毕业设计…
阅读更多...
vue实现文字手工动态打出效果

vue实现文字手工动态打出效果

vue实现文字手工动态打出效果 问题背景 本文实现vue中&#xff0c;动态生成文字手动打出效果。 问题分析 话不多说&#xff0c;直接上代码&#xff1a; <template><main><button click"makeText"><p class"text">点击生成内容…
阅读更多...
Linux-信号2

Linux-信号2

文章目录 前言一、信号是如何保存的&#xff1f;int sigemptyset(sigset_t *set);int sigfillset(sigset_t *set);int sigaddset (sigset_t *set, int signo);int sigdelset(sigset_t *set, int signo);int sigismember&#xff08;const sigset_t *set, int signo);int sigpen…
阅读更多...
记录些大语言模型（LLM）相关的知识点

记录些大语言模型（LLM）相关的知识点

槽位对齐&#xff08;slot alignment&#xff09; 在text2sql任务中&#xff0c;槽位对齐&#xff08;slot alignment&#xff09;通常指的是将自然语言问题中的关键信息&#xff08;槽位&#xff09;与数据库中的列名或API调用中的参数进行匹配的过程。这个过程中&#xff0c…
阅读更多...
C++--机器人的运动范围

C++--机器人的运动范围

目录 1. 题目 2. 思路 3. C代码测试 4. 测试结果 1. 题目 地上有一个m行和n列的方格。一个机器人从坐标0,0的格子开始移动&#xff0c;每一次只能向左&#xff0c;右&#xff0c;上&#xff0c;下四个方向移动一格&#xff0c;但是不能进入行坐标和列坐标的数位之和大于k的格…
阅读更多...
xss.haozi.me：0x09

xss.haozi.me：0x09

https://www.segmentfault.com.haozi.me/j.js
阅读更多...
MySQL 多表查询 连接查询 自连接

MySQL 多表查询 连接查询 自连接

介绍 自连接查询&#xff0c;可以是内连接查询&#xff0c;也可以是外连接查询&#xff0c;一句话自己连接自己&#xff0c;一个表当作两个表进行连接。 语法 SELECT 字段列表 FROM 表A 别名A JOIN 表A 别名B ON 条件两个表A说明是同一张表&#xff0c;但是别名不同 案例…
阅读更多...
Ubuntu环境使用docker构建并运行SpringBoot镜像

Ubuntu环境使用docker构建并运行SpringBoot镜像

今天Ubuntu环境使用docker构建并运行SpringBoot镜像&#xff0c;看文章之前建议先查看安装流程: Linux环境之Ubuntu安装Docker流程 一、镜像打包过程及执行 1、创建一个测试目录 mkdir javaDemo 2、springBoot的包复制到此目录下 cp demo1-0.0.1-SNAPSHOT.jar /data/app/…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023