HTML——前端基础1

news2025/4/2 22:10:50

目录

前端概述

前端能做的事情​编辑

两步完成一个网页程序

前端工具的选择与安装

HTML

HTML5介绍

HTML5的DOCTYPE声明

HTML基本骨架

文字标签

标题之标签

标签之段落、换行、水平线

标签之图片

标签之超文本链接

标签之文本

列表标签之有序列表

列表标签之无序列表

标签之表格

表格单元格合并

Form表单（用户输入）

块元素和行内元素（内联元素）

HTML5新增标签

需要了解HTML三件套的基本使用，实操使用前端给后端发送Ajax请求

前端概述

前端能做的事情

app:uniapp、RN、Flutter

两步完成一个网页程序

  1. 第一步：使用记事本，编写代码

    • 创建一个文本文档，拓展名改为html

       <html>
     <head>
         <title>我的网页</title>
     </head>
     <body>
         Hello,我的第一个网页
     </body>
 </html>

      • 记得保存ctrl+s

      • <>用英文

  2. 第二步，以浏览器方式打开即可

    • 双击

前端工具的选择与安装

  1. 浏览器

    • 谷歌

      • 简洁大方，打开响应速度快

      • 开发者调试工具

  2. 开发者工具

    • VSCode

      • 可以直接将code的文件夹拉入vscode里面，再在vscode里面添加文件，很方便

    • 生成浏览器文件.html的快捷方式

       !+回车

    • VsCode常用快捷键列表

       代码格式化:Shift+Alt+F
 向上或向下移动一行:Alt+Up或Alt+Down
 快速复制一行代码:Shift+Alt+Up 或 Shift+Alt+Down
 快速保存: ctl+s
 快速查找:Ctrl + F
 快速替换:Ctrl + H

    • 快速打开浏览器扩展：open in brower

      • 右键

HTML

HTML5介绍

  • 2014年

  • 超文本标记语言：用来描述网页的一种语言（布局语言）

  • 后缀以.html结尾

  • HTML是一种标记语言（一套标记标签）

    • 双标签<html></html>

    • 单标签<img>

  • 打开一个网页，右键空白部分-检查，会出现前端代码

  • 点第一个图标，当你鼠标指向页面的一个元素时，代码会跟随

HTML5的DOCTYPE声明

  • DOCTYPE是document type(文档类型)的缩写。

  •  <!DOCTYPE html>

    • 是H5的声明，位于文档的最前面：网页必备的组成部分，避免浏览器的怪异模式

HTML基本骨架

  1. html标签

    • 定义HTML文档。标签限定了文档的开始点和结束点

       <html></html>

  2. head标签

    • 定义文档的头部。

    • 描述了文档的各种属性和信息：文档的标题、在Web中的位置和其他文档的关系等

    • 绝大多数文档头部包含的数据不会真正作为内容显示给读者（不是给用户看的）

       <head></head>

  3. body标签

    • 定义文档的主体。

    • 包含文档的所有内容（文本、超链接、图像、表格和列表等）

    • 会直接在页面中显示出来（给用户看的）

       <body></body>

  4. title标签

    • 定义文档的标题

    • 显示在浏览器窗口的标题栏或状态栏上

    • 是head标签中唯一必须要求包含的东西

    • 有利于SEO优化

      • SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求

       <titile></title>

  5. meta标签(单标签)

    • 描述一个HTML网页文档的属性，关键词等

    • charset="UTF-8"说明当前使用的是utf-8编码格式

       <!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>itbaizhan</title>
     </head>
     <body>
     </body>
 </htm1>

文字标签

  •  <font></font>
 <!--color face字体 size-->
 <font color="bule">蔬菜</font>

标题之标签

  • 标题通过<h1>-<h6>标签进行定义（直接输入h1）

  • 之后会配合样式表CSS定义

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

  • 生成h1-h6快捷键：h$*6

  • 正确使用标题

    • 不要仅仅为了生成粗体或大号字体使用（CSS可以帮助完成）

    • 有利于SEO

  • 标题标签位置摆放

    • 在标签中<>添加属性，默认居左：

       <h1 align="center|left|right">

    • 报红不是报错，只是不推荐使用（CSS会改进）

标签之段落、换行、水平线

  1. 段落：<p></p>

    •  <body>
     <p>我是一个段落标签</p>
     我是一个段落标签
     <!--虽然两个都是一样的输出，但是在html中不推荐直接把文本放在最外层，一定要通过标签承载-->
 </body>

  2. 换行：<br>

  3. 水平线：<hr>

    • 可设置属性

       <hr color="" width="" size="" align=""/>

      • width：长度（px像素）

      • size：高度（px像素）

      • align：默认居中

