前端语言串讲

前端语言的基本能力Html、js、css

html：

创建结构
控制内容的布局
为网页设计提供结构
任何网页的基本构建块

css：

将风格应用于网页元素
针对不同的屏幕尺寸使用网页响应
主要处理网页的“外观和感觉”
- selector {（declaration）property：value；}
- 选择器：class selector（类选择器）；* selector（全选择器）；伪元素选择器（在元素的之前之后都可以加新的东西）；id selector（根据id选择元素）；element selector（元素类型选择器，比如可以选择所有<p>标签）；伪类选择器（选择所有没被访问过的超链接标签）；后代选择器；直接后代选择器；紧邻兄弟选择器；一般兄弟选择器；……
- 元素自身状态选择伪类选择器（：），元素内容选择伪元素选择器（：：）

javascript：

增加交互性
处理复杂的功能和特性

增强功能的编程代码

javascript通用特性：

* validating user's input 验证用户输入
* simple client-side calculations 简单的客户端计算
* greater control
* platform independent
* handling data and time
* generating HTML content 生成HTML内容
* detecting the user's browsers and OS 检查用户的浏览器和操作系统
* Let/const
* Arrow function
* Template Litral
* new array function
* default parameters 默认参数
* property shorthand 属性简写

7 types：string，number，boolean，null，undefined，symbol，object（array，function）

Var a=7+“2”；由于统一化，最后结果会是字符串

var user={
    name:"Aziz Ali",
    yearofbirth:1988,
    calculateage:function(){
        
    }
}

前端语言的协作配合

css in HTML

inline css

<p style="color: blue;"> This is paragraph</p>

internal css

<head>
    <style type=text/css>
        body {background-color:blue;}
        p {color:yellow;}
    </style>
</head>

External css

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

javascript in HTML

事件捕获：document->HTML->body->div->button

事件冒泡：button->div->body->HTML->document

HTML

基本语法：

标签（元素）element
文本Text <![CDATA[text]]>不用转义
注释Comment
DTD Document Type Defination <!DOCTYPE html>
处理信息 ProcessingInstruction

标签分类：

文档型（必须具备的标签）
- <!DOCTYPE>
- <head>
- <body>

闭合型 * 闭合标签 <p></p> * 空标签 <br>``<img>`` <input>
换行型
- 块级标签
  - <div>
  - <h1>``<h2>``<h3>……
- 行内标签
  - <span>
  - <a>
H5新元素
- 语义化标签
- 媒体标签
  - <video>
  - <audio>
  - <embed>
- 表单标签
  - <input type="date">
  - <input type="color">
- 功能标签
  - <canvas>
  - <progress>

head中的标签：

title 标题，全局唯一
base 向页面所有相对URL提供前缀；全局唯一，不建议使用
meta 通常是约定好的键值对，例外：charset、http-equiv
link rel决定类型，href决定引入地址
script type指定MIME类型，可内嵌代码，可外链文件

个人感悟

对HTML、js、css有了基本的了解，但是对视频中提到的一些细节还不是很了解，主要是还没有学习完这三个内容，希望抓紧时间学习完后再回来看有更多的收获

前端语言串讲-笔记DAY1|青训营