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

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【QT问题】Ubantu环境下解决已经下载好的qt怎么添加或卸载其他组件

【QT问题】Ubantu环境下解决已经下载好的qt怎么添加或卸载其他组件

1、找到自己qt的安装目录->双击打开MaintenanceTool.exe 2、点击next进去&#xff0c;此时需要登录qt账户&#xff08;如果没有去官网注册一个&#xff0c;很快且免费&#xff09; 我这里随便填的账号&#xff0c;如果是正确的下面next就能够点击。 这里随便提一下&#xf…
阅读更多...
TaskBuilder设置排序条件

TaskBuilder设置排序条件

在整个向导的最后一步&#xff0c;可以设置是否按指定字段的值对查询结果进行排序&#xff0c;支持正序和倒序两种排序方式。如果没有设置任何排序字段&#xff0c;则默认按数据库里现有数据记录的实际存储的先后顺序排序。如果设置了多个排序条件&#xff0c;则按这些条件从上…
阅读更多...
Taylor龙哥库塔。各种稳定性

Taylor龙哥库塔。各种稳定性

——Taylor 龙额库塔 需要利用&#xff1a; 1.k1f 2.b21a1 3.k1fuffu | | 稳定区域 | | | | | | BDFq 方法是 A(φq)-稳定的&#xff0c;其中 φ1 φ2 90◦, φ3 ≈86.03◦, φ4 ≈73.35◦, φ5 ≈51.84◦, 和 φ6 ≈17.84◦; 参见 2 3. | | | WSBDFq 方法是 A( ˜ φ…
阅读更多...
AI如何通过大数据分析提升制造效率和决策智能化

AI如何通过大数据分析提升制造效率和决策智能化

人工智能&#xff08;AI&#xff09;与大数据技术的融合&#xff0c;不仅重新定义了生产流程&#xff0c;更让企业实现了从“经验驱动”到“数据智能驱动”的跨越式升级。 从“模糊经验”到“精准洞察”​​ 传统制造业依赖人工经验制定生产计划&#xff0c;但面对复杂多变的市…
阅读更多...
Windows docker下载minio出现“Using default tag: latestError response from daemon”

Windows docker下载minio出现“Using default tag: latestError response from daemon”

Windows docker下载minio出现 Using default tag: latest Error response from daemon: Get "https://registry-1.docker.io/v2/": context deadline exceeded 此类情况&#xff0c;一般为镜像地址问题。 {"registry-mirrors": ["https://docker.re…
阅读更多...
【前端基础】Day 4 CSS盒子模型

【前端基础】Day 4 CSS盒子模型

目录 1. 盒子模型 1.1 盒子模型布局 1.2 盒子模型组成 1.3 边框 1.4 表格细线边框 1.5 边框会影响盒子实际大小 1.6 内边距 1.7 外边距 1.8 外边距合并 1.9 清除内外边距 2. PS基本操作 3. 综合案例 3.1 案例1 3.2 案例2-快报模块 4. 圆角边框 5. 盒子阴影 6…
阅读更多...
DeepSeek R1 + 飞书机器人实现AI智能助手

DeepSeek R1 + 飞书机器人实现AI智能助手

效果 TFChat项目地址 https://github.com/fish2018/TFChat 腾讯大模型知识引擎用的是DeepSeek R1&#xff0c;项目为sanic和redis实现&#xff0c;利用httpx异步处理流式响应&#xff0c;同时使用buffer来避免频繁调用飞书接口更新卡片的网络耗时。为了进一步减少网络IO消耗&…
阅读更多...
Go红队开发—并发编程

Go红队开发—并发编程

文章目录 并发编程go协程chan通道无缓冲通道有缓冲通道创建⽆缓冲和缓冲通道 等协程sync.WaitGroup同步Runtime包Gosched()Goexit() 区别 同步变量sync.Mutex互斥锁atomic原子变量 SelectTicker定时器控制并发数量核心机制 并发编程阶段练习重要的细节端口扫描股票监控 并发编程…
阅读更多...
一键导出数据库表到Excel

一键导出数据库表到Excel

工作中&#xff0c;我们经常需要将数据库表导出到Excel&#xff0c;通常我们会用数据库编辑器之类的工具提供的导出功能来导出&#xff0c;但是它们的导出功能通常都比较简单。 这篇文章将介绍一种简单易用并且功能强大的导出方法。 新增导出 打开的卢导表工具&#xff0c;新…
阅读更多...
《深度学习实战》第4集：Transformer 架构与自然语言处理（NLP）

《深度学习实战》第4集：Transformer 架构与自然语言处理（NLP）

《深度学习实战》第4集&#xff1a;Transformer 架构与自然语言处理&#xff08;NLP&#xff09; 在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;Transformer 架构的出现彻底改变了传统的序列建模方法。它不仅成为现代 NLP 的核心&#xff0c;还推动了诸如 BERT、…
阅读更多...
jeecgboot项目idea启动项目（二）

