HTML——前端基础1

目录

前端概述

前端能做的事情​编辑

两步完成一个网页程序

前端工具的选择与安装

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新标签

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

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

相关文章

量子计算可能改变世界的四种方式

量子计算可能改变世界的四种方式

世界各地的组织和政府正将数十亿美元投入到量子研究与开发中&#xff0c;谷歌、微软和英特尔等公司都在竞相实现量子霸权。 这其中的利害关系重大&#xff0c;有这么多重要的参与者&#xff0c;量子计算机的问世可能指日可待。 为做好准备&#xff0c;&#xff0c;我们必须了…
阅读更多...
Jsmoke-一款强大的js检测工具，浏览器部署即用,使用方便且高效

Jsmoke-一款强大的js检测工具，浏览器部署即用,使用方便且高效

目录标题 Jsmoke &#x1f6ac;&#x1f6ac; by Yn8rt使用方式界面预览功能特性支持的敏感信息类型 Jsmoke &#x1f6ac;&#x1f6ac; by Yn8rt ​ 该插件由 Yn8rt师傅 开发&#xff0c;插件可以理解为主动版的hae和apifinder&#xff0c;因为其中的大多数规则我都引用了&a…
阅读更多...
让Word插上AI的翅膀:如何把DeepSeek装进Word

让Word插上AI的翅膀:如何把DeepSeek装进Word

在日常办公中&#xff0c;微软的Word无疑是我们最常用的文字处理工具。无论是撰写报告、编辑文档&#xff0c;还是整理笔记&#xff0c;Word都能胜任。然而&#xff0c;随着AI技术的飞速发展&#xff0c;尤其是DeepSeek的出现&#xff0c;我们的文字编辑方式正在发生革命性的变…
阅读更多...
HarmonyOS 5.0应用开发——多线程Worker和@Sendable的使用方法

HarmonyOS 5.0应用开发——多线程Worker和@Sendable的使用方法

【高心星出品】 文章目录 多线程Worker和Sendable的使用方法开发步骤运行结果 多线程Worker和Sendable的使用方法 Worker在HarmonyOS中提供了一种多线程的实现方式&#xff0c;它允许开发者在后台线程中执行长耗时任务&#xff0c;从而避免阻塞主线程并提高应用的响应性。 S…
阅读更多...
《深度学习实战》第3集：循环神经网络（RNN）与序列建模

《深度学习实战》第3集：循环神经网络（RNN）与序列建模

第3集&#xff1a;循环神经网络&#xff08;RNN&#xff09;与序列建模 引言 在深度学习领域&#xff0c;处理序列数据&#xff08;如文本、语音、时间序列等&#xff09;是一个重要的研究方向。传统的全连接网络和卷积神经网络&#xff08;CNN&#xff09;难以直接捕捉序列中…
阅读更多...
10.【线性代数】—— 四个基本子空间

10.【线性代数】—— 四个基本子空间

十、 四个基本子空间 1. 列空间 C ( A ) C(A) C(A) in R m R^m Rm2. 零空间 N ( A ) N(A) N(A) in R n R^n Rn3. 行空间 C ( A T ) C(A^T) C(AT) in R n R^n Rn4. 左零空间 N ( A T ) N(A^T) N(AT) in R m R^m Rm综述5. 新的向量空间 讨论矩阵 A m ∗ n A_{m*n} Am∗n​…
阅读更多...
Windows上使用go-ios实现iOS17自动化

Windows上使用go-ios实现iOS17自动化

前言 在Windows上运行iOS的自动化&#xff0c;tidevice对于iOS17以上并不支持&#xff0c;原因是iOS 17 引入新通信协议 ‌RemoteXPCQUIC‌&#xff0c;改变了 XCUITest 的启动方式。 一、go-ios的安装 1、安装命令&#xff1a;npm i go-ios 2、安装完成后输入命令which io…
阅读更多...
CBAM注意力机制详解与实现

CBAM注意力机制详解与实现

前言&#xff1a; 在深度学习领域&#xff0c;注意力机制已成为提升模型性能的重要手段之一。CBAM&#xff08;Convolutional Block Attention Module&#xff09;作为一种轻量级且高效的注意力机制&#xff0c;被广泛应用于各种卷积神经网络中。 一、CBAM注意力机制概述 1.…
阅读更多...
GCN从理论到实践——基于PyTorch的图卷积网络层实现

GCN从理论到实践——基于PyTorch的图卷积网络层实现

Hi&#xff0c;大家好&#xff0c;我是半亩花海。图卷积网络&#xff08;Graph Convolutional Network, GCN&#xff09;是一种处理图结构数据的深度学习模型。它通过聚合邻居节点的信息来更新每个节点的特征表示&#xff0c;广泛应用于社交网络分析、推荐系统和生物信息学等领…
阅读更多...
给虚拟机配置IP

给虚拟机配置IP

