前端---认识HTML

文章目录

  • 什么是HTML？
  • HTML的读取、运行
  • HTML的标签
    • 注释标签
    • 标题标签
    • 段落标签
    • 换行标签
    • 格式化标签
    • 图片标签
    • a标签
    • 表格标签
    • 列表标签
    • 表单标签
      • form标签
      • input标签
        • 文本框
        • 单选框
        • 复选框
        • 普通按钮
        • 提交按钮
        • 文件选择框
    • select标签
    • textarea标签
    • 特殊标签
      • div标签
      • span标签

什么是HTML？

我们知道 网站 = 前端（网页） + 后端（服务器）。前端（网页）是展示给用户看的；后端（服务器）是用来存储数据和组织业务逻辑的。

那如何制作一个前端的网页呢？ 其实主要依赖三门编程语言：
HTML：描述页面的结构
CSS：描述页面的样式
JS：描述页面的动态交互

今天，我们就先来介绍一下HTML的语法和使用，让大家可以做出一个网站的页面结构。CSS和JS会在后面的篇章中介绍。

HTML的读取、运行

我们知道代码的执行都是需要经过编译的，想要编译就一般需要使用到开发工具，就像Java运行在JDK上一样。那么前端的这三种编程语言该运行在什么样的开发工具上呢？直接使用浏览器就可以。

HTML不需要编译，直接让浏览器“读取”就能执行。浏览器最核心的东西就是内核，它的内核就能帮助我们识别HTML并把页面渲染在浏览器上。

HTML的标签

HTML是一个标签化的语言，它借助标签来完成自己的功能。
在这里插入图片描述

注：

  1. html是由标签组成的

  2. 大部分标签都有开始标签和结束标签，小部分的标签只有开始标签没有结束标签

  3. 标签之间是可以嵌套的，他们之间是树形结构的。

    html是head和body的父标签；head和body是html的子标签。 head和body是兄弟标签

注释标签

<!--这是注释-->

注：我们可以在 !- -和- -直接添加注释内容

标题标签

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

在这里插入图片描述

段落标签

 	<p>
        这是一段话
    </p>

注：段落标签之间会换行，并且有明显的段落间距

换行标签

<br>

注：

  1. br标签是一个单标签，只有开始标签没有结束标签
  2. 在HTML里面必须使用br标签进行换行，直接按enter换行是没用的

格式化标签

	<strong>加粗</strong>
    <b>加粗</b>

    <i>倾斜</i>
    <em>倾斜</em>

    <s>删除线</s>
    <del>删除线</del>

    <u>下划线</u>
    <ins>下划线</ins>

在这里插入图片描述

图片标签

<img src="" alt="">

注：

  1. img标签是一个单标签，只有开始标签没有结束标签
  2. img标签必须要有一个src属性，通过这个属性来指定你要展示的图片的路径。这个路径可以是绝对路径，也可以是相对路径，还可以是网络路径
  3. alt属性会在图片加载失败时，显示出alt里面的文字（自己写入的）

a标签

<a href=""></a>

注：a标签就是超链接的意思，可以链接到另外一个资源，点击时即可访问。

表格标签

	<table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>1</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>2</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>3</td>
        </tr>
        <thead>这是thead部分</thead>
        <tbody>这是tbody部分</tbody>
    </table>

在这里插入图片描述

列表标签

  • 有序列表
	<ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>

在这里插入图片描述

  • 无序列表
	<ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>

在这里插入图片描述

  • 自定义列表
	<dl>
        <dt>一些人</dt>
        <dd>张三</dd>
        <dd>李四</dd>
        <dd>王五</dd>
    </dl>

在这里插入图片描述

表单标签

表单标签就是为了和用户交互的。

form标签

	<form action="/hi" type="get">
        <input type="text">
        <input type="submit" value="提交">
    </form>

注：

  1. form标签的功能是构造一个HTTP请求，进行前后端交互。
  2. 必须搭配submit使用

input标签

input标签有很多的形态：

文本框
	<input type="text">
    <input type="password">

在这里插入图片描述

单选框
	<input type="radio" name="gender">男
    <input type="radio" name="gender">女

注：设置为单选框类型后，只有指定相同的name属性，才能达到互斥的效果

	<input type="radio" name="gender" id="male"><label for="male">男</label>
    <input type="radio" name="gender" id="female" checked="checked"><label for="female">女</label>

注：

  1. 可以使用label来扩大点击范围。不设置时只有点击⭕才能选上；设置后点击文字也可以选上
  2. 使用checked属性可以设置默认选中
复选框
	<input type="checkbox" name="action">吃饭
    <input type="checkbox" name="action" checked="checked">睡觉
    <input type="checkbox" name="action">打豆豆

注：也可以设置checked属性，也可以使用label来放大点击范围

普通按钮
<input type="button" value="这是按钮" onclick="alert(hello)">

