2020-11-21第一周学习内容

语言: CN / TW / HK

HTML

1.元素

其他叫法:标签、标记

整体:element (元素)

元素=起始标记(begin tag) + 结束标记(end tag) + 元素内容 +元素属性

属性=属性名+属性值

属性的分类
1)局部属性:某些元素特有的属性
2)全局属性:所有元素通用

元素不能相互嵌套

元素有:父元素、祖先元素、后代元素、兄弟元素(拥有同一个父元素)

标准的文档结构

HTML:页面、HTML文档

<!DOCTYPE html> 文档声明:告诉浏览器当前文档使用的HTML标准是HTML5.
如果不写文档声明,将导致浏览器进入怪异渲染模式。

<html lang="en">  
</html>

<html></html>根元素,一个页面最多只能一个,并且该元素是所有其他元素的父元素或祖先元素
HTML5中没有强制要求书写该元素。

lang 属性:language,全局属性,表示该元素内部使用的文字是使用哪一种自然语言书写而成的

en 代表英语,如果要使用汉语,则应把en改为cmn-hans 中国官方语言 简体中文

<head></head>

文档头,文档头内部的内容,不会显示到页面上

<meta charset="UTF-8">

meta:文档的元数据:附加信息。

charet:指定页面内容编码
UTF-8 是Unicode 编码的一个版本

