认识网页

问题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. .netcore部署linux、国产化环境

    前言: 本文基于centos7.9操作系统,服务器x86/x64,所有操作在虚拟机中操作,记录部署过程中出现的问题,在此记录解决方案. 查看系统版本命令: cat/etc/redhat-release ...

  2. HTML、CSS笔记（一）

    垂直对齐图像文字 vertical-align:text-top; 图像的顶部与同一行中最高的图像或文本的顶部对齐 <img src="images/cake01.jpg" ...

  3. vue学习 第二天 CSS基础

    CSS: 层叠样式表  ( Cascading Style Sheets ) 的简称 1.css简介 1)也是一种标记语言 2)主要用来设置html页面中,标签的样式. 3)css美化了html页面, ...

  4. java springboot项目树结构递归查询

    记录工作 本文记录树结构递归查询,像菜单栏和部门 首先需要一张表 CREATE TABLE `sys_dict` ( `id` int NOT NULL AUTO_INCREMENT, `parent ...

  5. SpringBoot 自定义启动的logo（即banner）

    1.自定义输出banner样式 推荐生成网站 http://patorjk.com/software/taag/ https://www.bootschool.net/ascii-art 2.配置 A ...

  6. 快速替换jar包class文件的方法

    stetp1:jar -tvf *.jar | grep *.class 查找jar包中,class文件所在的具体路径stetp2:jar -xvf *.jar */*/*/*.class 当前目录下 ...

  7. Java脚本操作mysql和接口

    一.Java操作MySQL 1.插入insert 1 import java.sql.*; 2 import java.util.UUID; 3 4 public class BigData { 5 ...

  8. HCIP-ICT实战进阶08-以太网链路的聚合和集群

    HCIP-ICT实战进阶08-以太网链路的聚合和集群 1 网络可靠性需求 网络可靠性可以从设备.链路多个层面实现, 保持当前设备或链路出现单点或者多点故障时保证网络服务不间断的能力. 网络可靠性 设备 ...

  9. Selenium私房菜系列8 -- 玩转Selenium Server【OO】

    本篇主要是想更进一步介绍Selenium Server的工作原理,这次我们从Selenium Server的交互模式开始. 在<第一个Selenium RC测试案例>中,我们以命令&quo ...

  10. Postman 测试 Web Service 和 WCF

    一.postman 测试web service(1)设置url http://www.oorsprong.org/websamples.countryinfo/countryinfoservice.w ...