HTML笔记(1)

介绍

  • 浏览器中内置了HTML的解析引擎,通过解析标记语言来展现网页;
  • HTML标签都是预定义好的;
  • Java工程师:后台代码的编写,和数据库打交道,把数据给网页前端的工程师;
  • 网页前端工程师:写HTML页面,它们拿到数据就可以把数据展现到页面上,呈现给用户;
  • 两类人联合起来开发软件的系统
  • W3C是万维网联盟:它们是定义标准的一个组织,它们规定一个网页由三部分组成,这三部分是网页的结构、网页的表现、以及网页的行为;分别对应了三种不同的语言来去定义这三种不同的组成部分。

HTML - 定义网页的结构

CSS - 定义网页的表现

JavaScript - 定义网页的行为

这三种语言被称为网页前端三剑客

基础标签

创建网页项目

新建模块(项目)→ 选择创建路径 → 编辑名称 → 创建目录 → 编辑目录名称为html → 创建html文件

在IDEA(Java工程师用)

不需要src目录,把它删去

在WebStorm(前端工程师用)

细节

注意

· 回车、换行、空白字符等都是不被页面所识别的,如需换行需要手动添加<br>标签。

  • · html要显示特殊字符,需要用特殊的转义字符。

图片、音频、视频标签

其他的音视频格式html暂时不支持

资源路径

1、绝对路径:完整路径

2、相对路径:(两个资源的)相对位置关系(*当前页面访问的路径;*当前资源访问的路径)

情况一:在同一目录下 ./a.jpg 或 a.jpg

页面访问:xxx(访问项目,怎么写无所谓)/html/02-图片音频视频.html

资源访问:xxx/html/a.jpg

情况二:在同一目录下的其他目录中 ./img/a.jpg 或 img/a.jpg

页面访问:xxx/html/02-图片音频视频.html

资源访问:xxx/html/img/a.jpg

情况三:资源所在的目录和页面所在的目录为同级 ../img/a.jpg

页面访问:xxx/html/02-图片音频视频.html

资源访问:xxx/img/a.jpg

需要找到页面的上一级目录(html),html目录和img目录在同一级,这时再通过img目录下找到资源(a.jpg),所以要通过html文件找到资源,就要首先找到它的上一级(用../表示,就到了html目录),再找同级的img,再拿资源就可以了,也就是 ../img/a.jpg

当资源改变路径时,webstorm会同步更改代码中引用的路径。

示例代码

总结

超链接标签

在页面内部跳转会用_self;跳转到新的页面会用_blank。

示例代码

相关推荐
职豚求职小程序7 小时前
易方达基金27秋招笔试|场次+考情全梳理
笔记
Swilderrr20 小时前
论文精读:《Directory-Aware Query and Maintenance in Vector Databases》
笔记·学习
SatanII20 小时前
K8s 存储与配置管理|Volume、ConfigMap、Secret 核心笔记
笔记·rpc·kubernetes
I'mChloe1 天前
飞牛NAS部署flatnotes实战:Docker、8080端口、Markdown笔记与固定地址访问
笔记·docker·容器
库玛西1 天前
外部排序全解析:败者树、置换-选择排序与最佳归并树
c语言·数据结构·c++·笔记·考研·算法
摇滚侠1 天前
《Java并发编程之美》第 2 章 并发编程的其他基础知识 阅读笔记 3
android·java·笔记
ss2731 天前
AI时代首先数据库-PostgreSQL实战笔记 | 18 PostgreSQL基本索引原理与创建
数据库·笔记·postgresql
qq_284274051 天前
电气控制笔记:常用低压电器符号原理与异步电动机点动、自锁、多地控制电路(含考点)
笔记·学习·自动化·制造
坤坤子吖1 天前
Linux 线程同步与互斥——条件变量与线程同步
linux·开发语言·c++·笔记·学习
乐橙开放平台1 天前
不用换摄像头,如何用乐橙把海康、大华、宇视统一到一个界面
笔记·物联网·自动化·音视频·智能家居