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

目录

  • 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>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

自动驾驶感知面试-coding应用题

自动驾驶感知面试-coding应用题

感知面试手撕代码&#xff1a;这个博主总结的很好&#xff0c;尤其是关于叉积的计算 双线性插值 双线性插值公式记忆方法和Python实现 NMS算法 #include<iostream> #include<vector> #include<algorithm>using namespace std; struct Box {int x1,x2,y1,…
阅读更多...
【代码】Python3｜无GUI环境中使用Seaborn作图的学习路线及代码（阴影折线图）

【代码】Python3｜无GUI环境中使用Seaborn作图的学习路线及代码（阴影折线图）

我有个需求是需要画图&#xff0c;让GPT帮我生成了一下学习计划。 学习路线依照GPT的来的&#xff0c;使用的Prompt工具是https://github.com/JushBJJ/Mr.-Ranedeer-AI-Tutor。 文章目录 PrerequisiteMain Curriculum1.1 Seaborn介绍Seaborn基础保存图形为文件练习 1.2 单变量数…
阅读更多...
什么是Vue的服务端渲染（SSR）？它有什么作用？

什么是Vue的服务端渲染（SSR）？它有什么作用？

Vue的服务端渲染&#xff08;SSR&#xff09;是指将Vue组件在服务器端进行渲染&#xff0c;然后将已经渲染好的页面返回给浏览器&#xff0c;相比于传统的客户端渲染&#xff0c;SSR可以更好地优化SEO和加速首屏加载速度。在传统的客户端渲染中&#xff0c;浏览器需要加载所有的…
阅读更多...
【Spring云原生】Spring官宣，干掉原生JVM，推出 Spring Native！整体提升性能！Native镜像技术在Spring中的应用

【Spring云原生】Spring官宣，干掉原生JVM，推出 Spring Native！整体提升性能！Native镜像技术在Spring中的应用

&#x1f389;&#x1f389;欢迎光临&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;特别推荐给大家我的最新专栏《Spring 狂野之旅&#xff1a;从入门到入魔》 &#x1f680; 本…
阅读更多...
Linux——MySQL主从复制与读写分离

Linux——MySQL主从复制与读写分离

实验环境 虚拟机 3台 centos7.9 网卡NAT模式 数量 1 组件包mysql-5.6.36.tar.gz cmake-2.8.6.tar.gz 设备 IP 备注 Centos01 192.168.223.123 Amoeba Centos02 192.168.223.124 Master Centos03 192.168.223.125 Slave MySQL安装 主从同时操作 安装所需要的…
阅读更多...
【探索AI】二十二 深度学习之第5周：生成对抗网络（GAN）

【探索AI】二十二 深度学习之第5周：生成对抗网络（GAN）

生成对抗网络&#xff08;GAN&#xff09; GAN的基本原理与结构常见的GAN模型&#xff08;如DCGAN、StyleGAN等&#xff09;图像生成与风格迁移任务实践&#xff1a;使用GAN进行图像生成或风格迁移任务 GAN的基本原理与结构 生成对抗网络&#xff08;GAN&#xff09;的基本原理…
阅读更多...
【经验】f-string 的一些点

【经验】f-string 的一些点

【经验】f-string 的一些点 省几个字别数错了对齐它现在几点 省几个字 让 f-string 给你写表达式&#xff0c;在 f-string 中使用 来自动打印表达式 a 10 b 25 print(f"{a b }") >>> a b 35别数错了 对于过大的数字难以一眼看出来它的数量级&#xf…
阅读更多...
Android 中get请求网络数据 详细举例

Android 中get请求网络数据 详细举例

请求链接 https://api.bilibili.com/x/web-interface/ranking 1.添加网络权限 依赖等 implementation com.squareup.okhttp3:okhttp:4.9.3 implementation com.google.code.gson:gson:2.8.92.写请求类network package com.example.myapplication;import android.graphics.Bi…
阅读更多...
现代信号处理学习笔记（三）信号检测

现代信号处理学习笔记（三）信号检测

通过观测数据判断信号是否存在&#xff0c;这一问题称为信号检测。 目录 前言 一、统计假设检验 1、信号检测的基本概念 2、信号检测理论测度 比率测度 概率测度 3、决策理论空间 二、概率密度函数与误差函数 1、概率密度函数 2、误差函数与补余误差函数 三、检测概…
阅读更多...
TypeError: the JSON object must be str, bytes or bytearray, not dict

TypeError: the JSON object must be str, bytes or bytearray, not dict

参考文章&#xff1a;https://blog.csdn.net/yuan2019035055/article/details/124934362 Python基础系列&#xff08;一&#xff09;搞懂json数据解析与字典之间的关系 代码&#xff1a; 报错信息: TypeError: the JSON object must be str, bytes or bytearray, not dict …
阅读更多...
Python字符串中%d，%.f的用法