注：点击按钮后会触发onclick设置的行为

提交按钮
<input type="submit" value="提交按钮">

注：搭配form表单标签使用，进行前后端交互

文件选择框
<input type="file">

注：可以在本地选择文件，上传到服务器

select标签

	<select>
        <option>北京</option>
        <option>深圳</option>
        <option>上海</option>
        <option selected="selected">杭州</option>
    </select>

在这里插入图片描述

textarea标签

<textarea cols="50" rows="10"></textarea>

注：

  1. input只能写一行；textarea可以写多行
  2. 可以通过cols属性设置文本框的宽度；可以通过rows设置文本框的高度

特殊标签

下面介绍的这两个标签搭配CSS、JS可以实现上面介绍的大部分标签的功能

div标签

<div>这是div</div>

注：是块级元素，默认会换行

span标签

<span>这是span</span>

注：是行内元素，默认会放在同一行

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

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

相关文章

2.1 CE修改器：精确数值扫描

2.1 CE修改器：精确数值扫描

本关是CE修改器的第一关&#xff0c;用户需要通过 Cheat Engine 工具完成精确扫描值。在这个练习中&#xff0c;需要将一个特定的数值&#xff08;健康值&#xff09;改变为 1000。首先&#xff0c;要确保数值类型设置正确&#xff0c;默认的是2字节或4字节。接着&#xff0c;选…
阅读更多...
（三）正点原子I.MX6ULL kernel6.1挂根文件系统

（三）正点原子I.MX6ULL kernel6.1挂根文件系统

一、概述 移植NXP官方最新的linux kernel&#xff08;linux-imx-lf-6.1.y&#xff09; 移植方法基本参照正点原子教程 移植开发板&#xff1a;正点原子阿尔法2.1 二、添加开发板到内核 进入内核目录下&#xff0c;先修改Makefile 打开终端&#xff1a; cp arch/arm/configs/im…
阅读更多...
Nginx：如何实现一个域名访问多个项目

Nginx：如何实现一个域名访问多个项目

1. 背景介绍 最近在多个项目部署中遇到这样一个问题&#xff0c;一个域名如何实现多个项目的访问。因为不想自己单独去申请域名证书和域名配置&#xff0c;便想到了这个方案&#xff0c;结合Nginx的location功能实现了自己的需求&#xff0c;便记录下来。示例中是以项目演示&a…
阅读更多...
Unity - 各向异性 - 丝绸材质

Unity - 各向异性 - 丝绸材质

文章目录 目的环境主观美术效果的[假]丝绸基于物理的方式ProjectPBR filament web captureReferences 目的 拾遗&#xff0c;备份 环境 Unity : 2020.3.37f1 Pipeline : Builtin Rendering Pipeline 主观美术效果的[假]丝绸 非常简单 : half specualr pow(1 - NdotV, _Edg…
阅读更多...
RT-Thread Studio开发 新手入门

RT-Thread Studio开发 新手入门

文章目录 前言一、RT-Thread Studio 与 STM32CubeMX 下载安装二、新建工程三、点亮LED灯四、按键中断五、串口通信六、OLED显示 前言 软件开发环境&#xff1a;RT-Thread Studio、STM32CubeMX 硬件&#xff1a;STM32F407ZGT6 一、RT-Thread Studio 与 STM32CubeMX 下载安装 …
阅读更多...
【C语言数据结构————————二叉树】

【C语言数据结构————————二叉树】

文章目录 文章目录 一、什么是树 树的定义 树的种类 树的深度 树的基本术语 二、满二叉树 定义 满二叉树的特点 三、完全二叉树 定义 特点 四、二叉树的性质 五、二叉树的存储结构 顺序存储结构 链式存储结构 六、二叉树的基本操作 七、二叉树的创建 八、二叉树…
阅读更多...
电容的作用

电容的作用

文章目录 总结1.降压2.滤波3.延时4.耦合5.旁路电容 总结 1.降压 问题&#xff1a; 直接连接灯泡会烧掉 解决方案 进一步为了防止电容放电&#xff0c;伤人&#xff0c;加入一个大电阻 2.滤波 直流的情况 交流的情况 频率与容抗的关系 3.延时 4.耦合 滤除直流成分&#xf…
阅读更多...
Android---动态权限适配问题

Android---动态权限适配问题

在 Android6.0&#xff0c;即 API 23 之前&#xff0c;App 需要的权限都会在安装阶段向用户展示&#xff0c;而在 App 运行期间不需要动态判断权限是否已申请。从 6.0 之后的版本开始&#xff0c;Android 系统做了一次大的改动。对于部分权限&#xff0c;App 需要在代码中动态申…
阅读更多...
Visual Studio 2019 写 Unity 脚本时，烦人又离谱的自动补全！

