认识网页

问题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. python连接数据库系列

    1.Python连接MySQL 具体详情参考:MySQL笔记 Python连接MySQL需要借助pymysql,安装pymysql pip install pymysql 1.1 pymysql连接数 ...

  2. antdVue 重置select和input的样式 去掉蓝色换成灰色

    代码实现: <template> <div> <a-select mode="tags" style="width: 200px" ...

  3. python使用pysimplegui简单制作一个exe程序

    一.安装打包程序 控制台输入: pip install pysimplegui-exemaker -- 安装exe制作库 pip install PySimpleGUI -- 安装图形化界面编辑库 二 ...

  4. Unity流水账2:视频播放之Video Player

    https://blog.csdn.net/shiyuedyx/article/details/81170309

  5. 2015 for Mac PDF编辑软件

    ​ 开始前请先断开网络连接,断网,断网,断网! 开始前请先断开网络连接,断网,断网,断网! 开始前请先断开网络连接,断网,断网,断网! ​编辑 1.软件下载完成后,打开软件包如上图五个文件(第1个是安 ...

  6. ETCD 实现服务发现讲解

    租约:具有时间有效期,键绑定到租约后,当租约到期失效,绑定到的租约的键也会被删除. 创建租约 etcdctl lease grant 600 lease 694d81f509b7940a grante ...

  7. mybatis中xml新增一条数据获取自增id

    在insert的标签里加两个属性:useGeneratedKeys="true"         keyProperty="patentId"   ,这个key ...

  8. string中的stoi()函数

    1094 谷歌的招聘 (20分) 本题要求你编程解决一个更通用的问题:从任一给定的长度为 L 的数字中,找出最早出现的 K 位连续数字所组成的素数. 输入格式: 输入在第一行给出 2 个正整数,分别是 ...

  9. spdlog库和fmt库是否使用dll宏定义

    定义FMT_HEADER_ONLY 定义SPDLOG_COMPILED_LIB 使用fmt.dll 使用spdlog.dll NO NO YES NO YES NO NO NO NO YES YES ...

  10. 一加5T刷入魔趣

    0.准备工作 1.安装adb工具 2.下载twrp 3.5t系统包. 1.解锁bootloader 先进入原版系统,打开开发者选项,允许USB调试,勾选允许OEM解锁,高级重启选项 打开命令行输入: ...