jeecgboot项目idea启动项目（二）

文章目录 一、IntelliJ IDEA1.安装2.配置maven3.配置jdk 二、IDEA启动项目三、IDEA2024.1.4破解 一、IntelliJ IDEA ‌IntelliJ IDEA是一款由JetBrains开发的集成开发环境&#xff08;IDE&#xff09;&#xff0c;主要用于Java和Kotlin编程&#xff0c;但也支持多种其他编程语…
阅读更多...
fody引用c++的dll合并后提示找不到

fody引用c++的dll合并后提示找不到

fody引用c的dll合并后提示找不到 解决方案&#xff1a; 在 FodyWeavers.xml 文件中添加配置 CreateTemporaryAssemblies‘true’ 官方文档&#xff1a;https://github.com/Fody/Costura <Weavers xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance" xsi:noN…
阅读更多...
DeepSeek R1满血+火山引擎详细教程

DeepSeek R1满血+火山引擎详细教程

DeepSeek R1满血火山引擎详细教程 一、安装Cherry Studio。 Cherry Studio AI 是一款强大的多模型 AI 助手,支持 iOS、macOS 和 Windows 平台。可以快速切换多个先进的 LLM 模型,提升工作学习效率。下载地址 https://cherry-ai.com/ 认准官网&#xff0c;无强制注册。 这…
阅读更多...
TP-LINK路由器如何设置网段、网关和DHCP服务

TP-LINK路由器如何设置网段、网关和DHCP服务

目标 ①将路由器的网段由192.168.1.XXX改为192.168.5.XXX ②确认DHCP是启用的&#xff0c;并将DHCP的IP池的范围设置为排除自己要手动指定的IP地址&#xff0c;避免IP冲突。 01-复位路由器 路由器按住复位键10秒以上进行重置操作 02-进入路由器管理界面 电脑连接到路由器&…
阅读更多...
【C/C++】如何求出类对象的大小----类结构中的内存对齐

【C/C++】如何求出类对象的大小----类结构中的内存对齐

每日激励&#xff1a;“不设限和自我肯定的心态&#xff1a;I can do all things。 — Stephen Curry” 绪论​&#xff1a; 通过本章你能具体的了解到&#xff0c;如何计算出一个类的大小&#xff0c;并且了解其中到底是如何算的以及了解到为什么需要内存对齐这种算&#xff0…
阅读更多...
鸿蒙开发第4篇__关于在鸿蒙应用中使用Java语言进行设计

鸿蒙开发第4篇__关于在鸿蒙应用中使用Java语言进行设计

本博文很重要 HarmonyOS从 API8 开始不再支持使用Java作为开发语言&#xff0c;未来的新功能将在ArkTS中实现. API 8对应的是HarmonyOS 3.0.0版本。请看下图&#xff1a; 因此&#xff0c; 读者如果看到类似《鸿蒙应用程序开发》(2021年版本 清华大学出版计)书 还使用Java语言…
阅读更多...
【图文详解】论文《Attention Is All You Need》中位置嵌入（Positional Encoding）的流程和作用

【图文详解】论文《Attention Is All You Need》中位置嵌入（Positional Encoding）的流程和作用

文章目录 前言一、位置嵌入&#xff08;Positional Encoding&#xff09;的流程二、位置嵌入的作用三、为什么采用正弦和余弦函数四、位置嵌入示例五、结论 前言 亲爱的家人们&#xff0c;创作很不容易&#xff0c;若对您有帮助的话&#xff0c;请点赞收藏加关注哦&#xff0c…
阅读更多...
SpringBoot 使用 spring.profiles.active 来区分不同环境配置

SpringBoot 使用 spring.profiles.active 来区分不同环境配置

很多时候&#xff0c;我们项目在开发环境和生产环境的配置是不一样的&#xff0c;例如&#xff0c;数据库配置&#xff0c;在开发的时候&#xff0c;我们一般用测试数据库&#xff0c;而在生产环境&#xff0c;我们要用生产数据库&#xff0c;这时候&#xff0c;我们可以利用 p…
阅读更多...
Android 常用命令和工具解析之存储相关

Android 常用命令和工具解析之存储相关

1 基本概念 2 命令解读 2.1 adb shell df df 命令主要用于需要检查文件系统上已使用和可用的磁盘空间的数量。如果没有指定文件名&#xff0c;则显示在当前所有挂载的文件系统上可用的空间。其原理是从proc/mounts 或 /etc/mtab 中检索磁盘信息。 注意&#xff1a;df命令并…
阅读更多...
基于springboot+vue的融合多源高校画像数据与协同过滤算法的高考择校推荐系统

基于springboot+vue的融合多源高校画像数据与协同过滤算法的高考择校推荐系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023