认识网页

问题1：网页由哪些部分构成？

文字、图片、音频、视频、超链接

问题2：我们看到的网页背后本质是什么？

前端程序员写的代码

问题3：前端的代码是通过什么软件转换成用户眼中的页面？

通过浏览器转化（解析和渲染）成用户看到的网页

常见五大浏览器

IE浏览器、火狐浏览器、谷歌浏览器、苹果电脑（Safari浏览器、（欧朋）Opera浏览器）

浏览器市场份额

谷歌占比最大

浏览器渲染通过浏览器内核（渲染引擎）

渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同的

什么是Web标准？

三个构成：html（结构），css（表现），JavaScript（行为）

HTML骨架结构由哪些标签组成？

html标签：网页的整体

head标签：网页的头部

body标签：网页的身体

title标签：网页的标题

开发工具：Visual Studio Code、Webstorm、Sublime、Dreamweaver、Hbuilder

快捷键：Vs Code中    Ctrl+/  注释

HTML标签与标签之间的关系可分为：

父子关系（嵌套关系）

<head>

　　<title></title>

</head>

兄弟关系（并列关系）

<head></head>

<body></body>

快捷键： Ctrl+D 选中一个内容按ctrl+d可以选中相同的内容

文本格式化标签介绍

场景： 需要让文字加粗、下划线、倾斜、删除线等效果

标签         说明　　　　　　　　标签  　　　　 说明

b　　　　加粗　　　　　　　  strong 　　　　加粗

u　　　　下划线　　　　　　　ins　　　　　下划线

i　　　　　倾斜　　　　　　　 em　　　　　倾斜

s　　　　删除线　　　　　　　del　　　　　删除线

语义：突出重要性的强调语境

路径分为：

绝对路径（了解）：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径（网址也叫绝对路径）

相对路径（常用）：

同级目录：当前文件和目标文件在同一目录中（./ ）

下级目录：目标在下级目录中(./文件夹名字/图)

上级目录：目标文件在上级目录中（../）

音频标签：

 <audio src="./music.mp3" controls></audio>
  属性名　　　　　　　　功能
　src　　　　　　　　音频的路径
controls　　　　　　显示播放的控件
autoplay 　　　　　自动播放（部分浏览器不支持）
loop　　　　　　　　循环播放
视频标签：
 <video src="./video.mp4"></video>
  属性名　　　　　　　　功能
　src　　　　　　　　视频的路径
controls　　　　　　显示播放的控件
autoplay 　　　　　自动播放（谷歌浏览器中需配合muted实现静音播放）
loop　　　　　　　　循环播放
链接标签
 <a href="https://www.baidu.com">跳转百度</a>
开发网站的初期，我们还不知到跳转地址的时候，href的值书写#
href: 跳转地址
target属性
属性值　　　　　　　　效果
_self　　　　　　　　默认值，在当前窗口中跳转（覆盖原网页）
_blank　　　　　　　在新窗口中跳转（保留原网页）
 

随机推荐

  1. Mybatis学习笔记【狂神说】

    环境 Jdk 1.8 Mysql 5.7 Maven 3.6.1 IDEA 回顾 JDBC Mysql java基础 Maven Junit SSM框架:都是有配置文件的.最好的学习方式:看官方文档. ...

  2. ubuntu18 电脑重启后登录后无法进入桌面

    ubuntu18 电脑重启后登录后无法进入桌面 应该是ubuntu桌面管理器gdm3和nvidia驱动冲突导致的 解决办法: 首先卸载已有的nvidia驱动 注意:在下载完驱动后,此时电脑没有驱动文件 ...

  3. 04_Linux完全卸载安装Mysql

    1.Linux环境完全卸载mysql相关文件: 完全卸载mysql相关文件:             yum remove mysql mysql-server mysql-libs compat-m ...

  4. 关于java业务限流组件的应用推广

    可参考的链接如下: 限流算法对比.网关限流实践总结(https://segmentfault.com/a/1190000020745218) 高并发下常见的限流算法(https://www.jians ...

  5. Spring的AOP源码解析（二）

    Spring AOP 源码解析 目录 Spring AOP 源码解析 前言 本文使用的调试代码 IOC 容器管理 AOP 实例 ProxyFactory 详解 基于注解的 Spring AOP 源码分 ...

  6. C++ 手动实现队列(queue) （课后作业版）

    #include <iostream> using namespace std; template <typename T> class Queue { public: Que ...

  7. dart 学习笔记

    1.dart 下载安装,vscode 安装dart ,coderunner等 2.dart语法 1)需要入口函数main,或者void(没有返回值) main 2)定义变量 var str='kkk' ...

  8. Android自动化用例编写

    java -jar appcrawler.jar<路径> --demo java -jar  appcrawler.jar<路径> \ -c example.yml \ --c ...

  9. 数据驱动之 python + requests + Excel

    数据驱动 是根据数据来测试的,如读取 excel表中的测试用例自动填写测试结果,发送测试报告 包括以下模块: 1.获取用例 2.调用接口 3.校验结果 4.发送测试报告 5.异常处理 6.日志模块 1 ...

  10. 推荐一个 python学习网站

    kaggle python课程: https://www.kaggle.com/learn/python 知乎有个博主在专栏放了课程的中文版: https://www.zhihu.com/people ...