标签之图片

  • <img>定义HTML页面中的图像

  • 必须将图片放在html文档统一目录下

  • 属性

    • src:路径(图片地址与名字)

    • alt:规定图像的替代文本（可提示是什么图像）

    • width:规定图像的宽度（单位：px）

    • height:规定图像的高度（单位：px）

      • 一般不设置，可能会失真

    • title:鼠标悬停在图片上给予提示（使用率较低）

  • 图片路径详解

    1. 绝对路径

      • 电脑的盘符存储与访问的具体地址

    2. 相对路径

      • 两者相对关系，在同一路径下可以直接访问

      • (照片相对于html文档)子级关系：/

      • 父级关系：../

      • 同级关系：./

    3. 网络路径

      • 图片是网络服务器的图片

标签之超文本链接

  • 超链接：想跳哪里跳哪里

  •  <a href="url">链接文本</a>

    • 在标签<a>中使用href属性来描述链接的地址（完整地址）

    • 未访问的链接：蓝色字体+下划线

    • 访问过的链接：紫色+下划线

    • 点击链接：红色+下划线

    • 后期会用CSS样式修改掉这些效果

      <body>
     <a href="https://www.jd.com/">京东</a>
 </body>

    • 点击哪吒（鼠标会变成小手）会跳转百度页面

标签之文本

  1. 常用文本标签

    标签描述
    <em>定义着重文字
    <b>定义粗体文本
    <i>定义斜体字italic
    <strong>定义加重语气
    <del>定义删除字
    <span>元素没有特定的含义
    <u>下划线underline
    <sup>上标
    <sub>下标

  2. 常用文本标签和段落不同，段落代表一段文本，文本标签表示文本词汇

列表标签之有序列表

  • 是一列项目，列表项目使用数字进行标记

  • 有序列表始于<ol>标签

  • 每个列表项始于<li>标签

  • type属性

    •  <ol>的属性type拥有的选项

    • 1表示列表项目用数字标号(1,2,3...)

    • a表示列表项目用小写字母标号(a,b,....)

    • A 表示列表项目用大写字母标号(A,B,C...)

    • i表示列表项目用小写罗马数字标号(i,ii,ii...)

    • I表示列表项目用大写罗马数字标号(1,,...)

       <ol type="A">
         <li>苹果</li>
         <li>香蕉</li>
         <li>梨子</li>
</ol>

    • 嵌套

       <ol>
     <li>水果</li>
     <li>蔬菜
         <ol>
             <li>白菜</li>
             <li>油菜</li>
             <li>辣椒</li>
         </ol>
     </li>
     <li>肉类</li>
 </ol>

列表标签之无序列表

  • 是一个项目的列表，用粗体圆点（小黑圆圈）进行标记

  • 无序列表始于<ul>

  • 每个列表项始于<li>

  • type属性

    •  <ul>的属性type拥有的选项

    • disc 默认实心圆

    • circle 空心圆

    • square 小方块

    • none 不显示

  • 嵌套

  • 常见应用场景

    • 无序的列表效果

    • 导航效果

  • 快速生成ul+li的布局：ul>li*3(数字根据自己的需要的li数量修改)

标签之表格

  • 优点：展示数据简单，优秀

  • 表格标签：

    • 表格：<table>

    • 行：<tr>

    • 单元格（列）：<td>

  • 快速生成表格结构：table>tr*n>td{单元格}

  • 表格属性（在table里面）

    • border:表格边框

    • width:表格宽度

    • height:表格高度

表格单元格合并

  • 给表格更多可能性

  • 属性

    • 水平合并：colspan(保留左边，删除右边)

    • 垂直合并：rowspan(保留上边，删除下边)

Form表单（用户输入）

  • 在Web网页中用来给用户填写信息，使网页具有交互功能

  • 由容器、控件组成

  • 一个表单（容器：能够容纳各种各样的控件）一般应该包含用户填写信息的输入框、提交按钮（控件）等

  •  <form action="url" method="get|post" name="myform"></form>

  • 属性

    • action:服务器地址

    • name:表单名称

    • method中Get和Post区别

      • 数据提交方式，get把提交的数据url可以看到，post看不到

      • get一般用于提交少量数据，post用来提交大量数据

  • 元素

    • 表单标签

    • 表单域

    • 表单按钮

       <form>
         <input>
         <input type="submit">
         <button>按钮</button>
 </form>

  • 文本框

    • 文本域通过<input type="text">标签设定

    • 输入字母、数字等内容

       <form>
         First name:<input type="text" name="firstname">
         <br>
         Last name:<input type="text" name="lastname">
 </form>

  • 密码框

    • 通过<input type="password">来定义

    • 密码字段字符不会明文显示，而是以星号或圆点代替

       <form>
         Password:<input type="password" name="pwd">
 </form>

  • 提交按钮

    •  <input type="submit" value="登录">
 <!--value是替换submit-->

