前端---认识HTML

news2024/11/19 1:55:51

文章目录

  • 什么是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>

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

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

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

相关文章

No188.精选前端面试题，享受每天的挑战和学习

No188.精选前端面试题，享受每天的挑战和学习

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…
阅读更多...
C语言基础篇4：变量与存储

C语言基础篇4：变量与存储

1 局部变量和全局变量 在介绍局部变量和全局变量前&#xff0c;先&#xff0c;了解一些关于作用域方面的内容。作用域的作用就是决定程序中的哪些语句是可用的&#xff0c;换句话说&#xff0c;就是程序中的可见性。作用域有局部作用域和全局作用域&#xff0c;那么局部变量就具…
阅读更多...
深入研究SVN代码检查的关键工具：svnchecker vs. SonarQube，选择最适合你的代码检查工具

深入研究SVN代码检查的关键工具：svnchecker vs. SonarQube，选择最适合你的代码检查工具

目录 一、SVN代码检查(整合svnchecker)1、创建SVN代码库2、下载安装包3、修改SVN配置4、新建代码检查配置文件(名称自定义)5、hooks目录添加配置文件6、设置只对Java文件进行检查7、测试 二、SonarQube代码检测1、什么是SonarQube2、MySQL数据库的安装3、SonarQube服务端软件安…
阅读更多...
Python之函数进阶-函数执行原理

Python之函数进阶-函数执行原理

Python之函数进阶-函数执行原理 函数执行流程 C语言中&#xff0c;函数的活动和栈有关。栈是后进先出的数据结构。栈是由底端向顶端生长&#xff0c;栈顶加入数据成为压栈、入栈、栈顶弹出数据称为出栈。 def add(x, y):r x yprint(r)return rdef main():a 1r add(a, 2)r…
阅读更多...
Pytorch损失函数、反向传播和优化器、Sequential使用

Pytorch损失函数、反向传播和优化器、Sequential使用

Pytorch_Sequential使用、损失函数、反向传播和优化器 文章目录 nn.Sequential搭建小实战损失函数与反向传播优化器 nn.Sequential nn.Sequential是一个有序的容器&#xff0c;用于搭建神经网络的模块被按照被传入构造器的顺序添加到nn.Sequential()容器中。 import torch.nn …
阅读更多...
【操作系统】1.1 操作系统的基础概念、功能和目标以及特性

【操作系统】1.1 操作系统的基础概念、功能和目标以及特性

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…
阅读更多...
Mac电脑配置Flutter开发环境

Mac电脑配置Flutter开发环境

1.进入官网下载页&#xff1a; Flutter SDK releases | Flutter 可以看到有 Windows、macOS、Linux三种系统的下载包 选择macOS&#xff0c;然后点击下载 Stable channel&#xff08;稳定版&#xff09;中的最新版本&#xff0c;下载完成后可以移动到资源库Library中。 2.下载…
阅读更多...
使用easyui前端框架构建一个crud应用（看完这篇就够了）

使用easyui前端框架构建一个crud应用（看完这篇就够了）

easyui是博主最喜欢的前端框架&#xff0c;因为它提供了多种主题样式和各种好看的ui组件。 这篇文章将会详细地介绍easyui前端框架的使用&#xff0c;通过创建一个crud应用来帮助大家快速掌握easyui的使用。 一、快速开始 这个章节主要介绍easyui前端框架的下载&#xff0c;ea…
阅读更多...
Leetcode—680.验证回文串II【简单】

Leetcode—680.验证回文串II【简单】

2023每日刷题&#xff08;二十七&#xff09; Leetcode—680.验证回文串II 实现代码 class Solution { public:bool judgeFunc(string s, int left, int right) {while(left < right) {if(s[left] ! s[right]) {return false;}left;right--;}return true;}bool validPalin…
阅读更多...
按键精灵中的字符串常用的场景

按键精灵中的字符串常用的场景