<title>Document</title>`  

网页标题

head 里的元素都不显示到页面中

<body></body>

文档体,页面上所有要参与显示的元素,都应该要放到文档体中。

2.语义化

什么是语义化

  1. 每一个HTML元素都有具体的含义
    比如:a元素:超链接
    p元素:段落
    h1元素:一级标题


  2. 所有元素与展示效果无关
    元素展示到页面的效果,应该由css决定
    因为浏览器带有默认的css样式,所以每个元素都有一些默认样式。

重要:选择什么元素,取决于内容的含义,而不是显示出的效果

3.文本元素

HTML5中支持的元素 参考HTML元素周期表
几个常见的文本元素

  1. h
    h1~h6:表示一级标题到六级标题
  2. P
    段落:paragraphs
  3. span [无语义]
    没有语义,仅用于样式的设置
  4. pre
    空白折叠:在源代码中的连续空白字符(空格、换行、制表Tab),在页面显示时,会被折叠为一个空格
    在pre元素内部出现的内容,会按照源代码格式显示到页面上。

在这里插入图片描述
在这里插入图片描述

4. a元素

超链接
文字链接

   <a href="https://baidu.com">
        百度
    </a>

图片链接

<a href="http://www.baidu.com">
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png">
</a>

实现结果:
在这里插入图片描述

较为常用的两个属性

href属性

hyper reference(引用) :通常表示跳转地址

1、跳转地址
2、跳转到某个锚点,锚链接 即一个页面的不同位置
id属性:全局属性 表示元素在文档中的唯一编号

target属性

表示跳转窗口位置。

target的取值:

_self:表示在当前页面窗口中打开,默认值
_blank:在新窗口中打开
_parent:在父窗框中打开文档
_top:在顶层窗口打开文档
在这里插入图片描述



链接分为:
1、普通链接
2、锚链接
3、功能链接
点击后,触发某个功能
锚链接实现:
在这里插入图片描述





在这里插入图片描述
在这里插入图片描述

功能链接:
执行JS代:javascript;
发送邮件:mailto;
要求用户计算机上安装有邮件发送软件:exchange


拨号:tel:
要求用户计算机上安装有拨号软件,或使用的是移动端访问
功能链接实现:
在这里插入图片描述
在这里插入图片描述



5.路径的写法

站内资源和站外资源

站内资源:当前网站的资源(自己的)

站外资源:非当前网站的资源(别人的)

绝对路径的格式:
url地址:

协议名://主机名:端口号/路径
schema://host:port/path

举例 https://www.baidu.com/s

http://127.0.0.1:5500/HTML (包含IP地址)

协议名 https、http、file(表示本地文件)

主机名:域名、IP地址

端口号:如果协议是http协议,默认端口号80;如果协议是https协议,默认端口号为443

当跳转目标和当前页面的协议相同时,可以省略协议

相对路径的格式:

以 ./ 开头, ./表示当前资源所在的目录

相对路径中:./可以省略

相对路径实现:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


6.其他几种元素

1)图片元素

img元素

image缩写,为空元素

src属性:(source) 书写路径(绝对路径或相对路径)

alt属性:当图片资源失效时,将使用该属性的文字代替图片
如果图片可以显示的话,则alt里的内容显示不出来

和a元素联用(超链接)
和map元素联用
和figure元素联用

代码实现:
在这里插入图片描述
在这里插入图片描述

2)多媒体元素

video
ontrols:控制控件的显示,取值只能为controls

某些属性,只有两种状态:
1、不写
2、取值为属性名,这种属性叫做布尔属性

布尔属性:在HTML5中,可以不用书写属性值

autoplay:布尔属性,自动播放
muted:布尔属性,静音播放
loop:布尔属性,循环播放
preload:视频在页面加载时进行
width:播放器宽度
height:播放器高度
src:要播放视 频的URL





audio

autoplay:布尔属性,自动播放
muted:布尔属性,静音播放
loop:布尔属性,循环播放
preload:音频在页面加载时进行
width:播放器宽度
height:播放器高度
src:要播放音频的URL





因为并非所有的浏览器都支持所有的媒体格式,所以可以指定多个不同的媒体来源。为此,不用在标签中指定src属性,而是使用一个或多个source元素

兼容性

1.旧版本的浏览器不支持这两个元素
2.不同的浏览器支持的音视频格式可能不一致

因为并非所有浏览器都支持audio和video标签,所以更好的解决办法是有备选内容

3)列表元素

无序列表(使用最多)

ul:unordered list

无序列表通常用于制作菜单 或 新闻列表。
在这里插入图片描述
在这里插入图片描述

有序列表

ol: ordered list (表示整个列表)
li: list item(子列表)
在这里插入图片描述
在这里插入图片描述


定义列表

通常用于一些术语的定义

dl : definition list

dt :definition title

dd :definition description
在这里插入图片描述

在这里插入图片描述

4)容器元素

容器元素:该元素代表一个块区域,内部用于放置其他元素

div元素(划分区域)

没有语义

语义化容器元素

header:通常用于表示页头,也可以用于表示文章的头部

footer:通常用于表示页脚,也可以用于表示文章的尾部

article:通常用于表示整篇文章

section:通常用于表示 文章的章节

aside:通常用于表示侧边栏

CSS

1. 常见的样式声明

  1. color 元素内部的文字颜色
  2. background-color 元素的背景元素
  3. font-size 元素内部文字的尺寸大小

单位:
1). px:像素 可简单的理解为文字的高度占多少个像素。
2). em:相对单位,相对于父元素的字体大小。
每个元素必须有字体大小,如果没有声明,则直接使用父元素的字体大小,如果没有父元素(html),则使用基准字号。
4. font-weight
表示文字粗细程度,可以取值数字,可以取值为预设值
> strong ,默认加粗
5. font-family
文字类型:
必须用户计算机存在的字体类型才有效
6. font-style
字体样式,通常用它设置斜体
7. text-decoration
文本修饰,文本加线
8. text-indent
表示首行文本缩进
9. line-height
每行文本的高度,该值越大,每行文本的距离越大
设置行高为容器的高度,可以让单行文本垂直居中
行高可以设置为纯数字,表示相对于当前元素的字体大小
10. width 宽度
11. height 高度
12. letter-space 文字间隙
13. text-align 元素内部文字的水平排列方式






















2. 选择器

选择器
选择器的作用:帮助你精准的选中你想要的元素

简单选择器

  1. ID选择器
  2. 元素选择器
  3. 类选择器
  4. 统配选择器
  5. 属性选择器
    根据属性名和属性值选中选择器
/* 选中所有具有href属性的元素 */
 [href]{
  color: aqua;
} 
  • 选中所有元素
 * {
   color: blueviolet;
} 

*选中特定元素

 [href="https://www.xinlang"]{
   color: blue;
} 
  1. 伪类选择器

选中某些元素的某种状态

1). link:超链接未被访问时的状态

2). visited:超链接访问过后的状态

3). hover :鼠标悬停状态

* 选中鼠标悬停时的a元素 */
 a:hover{
  color: red;
} 

4). active:激活状态,鼠标按下状态

 a:active{
  color: aquamarine;
} 
  1. 伪元素选择器
<p>
        上随处可见是<span>html</span>当初你的实力农村
 </p>
span::before{
  content:"《";
}
span::after{
  content:"》";
}

3.盒模型

box:盒子,每个元素在页面中都会生成一个矩形区域(盒子)

盒子模型:

  1. 行盒,display等于inline的元素
  2. 块盒,display等于block的元素

行盒在页面中不换行、快盒独占一行

浏览器默认样式表设置的块盒:容器元素、h1~h6、p

常见的行盒:span、a、img、video、audio

盒子的组成部分

无论是行盒、还是块盒、都有下面几个部分组成,从内到外分别是:

  1. 内容 content

width、height,设置的是盒子内容的宽高

内容部分通常叫做整个盒子的内容

称为内容盒 content-box

  1. 填充 padding

盒子边框到盒子内容的距离

padding-left、padding-right、padding-top、padding-bottom

padding:简写属性

padding:上、右、下、左

填充区+内容区= 填充盒 padding

  1. 边框 border

边框 = 边框样式 + 边框宽度 +边框颜色

边框样式:border-style
边框颜色:border-width
边框颜色:border-color

边框+填充区+内容区 = 边框盒 border-box

  1. 外边距 margin

边框到其他盒子的距离

margin-top、margin-left、margin-right、margin-bottom

div{
    width: 100px;
    height: 100px;
    background: #008c8c;
    border: 10px dashed red;
    padding:30px;
    
  }

在这里插入图片描述

比较行内元素、块元素、行内块元素

  1. 块元素特点:
    独占一行
    高度,宽度,外边距,内边距都可以控制
    默认宽度是父级宽度的100%
    是一个容器及盒子,里面可以放行内或者块元素
    文字类的元素如p,h1等里不能放其他元素




  2. 行内元素的特点:
    相邻行内元素在一行上,一行可以显示多个
    宽高直接设置是无效的
    默认宽度就是它本身内容的宽度
    只能容纳文本或其他行内元素



  3. 行内块元素的特点
    和相邻行内元素在一行上,但它们之间会有空白缝隙,一行可以显示多个
    默认宽度就是它本身内容的宽度
    宽高,外边距,内边距都可以控制


常规流

常规流布局

常规流、文档流、普通文档流、常规文档流

所有元素,默认情况下,都属于常规流布局

总体规则:块盒独占一行,行盒水平依次排列

包含块(containing block):每个盒子都有它的包含块,包含块决定了盒子的排列区域。

注:绝大部分情况下:盒子的包含块,为其父元素的内容盒
块盒

  1. 每个块盒的总宽度,必须刚好等于包含块的宽度

宽度的默认值为auto

margin的取值也可以是auto,默认值为0

auto:将剩余空间吸收掉

width吸收能力强于margin

若宽度、边框、内边距、外边距计算后,仍然有剩余空间,该剩余空间被marign-right全部吸收

在常规流中,块盒在其包含块中居中,可以定宽,然后左右marign设置为auto

  1. 每个块盒垂直方向上的auto值

height:auto,适应内容的宽度

marign:auto,表示0

  1. 百分比取值

padding、宽、marign可以取值为百分比

以上的所有百分比相对于包含块的宽度

高度的百分比:

1)包含块的高度为auto,子元素的高度设置取决于包含块的宽度,设置百分比无效
2)包含块的高度不取决于子元素的高度,百分比相对于父元素的宽度

  1. 上下外边距的合并

两常规流块盒:上下外边距相邻,会进行合并。

两个外边距都设置,则取最大值

分享到: