前端与HTML

前端与HTML

什么是前端?

  • 解决GUI人机交互问题
  • 跨终端(PC/移动浏览器)(客户端小程序)(VR/AR等)
  • Web技术栈

前端工程师:利用web技术栈解决多端图形界面用户交互的工程师

前端技术栈

  • HTML(内容)
  • CSS(样式)
  • JS(行为)
  • 网络协议

image.png

前端需要关注的问题

  • Main:功能
  • 美观
  • 无障碍
  • 安全
  • 性能
  • 兼容性
  • 体验

前端的边界

随着Node.js的推出,各种技术不断出现,发展迅速,技术更新快,需要我们不断地更新我们的技术栈、拓宽技术视野

开发环境

  • 浏览器:IE、Chrome、Firefox、Safar
  • 编辑器:VSCode、Vim、WebStorm

什么是HTML?

  • HTML 不是一种编程语言,而是一种标记语言
  • HyperText Markup Language

image.png

image.png

完整的HTML页面(DOM树)

image.png

  • DOCTYPE 声明为 HTML5 文档
  • html标签元素是 HTML 页面的根元素
  • head标签元素包含了文档的元(meta)数据
  • title标签元素描述了文档的标题
  • body标签元素包含了可见的页面内容
  • h1标签元素定义一个大标题
  • p标签元素定义一个段落

doctype 声明是不区分大小写的,用来告知 Web 浏览器页面使用了哪种 HTML 版本。一定要写上 doctype ,就是为了防止浏览器的怪异模式,强制浏览器按照标准模式渲染网页!

HTML语法

  • 标签和属性不区分大小写,推荐小写
  • 空标签可以不闭合,比如input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以省略,比如required、readonly

标题h1-h6

在 HTML 文档中,标题很重要。标题(Heading)是通过h1-h6标签进行定义的。h1定义最大的标题。 h6定义最小的标题

<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美
索不达米亚文明的乌鲁克和拉尔萨,砖块上面不
均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术,公元868
年的《金刚经》是现存最古老的印刷品之一,使用
的技术即是木雕版印刷。</p>
<h2>应用</h2>
<p>...</p>

image.png

用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。

链接

HTML使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

默认情况下,链接将以以下形式出现在浏览器中:

  • 一个未访问过的链接显示为蓝色字体并带有下划线。
  • 访问过的链接显示为紫色并带有下划线。
  • 点击链接时,链接显示为红色并带有下划线。

注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。

链接的 HTML 代码类似这样:

<a href="https://www.bytedance.com/">字节跳动官网
</a><a href="https://www.bytedance.com/" target="_blank">字节跳动官网
</a>

href 属性描述了链接的目标。使用 target 属性,你可以定义被链接的文档在何处显示。

image.png

输入

多数情况下被用到的表单标签是输入标签 input。

输入类型是由 type 属性定义。

<input placeholder="请输入用户名"><input type="range"><input type="number" min="1" max="10"><input type="date" min="2018-02-10"><textarea>Hey</textarea>

image.png

内容划分

网页布局对改善网站的外观非常重要。

image.png

语义化是什么

  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML
  • 有序列表用ol;无序列表用ul
  • lang属性表示内容所使用的语言

谁在使用我们写的HTML

  • 开发者-修改、维护页面
  • 浏览器-展示页面
  • 搜索引擎-提取关键词、排序
  • 屏幕阅读器-给盲人读页面内容

传达内容,而不是样式!!!

如何做到语义化?

  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码

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

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

相关文章

CDGA|数据治理:安全如何贯穿数据供给、流通、使用全过程

随着信息技术的飞速发展&#xff0c;数据已经成为企业运营、社会管理和经济发展的核心要素。然而&#xff0c;数据在带来巨大价值的同时&#xff0c;也伴随着诸多安全风险。因此&#xff0c;数据治理的重要性日益凸显&#xff0c;它不仅仅是对数据的简单管理&#xff0c;更是确…

Lua 类管理器

Lua 类管理器 -- ***** Class Manager 类管理*****‘local ClassManager {}local this ClassManagerfunction ClassManager.Class(className, ...)print(ClassManager::Class)--print(className)-- 构建类local cls {__className className}--print(cls)-- 父类集合local …

rv1126物体检测 rkmedia、opencv……

整体码流流向&#xff1a; 因此代码也分为这几部分&#xff1a; VI&#xff1a;采集视频 配置视频采集信息 模型推理线程&#xff1a;获取VI码流、载入模型、进行模型推理、保存推理结果 画框线程&#xff1a;获取VI码流、获取推理结果、显示推理结果、输出码流到VENC VENC…

LeetCode-day25-2844. 生成特殊数字的最少操作

LeetCode-day25-2844. 生成特殊数字的最少操作 题目描述示例示例1&#xff1a;示例2&#xff1a;示例3&#xff1a; 思路代码 题目描述 给你一个下标从 0 开始的字符串 num &#xff0c;表示一个非负整数。 在一次操作中&#xff0c;您可以选择 num 的任意一位数字并将其删除…

如何使用C#快速创建定时任务

原文链接&#xff1a;https://www.cnblogs.com/zhaotianff/p/17511040.html 使用Windows的计划任务功能可以创建定时任务。 使用schtasks.exe可以对计划任务进行管理&#xff0c;而不需要编写额外代码 这里掌握schtasks /CREATE 的几个核心参数就可以快速创建计划任务 /SC …

vue3响应式转换常用API

