HTML5+CSS3 学习笔记 01

视频资源:https://www.bilibili.com/video/BV14J4114768?from=search&seid=3842566320098741425

视频记录 01-25

超文本标记语言  HTML HyperText Markup Language
 
  • 描述网页的一种语言
  • 不是编程语言,而是一种标记语言。
  • 标记语言是一套标记标签(markup tag)
 
超文本的2层含义
 
  • 可以加入图片、声音、动画、多媒体等内容(超越了文本限制)
  • 可以从一个文件跳转至另一个文件,与世界各地主机的文件连接(超链接文本)
 
常用浏览器
 
IE, Edge, Firefox, Chrome, Safari, Opera
 
浏览器内核
 
浏览器内核(渲染引擎):负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。
 
 
WEB标准
 
Web标准 是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。
 
遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外,还有其他优点...
 
例如:IE显示字体是16px,Chrome显示字体是8px,同样的内容在不同浏览器显示大小不同,造成体验不友好。遵循标准(统一为12px),用户体验会更好。
 
Web标准的构成
 
主要包括结构Structure, 表现 preentation, 行为behavior。
 
 
Web标准提出的最佳体验方案:结构、样式、行为相分离。
 
结构写到HTML中,表现写到CSS中,行为写到JavaScript中。
 
 
HTML基本结构标签
 
 
 
VScode 快捷键
 
alt + B: Open In Default Browser
 
alt + 加号键/减号键:增加/缩小字体
 
VScode插件
 
 
HTML代码解析
 
<!DOCTYPE>文档类型声明,作用就是告诉浏览器采用哪种HTML版本来显示网页。
 
<!DOCTYPE html> 
 
1. 当前页面采取HTML5版本来显示网页
2. 必须写在第一行
3. 不是HTML内容,是文档类型声明标签
 
<meta charset="UTF-8"/>
 
UTF-8 被称为万国码,基本包含了全世界所有国家需要用的字符。不用写成UTF8或者utf8,统一写成UTF-8。
 
HTML标签
 
标签语义:让页面结构清晰明了,指明该标签的用途。
 
标题
<h1>标题标签</h1>
<h1>标题一共六级选</h1>
<h2>文字加粗一行显</h2>
<h3>由大到小一次减</h3>
<h4>从重到轻随之变</h4>
<h5>语法规范书写后</h5>
<h6>具体效果刷新见</h6>
 
<p></p>段落标签
 
用于定义段落,将网页分成若干个段落。
 
文本在某个段落中会根据浏览器窗口大小自动换行。
 
段落与段落之间保有空隙。
 
<br/> 换行标签 (break的缩写)
 
单个标签
 
开始新的一行,不同于段落标签,段落间不会插入垂直距离。
 
<span>标签
 
没有语义,只是盒子,用来装内容。
 
span意为跨度、跨距。
 
一行可以放多个span,小盒子。
 
<div>标签
 
没有语义,只是盒子,用来装内容。
 
div是divison的缩写,表示分割、分区
 
一行只能放一个div,大盒子。
 
<div>abc</div>123

显示:

abc
123

<img /> 单标签

 
<img src="url"/>
 
src是<img>标签的必须属性,指定图像文件的路径和文件名。
 
alt 图片无法显示时,替换文字。
 
<img src="111" alt="我是pink老师"> 
 
<img src="111" alt="我是pink老师" title="我是pink老师思密达">
 
 
相对路径
 
 
绝对路径
 
目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。(网络上的绝对地址,地址固定。)
 
 
 
 
 
 
 
 
 
 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值