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。

示例代码