块元素和行内元素（内联元素）

  • 对比

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

  • 常见块级元素

     div、form、h1~h6、hr、p、table、ul、等

  • 常见内联元素

     a、b、em、i、span、strong等

  • 行内块级元素(特点:不换行、能够识别宽高)

     button、img、input等

HTML5新增标签

  • 新增布局标签：有利于SEO

  • div:容器元素，也是页面中见到的最多的元素

    • 增加文章清晰度，将区域分隔

  • H5新标签

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

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

相关文章

Blueprint —— Events

Blueprint —— Events

目录 一&#xff0c;Event Level Reset 二&#xff0c;Event Actor Begin Overlap 三&#xff0c;Event Actor End Overlap 四&#xff0c;Event Hit 五&#xff0c;Event Any Damage 六&#xff0c;Event Point Damage 七&#xff0c;Event Radial Damage 八&#xff…
阅读更多...
Java一揽子集合整理

Java一揽子集合整理

Java 集合框架 List ArrayList&#xff0c;底层Object数组&#xff0c;相关方法add&#xff0c;remove Vector&#xff0c;底层Object数组&#xff0c;线程安全&#xff0c;使用 synchronized 关键字进行同步处理 Stack&#xff0c;继承自Vector&#xff0c;是一个后进先出的…
阅读更多...
第二十四：5.2【搭建 pinia 环境】axios 异步调用数据

第二十四：5.2【搭建 pinia 环境】axios 异步调用数据

第一步安装&#xff1a;npm install pinia 第二步&#xff1a;操作src/main.ts 改变里面的值的信息&#xff1a; <div class"count"><h2>当前求和为&#xff1a;{{ sum }}</h2><select v-model.number"n">　 // .number 这里是…
阅读更多...
HybridCLR+Adressable+Springboot热更

HybridCLR+Adressable+Springboot热更

本文章会手把手教大家如何搭建HybridCLRAdressableSpringboot热更。 创作不易&#xff0c;动动发财的小手点个赞。 安装华佗 首先我们按照官网的快速上手指南搭建一个简易的项目&#xff1a; 快速上手 | HybridCLR 注意在热更的代码里添加程序集。把用到的工具放到程序集里…
阅读更多...
金融行业专题｜某基金公司基于超融合信创平台支持人大金仓数据库的性能评测

金融行业专题｜某基金公司基于超融合信创平台支持人大金仓数据库的性能评测

随着“自主可控”在 IT 基础设施领域不断深化&#xff0c;数据库的国产化替代也被很多金融机构提上日程。为了保证性能&#xff0c;大部分国产数据库都基于信创架构的裸金属服务器部署。在国产虚拟化/超融合平台上&#xff0c;国产数据库性能表现如何&#xff1f;尤其是搭配信创…
阅读更多...
【2025全网最新最全】前端Vue3框架的搭建及工程目录详解

【2025全网最新最全】前端Vue3框架的搭建及工程目录详解

文章目录 安装软件Node.js搭建Vue工程创建Vue工程精简Vue项目文件 Vue工程目录的解读网页标题的设置设置全局样式路由配置 安装软件Node.js 下载地址&#xff1a;https://nodejs.org/zh-cn/ 安装完成后&#xff0c;打开cmd,查看环境是否准备好 node -v npm -vnpm使用之前一定…
阅读更多...
R 语言科研绘图第 27 期 --- 密度图-分组

R 语言科研绘图第 27 期 --- 密度图-分组

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…
阅读更多...
QT各种版本下载安装

QT各种版本下载安装

参考链接&#xff1a; 【Qt】超详细&#xff01;Qt4.8.6和VS2010的配置及使用 由于QT官网一般现在进不去&#xff0c;所以下载一些QT版本只能通过镜像或者以前下载存储的安装包来进行&#xff0c;现在推荐两种方法 从参考链接中搬过来&#xff1a; 方案一&#xff1a;国内镜…
阅读更多...
信息系统的安全防护

信息系统的安全防护

文章目录 引言**1. 物理安全****2. 网络安全****3. 数据安全****4. 身份认证与访问控制****5. 应用安全****6. 日志与监控****7. 人员与管理制度****8. 其他安全措施****9. 安全防护框架**引言 从技术、管理和人员三个方面综合考虑，构建多层次、多维度的安全防护体系。 信息…
阅读更多...
如何解决svn st中出现！（冲突）的问题

如何解决svn st中出现！（冲突）的问题

在 SVN&#xff08;Subversion&#xff09;中&#xff0c;svn status 命令用于查看工作副本的状态。当你看到 ! 符号时&#xff0c;通常表示文件或目录在工作副本中丢失&#xff08;missing&#xff09;。以下是解决这个问题的步骤&#xff1a; 1. 理解 ! 的含义 ! 表示该文件…
阅读更多...
Redis｜复制 REPLICA

Redis｜复制 REPLICA

