Javaweb(1)html、css、js

注:图来自黑马

一、HTML(超文本标记语言)

HTML 是网页的 “骨架”,负责定义页面的结构和内容,通过标签(tag)描述文本、图片、链接等元素。

1. 基础结构
  • 文档声明<!DOCTYPE html>(告诉浏览器这是 HTML5 文档)。
  • 根标签<html> 包裹整个文档,包含 <head> 和 <body>
    • <head>:存放文档元信息(不直接显示在页面),如 <title>(标题)、<meta>(字符集、视口等)、<link>(引入外部资源)、<style>(内部 CSS)、<script>(内部 JS)。
    • <body>:存放页面可见内容(文本、图片、按钮等)。
2. 核心标签
  • 文本标签
    • 标题:<h1>-<h6>(级别从高到低)。
    • 段落:<p>
    • 行内文本:<span>(无默认样式,用于局部样式)、<strong>(加粗,强调语义)、<em>(斜体,强调语义)。
  • 媒体标签
    • 图片:<img src="路径" alt="替代文本" width="宽度" height="高度">alt 用于加载失败时显示,SEO 友好)。
    • 视频:<video src="路径" controls autoplay loop>controls 显示播放控件,autoplay 自动播放)。
    • 音频:<audio src="路径" controls>
  • 链接与导航
    • 链接:<a href="目标地址" target="_blank">文本</a>target="_blank" 新窗口打开)。
    • 锚点:<a href="#id名">跳转到指定位置</a> + 目标元素 <div id="id名">
  • 列表
    • 无序列表:<ul><li>项1</li><li>项2</li></ul>(默认圆点标记)。
    • 有序列表:<ol><li>项1</li><li>项2</li></ol>(默认数字标记)。
    • 定义列表:<dl><dt>术语</dt><dd>解释</dd></dl>
  • 表单(交互核心)
    • 表单容器:<form action="提交地址" method="get/post">method 规定提交方式)。
    • 输入框:<input type="text/number/email/password/checkbox/radio/file">type 决定输入类型)。
    • 下拉框:<select><option value="值">选项</option></select>
    • 文本域:<textarea rows="行数" cols="列数"></textarea>(多行文本输入)。
    • 按钮:<button type="submit/reset/button">submit 提交表单,reset 重置,button 普通按钮)。
  • 语义化标签(HTML5 新增)
    增强代码可读性和 SEO,如 <header>(页头)、<nav>(导航)、<main>(主要内容)、<article>(独立文章)、<section>(区块)、<footer>(页脚)、<aside>(侧边栏)。
3. 其他重要概念
  • 注释<!-- 注释内容 -->(不执行,用于说明代码)。
  • 属性:标签的附加信息(如 idclasssrchref),id 唯一,class 可复用(用于 CSS/JS 选择)。

例子:

<!DOCTYPE html>
<html lang="zh-CN">
<head><met

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

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

相关文章

MQTT:Dashboard数据集成(待补充)

目录一、工作原理二、基本使用三、连接器基本使用一、工作原理 数据集成使用sink和source组件与外部数据系统对接。 sink&#xff1a;用于将消息发送到外部数据系统&#xff0c;例如MySQL、Kafka或Http服务等。source&#xff1a;用于从外部数据系统接收消息&#xff0c;例如…

VisionMoE本地部署的创新设计:从架构演进到高效实现

本地部署VisionMoE的时代需求 在人工智能技术飞速发展的今天&#xff0c;视觉语言模型(Vision-Language Models, VLMs)已成为多模态理解的核心工具。然而&#xff0c;传统的大型视觉语言模型主要依赖云端GPU集群进行部署和推理&#xff0c;这不仅带来了高昂的运营成本&#xf…

机试备考笔记 8/31

2025年8月8日 小结&#xff1a;省流&#xff0c;写了俩道巨简单的&#xff08;被卡好久的传参指针和指针的引用的区别&#xff09;&#xff0c;一题递归&#xff08;意满&#xff09;&#xff1b;这笔记还是0809写的&#xff0c;啧&#xff0c;今天可能不写了&#xff0c;明天也…

java9学习笔记-part2

进程 API在 Java 9 之前&#xff0c;Process API 仍然缺乏对使用本地进程的基本支持&#xff0c;例如获取进程的 PID 和所有者&#xff0c;进程的开始时间&#xff0c;进程使用了多少 CPU 时间&#xff0c;多少本地进程正在运行等。Java 9 向 Process API 添加了一个名为 Proce…

AI智能编程工具汇总

AI智能编程工具汇总 以下是一份关于主流大模型开发工具的综合介绍&#xff0c;涵盖 Gemini CLI、Qwen-Code、Kimi K2 等关键工具的功能特性、安装方式与使用建议。 &#x1f31f; Gemini CLI 开发者&#xff1a;Google DeepMind 简介&#xff1a;命令行工具&#xff0c;用于调…

算法_python_牛客华为机试笔记_01

刷题是必须的&#xff0c;通过刷题以及别人对题目的解析&#xff0c;可以快速理解&#xff0c;提高效率。 00_题库与参考视频 华为机试_在线编程_牛客网 HJ3 明明的随机数_哔哩哔哩_bilibili 这套华为机试是华为笔试面试机考在线练习&#xff0c;共138道题&#xff0c;目前…

Java基础-完成局域网内沟通软件的开发