响应式常用API ref 相关&#xff1a;toRef、toRefs、unRef只读代理&#xff1a;readonly判断相关&#xff1a;isRef、isReactive、isProxy、isReadonly3.3新增API&#xff1a;toValue ref相关 toRef&#xff1a;基于响应式对象的某一个属性&#xff0c;将其转换为 ref 值 i…

必修-场景题

场景题 1. 树遍历二叉树三叉树 2. 并发问题架构设计前端后端NginxSpring Cloud Gateway和限流的依赖&#xff1a; 处理优惠券的缓存逻辑&#xff1a;处理优惠卷HTTP请求&#xff1a;实现令牌桶算法请求限流一秒 用Resilience4j实现降级策略在 application.yml 或 application.p…

论文总结:A Survey on Evaluation of Large Language Models-鲁棒性相关内容

A Survey on Evaluation of Large Language Models 只取了鲁棒性相关的内容 LLMs&#xff1a;《A Survey on Evaluation of Large Language Models大型语言模型评估综述》理解智能本质(具备推理能力)、AI评估的重要性(识别当前算法的局限性设 3.2.1 Robustness鲁棒性&#xf…

Gitlab以及分支管理

一、概述 Git 是一个分布式版本控制系统&#xff0c;用于跟踪文件的变化&#xff0c;尤其是源代码的变化。它由 Linus Torvalds 于 2005 年开发&#xff0c;旨在帮助管理大型软件项目的开发过程。 二、Git 的功能特性 Git 是关注于文件数据整体的变化&#xff0c;直接会将文件…

php将数字转为中文汉字

记录&#xff1a;php将数字转为中文汉字 if (!function_exists(num_to_cn_money)) {// 金额数字转汉字function num_to_cn_money($num, $mode true, $sim false){if (!is_numeric($num)) return 含有非数字非小数点字符&#xff01;;$char $sim ? array(零, 一, 二, 三, 四…

HTTP模块(二)

HTTP 设置 HTTP 响应报文 HTTP报文常见属性&#xff1a; const http require(http);const server http.createServer((request, response) > {// 设置请求状态码 2xx 4xx 5xxresponse.statusCode 200;// 设置请求描述 了解即可response.statusMessage hello// 指定响…

谷粒商城实战笔记-59-商品服务-API-品牌管理-使用逆向工程的前后端代码

文章目录 一&#xff0c; 使用逆向工程生成的代码二&#xff0c;生成品牌管理菜单三&#xff0c;几个小问题 在本次的技术实践中&#xff0c;我们利用逆向工程的方法成功地为后台管理系统增加了品牌管理功能。这种开发方式不仅能快速地构建起功能模块&#xff0c;还能在一定程度…

uni-app声生命周期

应用的生命周期函数在App.vue页面 onLaunch:当uni-app初始化完成时触发&#xff08;全局触发一次&#xff09; onShow:当uni-app启动&#xff0c;或从后台进入前台时显示 onHide:当uni-app从前台进入后台 onError:当uni-app报错时触发,异常信息为err 页面的生命周期 onLoad…

如何使用RESTful API构建 web 应用程序。

RESTful API&#xff08;Representational State Transferful Application Programming Interface&#xff09;是一种架构风格&#xff0c;用于设计网络应用程序的 API。它基于 HTTP 协议&#xff0c;使用不同的 HTTP 动词&#xff08;GET、POST、PUT、DELETE&#xff09;执行不…

rust 初探 -- 枚举和模式匹配

rust 初探 – 枚举和模式匹配 定义枚举 enum IpAddrKind {// 将数据附加到枚举的变体中// - 不需要额外使用 struct// - 每个变体可以拥有不同的类型以及关联的数据量V4(String), V6(String), }可以使用 impl 为枚举定义方法 enum IpAddrKind {a,b(String),c{x: i32, y: i32}…

Linux-安装VMware-01

一、认识linux Linux 是一个开源的类 Unix 操作系统&#xff0c;由林纳斯托瓦兹&#xff08;Linus Torvalds&#xff09;于1991年首次发布。Linux 是许多计算机硬件的底层操作系统&#xff0c;特别是服务器、嵌入式系统和个人电脑。它支持多种架构&#xff0c;包括 x86、x64、A…

算法学习笔记(8.8)-多重背包

目录 Question: 思路解析&#xff1a; 代码示例 多重背包的优化问题&#xff1a; 1.二进制优化 代码示例&#xff1a; 2.单调队列优化(滑动窗口) 代码示例 Question: 4. 多重背包问题 I - AcWing题库https://www.acwing.com/problem/content/description/4/ 多重背包简单来说其…

eqmx上读取数据处理以后添加到数据库中

目录 定义一些静态变量 定时器事件的处理器 订阅数据的执行器 处理json格式数据和将处理好的数据添加到数据库中 要求和最终效果 总结一下 定义一些静态变量 // 在这里都定义成全局的 一般都定义成静态的private static MqttClient mqttClient; // mqtt客户端 private s…

springboo 整合 redis

springBoot 整合 redis starter启动依赖。—包含自动装配类—完成相应的装配功能。 引入依赖 <!--引入了redis整合springboot 的依赖--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis&…

Ubuntu22.04安装Go语言的几种方式

在 Ubuntu 22.04 上安装 Go 语言可以通过几种不同的方法&#xff0c;以下是两种常见的安装方法&#xff1a; 方法1&#xff1a;使用 go 官方安装脚本 打开终端。 下载 Go 语言的安装脚本&#xff1a; curl -O https://go.dev/dl/go1.22.5.linux-amd64.tar.gz请检查 Go 官方网…