1前端语言的基本能力

1.1 HTML (Hypertext Markup Language)（人的骨骼）

最基本的语言

主要功能

做框架结构
控制内容布局
为设计师提供层次结构

任何网页的基本组成部分

最小单位：标签（浏览器中称为元素）

本质：搭建标签构成文本文件，通过浏览器、容器将其变成具体的元素，完成文本到页面的转化过程

1.2 CSS （Cascoding style Sheet）（人的皮囊）

《语法非常简单》

用来给网站添加样式

具体包含：

给元素添加样式
适配不同的屏幕，让网站有响应式特征

是网站体验和外表体现的一个最重要的工具

选择器

类选择器 #Class Selector 根据class选择
全选择器 #* Selector 选中全部
伪元素选择器 #Inser Content After Every Element 可以在元素内容之前和之后添加新的内容
Id选择器 #Id Selector 根据Id选择元素一个页面的Id一般是唯一的
元素类型选择器 #Element Selector
伪类选择器 #Select All Unvisited Links
后台选择器 #Descendant
直接后台选择器 #Direct Descendant
兄弟选择器 #Adjacent Sibiling
一般兄弟选择器 #Far Sibiling

元素自身状态用伪类选择器（：）
内容用伪元素选择器（：：）

1.3 Javascript （人的肌肉）

最具有灵魂的语言
增加交互体验
见面交互是精髓
能处理复杂的函数及特性
保证更高的效率及可用性
单线程

2前端语言的协作配合

Inline CSS
<p style="color:blue;">This is a 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>

3你不知道的HTML（5）

mindmap
      基本语法
          标签（元素）Element
          文本 Text
          注释 Comment
          DTD Document Type Defination
          处理信息 ProcessingInstruction

mindmap
      标签分类
          文档型
          闭合型
           闭合标签
           空标签
          换行型
           块级标签
           行内标签
          H5新元素
           语义化标签
           媒体标签
           表单标签
           功能标签

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

4拓展分享

Web的风靡

对用户友好
对开发者友好
领域成熟度
未来的方向

总结

mindmap
      前端语言串讲
          基础
           HTML
           CSS
           Javascript
           浏览器引擎
          协作
          CSS/Javascript in HTML
          HTML/CSS in Javascript
          HTML
           标签
            head
            body
           HTML5
            语义化
            存储/音视频
            浏览器API
            可视化相关
          拓展交流
           回顾分析
           UI Data

前端语言串讲 ｜ 青训营