目录 案例要求&#xff1a; 实现思路&#xff1a; itheima-chat-server包 src com.itheima Constant类&#xff1a; Server类: ServerReaderThread类: itheima-chat-system包 src com.itheima.ui ChatEntryFrame类&#xff1a; ClientChatFrame类: ClientReaderTh…

windows内核研究(内存管理-线性地址的管理)

内存管理线性地址的管理 进程空间的地址划分分区x86 32位Windows空指针赋值区0x00000000 - 0x0000FFFF用户模式区0x00010000 - 0x7FFEFFFF64KB禁入区0x7FFF0000 - 0x7FFFFFFF内核0x80000000 - 0xFFFFFFFF线性地址有4GB&#xff0c;但是并不是所有的地方都能访问&#xff08;这里…

【问题解决】使用patch-package修改node-models中的源码

文章目录一、应用场景二、patch-package 和 postinstallpatch-packagepostinstall三、操作步骤1、使用yarn安装patch-package和postinstall-postinstall2、修改package.json3、修改node-model中源码、保存。4、找到修改文件对应的包名5、使用git将新增的patches文件同步到仓库6…

当配置项只支持传入数字,即无法指定单位为rem,需要rem转px

您好&#xff01;针对您 Vue 3 Element Plus 的技术栈&#xff0c;要优雅且符合大厂规范地解决这个问题&#xff0c;最佳实践是创建一个响应式的 Composition API (组合式函数)。 这个方法完全遵循 Vue 3 的设计哲学&#xff0c;具有高内聚、低耦合、可复用、类型安全&#xf…

谷歌搜索 sg_ss 逆向分析

声明: 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01;部分python代码sg_ss cp.call(get_sg_…

一个“加锁无效“的诡异现象

加锁了还出问题&#xff1f;从"点击过快"到"状态可控"&#xff1a;多线程共享变量的并发陷阱与实战对策详情如下&#xff1a;在服务端开发中&#xff0c;多线程并发处理客户端请求是提升系统吞吐量的常见手段。最近有位开发者朋友遇到了一个令人费解的问题…

液体泄漏识别误报率↓76%:陌讯多模态融合算法实战解析

原创声明本文为原创技术解析&#xff0c;核心技术参数与架构设计引用自《陌讯技术白皮书》&#xff0c;禁止未经授权的转载与篡改。一、行业痛点&#xff1a;液体泄漏识别的现实挑战在化工生产、食品加工、仓储物流等场景中&#xff0c;液体泄漏的实时监测是保障安全生产的关键…

Y9000P跑开源模型(未完成)

环境信息 1、Y9000笔记本 2、1T空白硬盘 3、ubunut24.04桌面版 一、环境初始化 第一部分&#xff1a;系统初始化 1、安装基础软件 apt-get update apt-get -y install openssh-server openssh-client apt-utils freeipmi ipmitool sshpass ethtool zip unzip nano less git ne…

ARM体系结构

ARM体系结构 编程原理 从源代码到CPU执行过程 #mermaid-svg-M4xemCxDjIQVNNnW {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:14px;fill:#333;}#mermaid-svg-M4xemCxDjIQVNNnW .error-icon{fill:hsl(220.5882352941, 100%, 98.3333333333%);}#mer…

基于SpringBoot的高校社团管理系统的设计与实现(代码+LW文档+远程运行)

&#x1f4af;博主&#xff1a;✌全网拥有50W粉丝、博客专家、全栈领域优质创作者、平台优质Java创作者、专注于Java技术领域和毕业项目实战✌&#x1f4af; &#x1f497;开发技术&#xff1a;SpringBoot、Vue、SSM、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、…

F5发布业界首创集成式应用交付与安全平台,开启ADC 3.0新时代

在数字化转型加速与AI技术蓬勃发展的今天&#xff0c;企业对应用性能与安全的需求正经历革命性变革。传统应用架构已难以满足现代混合多云环境与AI驱动型业务场景的严苛要求。全球领先的应用安全和交付服务提供商F5&#xff08;NASDAQ: FFIV&#xff09;&#xff0c;持续推动 F…

SELinux 入门指南

SELinux(Security-Enhanced Linux)是 Linux 内核的一个安全模块&#xff0c;它提供了一种强制访问控制&#xff08;Mandatory Access Control, MAC&#xff09;机制。与传统的 Linux 自主访问控制&#xff08;Discretionary Access Control, DAC&#xff09;不同&#xff0c;SE…

ARMv8 MMU页表格式及地址转换过程分析

1.简介 CPU发出的虚拟地址经过MMU转换后得到物理地址&#xff0c;然后使用物理地址访问真实的硬件。虚拟地址和物理地址的映射关系保存在页表中&#xff0c;MMU需要遍历页表&#xff0c;才能将虚拟地址转换成物理地址。ARM64现在有两种大小的页表描述符&#xff0c;分别是ARMv8…

数据结构---二叉树(概念、特点、分类、特性、读取顺序、例题)、gdb调试指令、时间复杂度(概念、大O符号法、分类)

一、二叉树1、树1&#xff09;概念 树是 n(n > 0) 个结点的有限集合。若 n0 &#xff0c;为空树。在任意一个非空树中&#xff1a;&#xff08;1&#xff09;有且仅有一个特定的根结点&#xff1b;&#xff08;2&#xff09;当 n>1 时&#xff0c;其余结点可分为 …