当前位置: 首页 > news >正文

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。

示例代码

http://www.lryc.cn/news/104709.html

相关文章:

  • 重新审视MHA与Transformer
  • Docker 全栈体系(七)
  • 【编程范式】聊聊什么是数据类型和范式的本质
  • 2023-08-01 python根据x轴、y轴坐标(数组)在坐标轴里画出曲线图,python 会调用鼎鼎大名的matlib,用来分析dac 数据
  • 小研究 - 主动式微服务细粒度弹性缩放算法研究(四)
  • 机器学习深度学习——softmax回归的简洁实现
  • CPU利用率过高解决思路
  • Redis(三)—— Redis基本的事务操作、Redis实现乐观锁
  • SQLI_LABS攻击
  • 如何查看 Chrome 网站有没有前端 JavaScript 报错?
  • JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)
  • 【项目方案】OpenAI流式请求实现方案
  • 华为数通HCIP-IP组播基础
  • STM32 SPI学习
  • 分布式缓存与数据库的一致性记录
  • vue3的语法
  • 【git合并分支自定义提交消息】
  • AttributeError: module ‘PyQt5.QtGui‘ has no attribute ‘QMainWindow‘
  • 基于Java+SpringBoot+Vue前后端分离电商项目
  • Rpc服务消费者(Rpc服务调用者)实现思路
  • FANUC机器人实现2个RO输出信号互锁关联(互补)的具体方法
  • 权威认可|云畅科技再次入选中国信通院「高质量数字化转型产品及服务全景图」
  • 爬虫小白-如何调试列表页链接与详情链接不一样并三种方式js逆向解决AES-ECB
  • Ubuntu 离线部署的常见操作
  • 什么是多运行时架构?
  • 【MySQL】mysql | linux | 离线安装mysqldump
  • 中国农村程序员学习此【JavaScript教程】购买大平层,开上帕拉梅拉,迎娶白富美出任CEO走上人生巅峰
  • 【Python】Web学习笔记_flask(2)——getpost
  • RabbitMQ 教程 | 第5章 RabbitMQ 管理
  • LLM微调 | Adapter: Parameter-Efficient Transfer Learning for NLP