在使用按键精灵编写脚本时&#xff0c;与字符串有关的场景有以下几种&#xff1a; 1. 用时间字符串记录脚本使用截止使用时间 Dim localTime "2023-11-12 00:15:14" Dim networkTime GetNetworkTime() TracePrint networkTime If networkTime > localTime The…
阅读更多...
LeetCode200.岛屿数量

LeetCode200.岛屿数量

看完题目我还感觉这道题目有点难&#xff0c;没想到20分钟不到就完全靠自己给写出来了。我就是按照自己的想法来&#xff0c;我用一个等大的visit数组来表示grid数组中的这个元素是否被访问过&#xff08;是否已经被判断了是不是岛屿&#xff09;。 先用一个大的循环对grid数组…
阅读更多...
threejs(12)-着色器打造烟雾水云效果

threejs(12)-着色器打造烟雾水云效果

一、自己封装水波纹效果 src/main/main01.js import * as THREE from "three";import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; import gsap from "gsap"; import * as dat from "dat.gui"; import ver…
阅读更多...
解决springboot接受buffer文件为null（从picgo上传buffer看springmvc处理过程）

解决springboot接受buffer文件为null（从picgo上传buffer看springmvc处理过程）

1. 前言&#xff1a; picgo插件的简单开发 上篇文章我们简单写了picgo上传插件&#xff0c;但是当我们测试的时候&#xff0c;发现问题了&#xff0c;后端MultipartFile file接受到的文件为null。 2. 排查问题&#xff1a; 参考的文档 picgo api列表关于multipart form-data中…
阅读更多...
U-Mail邮件系统三大安全措施，防止信息泄露！

U-Mail邮件系统三大安全措施，防止信息泄露！

在当信息化高速发展的今天&#xff0c;国内很多企业业务流程对OA系统、CRM系统、ERP系统、邮件系统等办公应用依赖度越来越高。这些办公应用给企业带来便利的同时也伴随着越来越多的信息安全问题&#xff0c;而在日常的办公场景中&#xff0c;由于内部员工非法泄漏或黑客入侵导…
阅读更多...
Qt实现TCP调试助手 - 简述如何在Qt中实现TCP多并发

Qt实现TCP调试助手 - 简述如何在Qt中实现TCP多并发

简介 软件开发中&#xff0c;可能经常会用到TCP调试工具。本人使用QT开发了一款TCP调试工具&#xff0c;方便大家使用。本文章主要介绍下&#xff0c;该工具的功能&#xff0c;以及如何在Qt中实现TCP服务器的并发。 界面展示 安装界面 桌面图标。安装后会生成桌面图标&#…
阅读更多...
（三）正点原子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…
阅读更多...
fastbins_Double Free调试

fastbins_Double Free调试

我大哥给我出了一题pwn heap题&#xff0c;当时现场的时候没解出来&#xff0c;想岔了。事后感概自己还是理解的不够透彻。决定认真再次调试下。用的是2.23版本的how2heap中fastbins_dup.c。 简单用gcc编译下&#xff0c;然后带源码调试&#xff1a; 生成一个a.out的文件&#…
阅读更多...
C++ 运算符重载（Complex复数类）

C++ 运算符重载（Complex复数类）

Complex复数类 Complex.h #ifndef COMPLEX_H #define COMPLEX_H#include <iostream> using namespace std;class Complex { private:double real 0; //复数的实部double imag 0; //复数的虚部 public:Complex() default; /*无参构造*/Complex(double r); …
阅读更多...
No186.精选前端面试题，享受每天的挑战和学习

No186.精选前端面试题，享受每天的挑战和学习

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…
阅读更多...
解决XFCE桌面VirtualBox透明背景的问题

解决XFCE桌面VirtualBox透明背景的问题

1 背景 笔者用的是ManjaroXFCE的组合&#xff0c;但是在使用VirtualBox时&#xff0c;会出现透明背景的问题&#xff1a; 然后发现这其实和Kvantum主题有关。下面将进行设置操作&#xff0c;去修正Kvantum相关配置修复该问题。 2 操作流程 打开Kvantum Manager&#xff1a; …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023