HTML+CSS基础

基本概念

web标准

web标准是由w3c和其他标准化组织制定的一系列标准的集合

html【结构】

被称为“超文本标记语言”
用于描述网页的一种语言（标记语言）

html文档结构包括三部分：

①'html'标签

告知浏览器其为一个html文档，所有的标签都写入其内部

②'head'标签
(1 'head'：
文档类型

有 'HTML5'、'HTML4'、'XHTML'之分
<!DOCTYPE>
文档类型的声明各有不同，不写，默认为HTML5

(2 'title' ：展示在浏览器标签当中的标题
(3 'meta' ：用于描述html网页文档的属性

‘为【单标签】’
为文档的最基本的元信息，如：文档字符集，使用语言、作者基本信息以及对关键词和网页等级的限定【使搜索引擎能首先搜索相关信息时能被优先搜索到】

注意：没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。在XHTML、XML以及未来版本的 HTML 中，所有元素都必须被关闭。在开始标签中添加斜杠，比如<br/>，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使 <br> 在所有浏览器中都是有效的，但使用 <br/> 其实是更长远的保障。

③'body'标签

放入主体内容，由很多的标签构成

标签

分为单标签和双标签，
且有很多种标签类型：
以下例举部分：
（1）'标题标签'

点击查看代码 
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>

（2）'横线标签'
点击查看代码 
<hr>

（3）'段落标签'
点击查看代码 
<p>这是一个段落</p>

（4）图像标签
点击查看代码 
<img scr="图像的Url【即链接】" alt="图像的替代文本" title="鼠标悬停时显示这句话" width=300>
或者：
<img scr="图像的Url【即链接】" alt="图像的替代文本" title="鼠标悬停时显示这句话" width="30%">

还要更多的属性可以在里面去设置，但是一般是不推荐的，因为都是可以使用css来设置这些样式的

（5）链接标签

点击查看代码 
<a href="https://www.cnblogs.com/ThunderLEI/">This is a link</a>

（6）换行标签
点击查看代码 
<br>

(7)文本标签
点击查看代码 
<font size="6">这是6号字体文本</font>

除此之外，还有更多的常用标签，可以在需要时查文档
菜鸟教程HTML

css【表现】

选择器

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
如下图所示：选择了id为para1的文本，并进行了样式的调整
image

class 选择器

也叫“类选择器”，能够在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示

.类名{ }代表对整个类进行样式设定
而 h1.类名{ }则代表对所有该类的h1标签进行样式设定
具体见下图例子

image

对一个内容来说，想要使用多个 class 选择器可以使用空格分开：
image

CSS创建

插入样式表的方法有三种:

  • 外部样式表(External style sheet)
  • 内部样式表(Internal style sheet)
  • 内联样式(Inline style)
1.外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
image

2.内部样式表

image

3.内联样式

image

盒子模型

image

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像


    【边框】简写属性：
    image


    其他的简写同理（margin外边距、Padding填充、）:
    image

其他的CSS细节见：其他CSS教程

js（Dom+ES）【行为】

基础概念

JavaScript：

简称js，是一种脚本程序设计语言，常常作为浏览器脚本语言，主要用途是与用户互动，以及操作DOM，因此js是单线程，以此避免了同时操作同一个DOM的矛盾问题。
所以所有 JavaScript 版本的“多线程”都是用单线程模拟的，所有的 JavaScript 多线程都是纸老虎
“单线程” “异步” “任务队列” “事件循环Event Loop”

javascript的执行机制

所有任务可以分成两种，一种是同步任务(synchronous)，另一种是异步任务(asynchronous)。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"(task queue)的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

image

  • 同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。

  • 当Event Table中指定的事情完成时，会将这个函数移入Event Queue。
    主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。

上述过程会不断重复，也就是常说的Event Loop(事件循环)。

  • 我们不禁要问了，那怎么知道主线程执行栈为空啊?js引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数;

简单来说就是：
1.同步和异步任务去不同的执行“地方”，同步任务去主线程，异步任务去事件表和注册函数。
2.当指定的事件完成时，事件表将此函数移至事件队列。
3.如果执行后主线程中的任务为空，事件队列会读取相应的函数，进入主线程执行。
而这个过程一遍又一遍地重复，称为事件循环。
至于我们怎么知道主线程栈是空的？JavaScript 引擎有一个监控进程，不断检查主线程堆栈是否为空，如果是，则检查 Event Queue 以查看是否有任何函数等待调用。

但是同步异步的执行机制流程不是JavaScript执行机制的全部
JavaScript除了广义上的的同步任务何异步任务，其对任务还有更精细的定义：

  • macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
  • micro-task(微任务)：Promise，process.nextTick

事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。
image

关于事件循环，详细可以去"https://developer.51cto.com/article/707318.html"
了解更多内容

ES：

javascript的ES是指ECMAScript，而ECMAScript也被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准，但实际上后两者是ECMA-262标准的实现和扩展。

posted @ 2022-05-01 20:21  Ocean_eye  阅读(35)  评论(0)    收藏  举报