Python字符串中%d，%.f的用法

在字符串中&#xff0c;我们经常需要改变其中的一些几个字符&#xff0c;比如 第一个d%就是epoch1&#xff0c;会随着epoch的变化而变化。同理&#xff0c;后面的也是。打印出的结果就是 其中&#xff0c;epoch迭代了3次&#xff0c;从0开始。会发现 d%&#xff0c;是整数&…
阅读更多...
.NET高级面试指南专题十四【 观察者模式介绍，最常用的设计模式之一】

.NET高级面试指南专题十四【 观察者模式介绍，最常用的设计模式之一】

简介&#xff1a; 观察者模式&#xff08;Observer Pattern&#xff09;是一种行为型设计模式&#xff0c;其目的是定义了一种一对多的依赖关系&#xff0c;当一个对象的状态发生变化时&#xff0c;所有依赖于它的对象都会得到通知并自动更新。 原理&#xff1a; 在观察者模式中…
阅读更多...
002-CSS-三角形

002-CSS-三角形

三角形 普通三角形带阴影的三角形&#xff1a;box-shadow带阴影的三角形&#xff1a;filter 普通三角形 &#x1f4a1; Tips&#xff1a;设置 div 盒子宽高为零&#xff0c;使用单边框实现 .triangle {width: 0;height: 0;border: 20px solid transparent;border-top-color: …
阅读更多...
把python完全卸载干净

把python完全卸载干净

1.winR&#xff0c;输入control回车&#xff0c;点击程序和功能&#xff0c;在搜索框输入python&#xff0c;右键点击卸载 2、找到Python安装路径&#xff0c;把所有文件全部删除。 安装路径可以打开CMD输入&#xff1a;where python 3、强制删除Python.exe 打开cmd&#xff…
阅读更多...
使用Java生成JWT（JSON Web Token）的详细指南

使用Java生成JWT（JSON Web Token）的详细指南

介绍 在现代应用程序中&#xff0c;身份验证和授权是至关重要的。JSON Web Token&#xff08;JWT&#xff09;是一种开放标准&#xff08;RFC 7519&#xff09;&#xff0c;它定义了一种紧凑且自包含的方式用于在各方之间安全地传输信息。在本文中&#xff0c;我们将学习如何使…
阅读更多...
大厂报价查询系统性能优化之道！

大厂报价查询系统性能优化之道！

0 前言 机票查询系统&#xff0c;日均亿级流量&#xff0c;要求高吞吐&#xff0c;低延迟架构设计。提升缓存的效率以及实时计算模块长尾延迟&#xff0c;成为制约机票查询系统性能关键。本文介绍机票查询系统在缓存和实时计算两个领域的架构提升。 1 机票搜索服务概述 1.1 …
阅读更多...
在k8s上部署dolphinscheduler

在k8s上部署dolphinscheduler

&#xff08;作者&#xff1a;陈玓玏&#xff09; 一、 前提条件 已部署k8s&#xff0c;版本信息如下&#xff1a; k8s为单机部署&#xff1b;已部署nfs&#xff0c;版本如下&#xff1b; 二、 部署helm 以下步骤安装的是二进制版本&#xff0c;如果通过脚本安装&#…
阅读更多...
Bert Encoder和Transformer Encoder有什么不同

Bert Encoder和Transformer Encoder有什么不同

前言&#xff1a;本篇文章主要从代码实现角度研究 Bert Encoder和Transformer Encoder 有什么不同&#xff1f;应该可以帮助你&#xff1a; 深入了解Bert Encoder 的结构实现深入了解Transformer Encoder的结构实现 本篇文章不涉及对注意力机制实现的代码研究。 注&#xff1a;…
阅读更多...
在Linux以命令行方式（静默方式/非图形化方式）安装MATLAB（正版）

在Linux以命令行方式（静默方式/非图形化方式）安装MATLAB（正版）

1.根据教程&#xff0c;下载windows版本matlab&#xff0c;打开图形化界面&#xff0c;选择linux版本的只下载不安装 2.获取安装文件夹 3.获取许可证 4.安装 &#xff08;1&#xff09;跳过引用文章的2.2章节 &#xff08;2&#xff09;本文的安装文件夹代替引用文章的解压IS…
阅读更多...
CSS变量和@property

CSS变量和@property

CSS变量 var() CSS 变量是由CSS作者定义的实体&#xff0c;其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名&#xff0c;并使用特定的 var() 来访问。&#xff08;比如 color: var(--main-color);&#xff09;。 基本用法 CSS变量定义的作用域只在定义该…
阅读更多...
最新文章

Copyright @ 2022~2023