虚拟机IP这里一共有三个地方要设置&#xff0c;具体说明如下&#xff1a; &#xff08;1&#xff09;配置vm虚拟机网段 如果不进行设置&#xff0c;每次启动机器时都可能是随机的IP&#xff0c;不方便我们后续操作。具体操作是&#xff1a;点击编辑→虚拟网络编辑器 选择VMne…
阅读更多...
【免费】YOLO[笑容]目标检测全过程（yolo环境配置+labelimg数据集标注+目标检测训练测试）

【免费】YOLO[笑容]目标检测全过程（yolo环境配置+labelimg数据集标注+目标检测训练测试）

一、yolo环境配置 这篇帖子是我试过的&#xff0c;非常全&#xff0c;很详细【cudaanacondapytorchyolo(ultralytics)】 yolo环境配置 二、labelimg数据集标注 可以参考下面的帖子&#xff0c;不过可能会出现闪退的问题&#xff0c;安装我的流程来吧 2.1 labelimg安装 label…
阅读更多...
mapbox基础，使用geojson加载heatmap热力图层

mapbox基础，使用geojson加载heatmap热力图层

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：mapbox 从入门到精通 文章目录 一、🍀前言1.1 ☘️mapboxgl.Map 地图对象1.2 ☘️mapboxgl.Map style属性1.3 ☘️heatmap热力图层样式二、🍀使用geojs…
阅读更多...
Python 课堂点名桌面小程序

Python 课堂点名桌面小程序

一、场景分析 闲来无事&#xff0c;老婆说叫我开发一个课堂点名桌面小程序&#xff0c;给她在课堂随机点名学生问问题。 人生苦短&#xff0c;那就用 Python 给她写一个吧。 二、依赖安装 因为要用到 excel&#xff0c;所以安装两个依赖&#xff1a; pip install openpyxl…
阅读更多...
蓝桥杯 路径之谜

蓝桥杯 路径之谜

路径之谜 题目描述 小明冒充 XX 星球的骑士&#xff0c;进入了一个奇怪的城堡。 城堡里边什么都没有&#xff0c;只有方形石头铺成的地面。 假设城堡地面是 nnnn 个方格。如下图所示。 按习俗&#xff0c;骑士要从西北角走到东南角。可以横向或纵向移动&#xff0c;但不能斜着走…
阅读更多...
在鸿蒙HarmonyOS手机上安装hap应用

在鸿蒙HarmonyOS手机上安装hap应用

一、下载工具 安装hap包需要用到小工具 。 二、解压到目录后&#xff0c;进入该文件夹&#xff0c;打开命令行&#xff0c;如下图 三、将下载好的hap包放入刚才解压的文件夹内&#xff08;假设hap包文件名为app.hap&#xff09; 四、连接好手机和电脑&#xff0c;手机需要打…
阅读更多...
Android APK组成编译打包流程详解

Android APK组成编译打包流程详解

Android APK&#xff08;Android Package&#xff09;是 Android 应用的安装包文件&#xff0c;其组成和打包流程涉及多个步骤和文件结构。以下是详细的说明&#xff1a; 一、APK 的组成 APK 是一个 ZIP 格式的压缩包&#xff0c;包含应用运行所需的所有文件。解压后主要包含以…
阅读更多...
自然语言处理：词频-逆文档频率

自然语言处理：词频-逆文档频率

介绍 大家好&#xff0c;博主又来给大家分享知识了。本来博主计划完成稠密向量表示的内容分享后&#xff0c;就开启自然语言处理中文本表示的讲解。可在整理分享资料的时候&#xff0c;博主发现还有个知识点&#xff0c;必须得单独拎出来好好说道说道。 这就是TF-IDF&#xf…
阅读更多...
esp8266 rtos sdk开发环境搭建

esp8266 rtos sdk开发环境搭建

1. 安装必要的工具 1.1 安装 Git Git 用于从远程仓库克隆代码&#xff0c;你可以从Git 官方网站下载 Windows 版本的安装程序。安装过程中可保持默认设置&#xff0c;安装完成后&#xff0c;在命令提示符&#xff08;CMD&#xff09;或 PowerShell 中输入git --version&#…
阅读更多...
pytest下放pytest.ini文件就导致报错：ERROR: file or directory not found: #

pytest下放pytest.ini文件就导致报错：ERROR: file or directory not found: #

pytest下放pytest.ini文件就导致报错&#xff1a;ERROR: file or directory not found: # 如下&#xff1a; 项目文件目录如下&#xff1a; pytest.ini文件内容&#xff1a; [pytest] addopts -v -s --alluredir ./allure-results # 自动添加的命令行参数&#xff1a;# -…
阅读更多...
Blender调整最佳渲染清晰度

Blender调整最佳渲染清晰度

1.渲染采样调高 512 2.根据需要 开启AO ,开启辉光 , 开启 屏幕空间反射 3.调高分辨率 4096x4096 100% 分辨率是清晰度的关键 , 分辨率不高 , 你其他参数调再高都没用 4.世界环境开启体积散射 , 可以增强氛围感 5.三点打光法 放在模型和相机45夹角上 白模 白模带线条 成品
阅读更多...
最新文章

Copyright @ 2022~2023