文章目录 是什么能干嘛怎么玩案例演示复制原理和工作流程复制的缺点 是什么 官网地址&#xff1a;https://redis.io/docs/management/replication/Redis 复制机制用于将数据从一个主节点&#xff08;Master&#xff09;复制到一个或多个从节点&#xff08;Slave&#xff09;&a…
阅读更多...
水利 2月26日练习

水利 2月26日练习

测量前准备 使用数字万用表的蜂鸣器档&#xff0c;可以高速检验电解电容器的质量好坏。测量方法如图5-14所示。将数字万用表拨至蜂鸣器档&#xff0c;用两支表笔区分与被测电容器Cx的两个引脚接触&#xff0c;应能听到一阵急促的蜂鸣声&#xff0c;随即声响中止&#xff0c;同时…
阅读更多...
[Web 安全] PHP 反序列化漏洞 —— PHP 序列化 反序列化

[Web 安全] PHP 反序列化漏洞 —— PHP 序列化 反序列化

关注这个专栏的其他相关笔记&#xff1a;[Web 安全] 反序列化漏洞 - 学习笔记-CSDN博客 0x01&#xff1a;PHP 序列化 — Serialize 序列化就是将对象的状态信息转化为可以存储或传输的形式的过程&#xff0c;在 PHP 中&#xff0c;通常使用 serialize() 函数来完成序列化的操作…
阅读更多...
汽车免拆诊断案例 | 保时捷车发动机偶发熄火故障 2 例

汽车免拆诊断案例 | 保时捷车发动机偶发熄火故障 2 例

案例1　2008款保时捷卡宴车行驶中发动机偶发熄火 故障现象　 一辆2008款保时捷卡宴车&#xff0c;搭载4.8 L 自然吸气发动机&#xff0c;累计行驶里程约为21万km。车主反映&#xff0c;该车行驶中发动机偶发熄火&#xff1b;重新起动&#xff0c;发动机能够起动着机&#xff…
阅读更多...
Python游戏编程之赛车游戏6-2

Python游戏编程之赛车游戏6-2

3.2 move()方法的定义 Player类的move()方法用于玩家控制汽车左右移动&#xff0c;当玩家点击键盘上的左右按键时&#xff0c;汽车会相应地进行左右移动。 move()方法的代码如图7所示。 图7 move()方法的代码 其中&#xff0c;第20行代码通过pygame.key.get_pressed()函数获…
阅读更多...
渗透测试【order by盲注实践】

渗透测试【order by盲注实践】

实践环境基于sqli-lab靶场的第46关进行 bool盲注 代码如下&#xff1a; import requests from bs4 import BeautifulSoup# 定义获取用户名的函数&#xff0c;使用 BeautifulSoup 解析 HTML 页面&#xff0c;提取用户名信息 def get_username(resp):soup BeautifulSoup(resp,…
阅读更多...
ROS的action通信——实现阶乘运算（三）

ROS的action通信——实现阶乘运算（三）

在ROS中除了常见的话题(topic&#xff09;通信、服务(server)通信等方式&#xff0c;还有action通信这一方式&#xff0c;由于可以实时反馈任务完成情况&#xff0c;该通信方式被广泛运用于机器人导航等任务中。本文将通过三个小节的分享&#xff0c;实现基于action通信的阶乘运…
阅读更多...
007：Cesium.ScreenSpaceEventHandler 知识详解，示例代码

007：Cesium.ScreenSpaceEventHandler 知识详解，示例代码

查看本专栏目录 - 本文是第 007个API内容详解 vue+cesium 示例教程200+目录 文章目录 一、ScreenSpaceEventHandler 的基本概念初始化 ScreenSpaceEventHandler二、注册事件**常见事件类型**三、注销事件四、示例代码：鼠标移动时显示坐标信息五、示例代码：鼠标左键点击拾取地…
阅读更多...
期权帮|股指期货基差和价差有什么区别？

期权帮|股指期货基差和价差有什么区别？

锦鲤三三每日分享期权知识&#xff0c;帮助期权新手及时有效地掌握即市趋势与新资讯&#xff01; 股指期货基差和价差有什么区别&#xff1f; 一、股指期货基差 股指期货基差是指股指期货价格与其对应的现货指数价格之间的差额。 股指期货基差计算公式&#xff1a;基差 现…
阅读更多...
内网渗透测试-Vulnerable Docker靶场

内网渗透测试-Vulnerable Docker靶场

靶场来源&#xff1a; Vulnerable Docker: 1 ~ VulnHub 描述&#xff1a;Down By The Docker 有没有想过在容器中玩 docker 错误配置、权限提升等&#xff1f; 下载此 VM&#xff0c;拿出您的渗透测试帽并开始使用 我们有 2 种模式&#xff1a; - HARD&#xff1a;这需要您将 d…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023