Visual Studio 2019 写 Unity 脚本时，烦人又离谱的自动补全！

Visual Studio 2019 写 Unity 脚本时&#xff0c;逆天又离谱的自动补全&#xff01; 血压高升的原因 写脚本的时候&#xff0c;智能提示有哪些函数可以使用&#xff0c;是非常棒的一件事情&#xff0c;有助于游戏开发者编写和检查自己的脚本代码。 但是&#xff01; 我想输入…
阅读更多...
序列化模块-json和pickle

序列化模块-json和pickle

一、json json是所有语言都通用的一种序列化格式 &#xff0c;只支持 列表、 字典、 字符串、 数字 &#xff0c; 字典的key必须是字符串 1、dumps、loods # 在内存中做数据转换 : # durps 数据类型 转成 字符串 序列化 # loods 字符串 转成 数据类型 反序…
阅读更多...
理解快速排序

理解快速排序

理解快速排序 首先了解以下快速排序 快速排序&#xff08;QuickSort&#xff09;是一种常用的排序算法&#xff0c;属于比较排序算法的一种。它是由英国计算机科学家Tony Hoare于1960年提出的&#xff0c;是一种分而治之&#xff08;divide and conquer&#xff09;的算法。 …
阅读更多...
C 语言函数

C 语言函数

C 语言函数 在本教程中&#xff0c;将向您介绍C语言编程中的函数&#xff08;用户定义函数和标准库函数&#xff09;。此外&#xff0c;您还将学习为什么在编程中使用函数。 函数是执行特定任务的代码块。 假设您需要创建程序来创建一个圆并为其着色。您可以创建两个函数来解…
阅读更多...
Redis04-分布式锁

Redis04-分布式锁

目录 Redis实现分布式锁 分布式锁的工作流程 Redis实现分布式锁 Redission的watch dog Redis分布式锁的合理应用 Redis实现分布式锁 在单节点的服务器中&#xff0c;java中的synchronized机制是处于JVM层面的&#xff0c;只能保证线程之间的同步。而实际的服务部署中&…
阅读更多...
第90步 深度学习图像分割：U-Net建模

第90步 深度学习图像分割：U-Net建模

基于WIN10的64位系统演示 一、写在前面 从这一期开始&#xff0c;我们杀个回马枪&#xff0c;继续学习深度学习图像分割系列&#xff0c;以为4090上岗了。 图像分割是计算机视觉的一个重要任务&#xff0c;目的是将数字图像分割成多个部分或区域&#xff0c;这些部分通常对应…
阅读更多...
goroutine调度模型 调度策略

goroutine调度模型 调度策略

文章目录 背景 协程线程与协程的对比线程&#xff08;Thread&#xff09;协程&#xff08;Coroutine&#xff09; 运作线程模型 goroutine调度模型与演进过程G-M模型G-P-M模型抢占式调度器其他优化 调度策略队列轮转系统调用工作量窃取抢占式调度GOMAXPROCS 对性能的影响 Go在语…
阅读更多...
multilinear多项式承诺方案benchmark对比

multilinear多项式承诺方案benchmark对比

1. 引言 前序博客有&#xff1a; Lasso、Jolt 以及 Lookup Singularity——Part 1Lasso、Jolt 以及 Lookup Singularity——Part 2深入了解LassoJolt Lasso lookup中&#xff0c;multilinear多项式承诺方案的高效性至关重要。 本文重点关注4种multilinear多项式承诺方案的实…
阅读更多...
【Python基础】try-finally语句和with语句

【Python基础】try-finally语句和with语句

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…
阅读更多...
Springboot+vue的毕业生实习与就业管理系统（有报告）。Javaee项目，springboot vue前后端分离项目。

Springboot+vue的毕业生实习与就业管理系统（有报告）。Javaee项目，springboot vue前后端分离项目。

演示视频&#xff1a; Springbootvue的毕业生实习与就业管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点…
阅读更多...
logback异步日志打印阻塞工作线程

logback异步日志打印阻塞工作线程

前言 最新做项目&#xff0c;发现一些历史遗留问题&#xff0c;典型的是日志打印的配置问题&#xff0c;其实都是些简单问题&#xff0c;但是往往简单问题引起严重的事故&#xff0c;比如日志打印阻塞工作线程&#xff0c;以logback和log4j2为例。logback实际上是springboot的…
阅读更多...
Smart Link 和 Monitor Link应用

Smart Link 和 Monitor Link应用

定义 Smart Link常用于双上行链路组网&#xff0c;提高接入的可靠性。 Monitor Link通过监视上行接口&#xff0c;使下行接口同步上行接口状态&#xff0c;起到传递故障信息的作用。 Smart Link&#xff0c;又叫做备份链路。一个Smart Link由两个接口组成&#xff0c;其中一个…
阅读更多...
最新文章

Copyright @ 2022~2023