web前端全栈0基础到精通(祺)01

前端的概述

  • web的发展史
    • web1.0 简单的静态页面 早期三大门户 搜狐 新浪 网易
    • web2.0 更注重用户之间的交互 用户即是信息的消费者也是制造者 微博
    • web3.0
      • 人工智能
      • 复杂的页面功能
      • 即时通讯
  • web的前景
    • pc端的网页
    • 移动端的网页
    • ios android

vscode编译器的使用

  • 快捷键
    • 复制本行到下一行 shift+alt+↓
    • 复制本行到上一行 shift+alt+↑
    • 查找 ctrl+F
    • 替换 ctrl+H
    • 同时写多行
      1.按住鼠标滑轮向下滑动,可以出现多个光标
      2.按住alt键,点击左键,可以不同位置,出现光标

浏览器内核

  • 浏览器的渲染引擎,作用是解析我们代码成为画面

  • 五大浏览器及其内核(都是自主研发内核)

  • chrome谷歌 firefox火狐 opera欧朋 ie(微软) safari(苹果)
    blink(webkit分支) gecko(高版本兼容谷歌内核) presto(后来版本改成blink) trident webkit
  • 360、qq、UC、搜狗: 双内核(blink&trident)

网页三层结构

  • HTML 结构层–页面有什么东西
  • CSS 表示层–拥有的东西是什么样子的
  • JS(javascript) 行为层–用户的行为触发的事情

HTML语言

html定义

  • hyper text markup language (超文本标记语言),不是编程语言

html文档(扩展名或者后缀名)

  • .txt .doc .xls
  • .html

html基本语法

  • 标签结构

    • 开始标签开始,结束标签结束,内部可以包含文字或者其他标签

    • <关键字>
          文字内容
          <关键字>
          	文字内容
      	关键字>
      关键字>
      
    • 空标签,只有开始标签,没有结束标签

  • 标签属性

    • <cxl name="cxl" age="25" profession="singer">cxl>
      
    • 标签的属性只能设置在开始标签。

html基本结构

  • 
    
    
    <html lang="en">
    
    
    <head>
        
        <meta charset="UTF-8">
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <title>Documenttitle>
    head>
    
    <body>
    
    
```

常用标签

常用块级标签及特点

  • div
    • 最常用的块级标签
    • 网页应用场景
  • p
    • 段落标签
  • h1-h6
    • 标题标签
  • 特点:垂直上下排列,独立成行

常用内联标签及特点(行内标签)

  • span
    • 常用的行内标签,用户图标
  • strong
  • b
    • 加粗
  • em
  • i
    • 斜体
  • sub
    • 定义下标字
  • sup
    • 定义上标字
  • del
  • s(基本淘汰)
    • 删除线
  • 特点:默认在一行排列,超出一行会折行

其他标签

  • br
    • 换行标签
  • hr
    • 水平分隔线

图像标签

  • img

    ​ 自带属性:

    ​ src 引入文件的路径

    ​ 绝对路径

    ​ 网络路径 http:// https://

    ​ 本地磁盘路径 C:/ D:/

    ​ 相对路径

    ​ 同级目录下 ./ (可以省略)

    ​ 上级目录 …/ (上上级目录 …/…/)

    ​ alt 友好提示

    ​ title 鼠标悬停时展示

    ​ width 图片宽度,只设置宽度时,高度会等比例缩放

    ​ height 图片高度

html字符实体

  • https://www.w3school.com.cn/html/html_entities.asp

css样式:

​ text-align: center 设置文本对齐方式为居中

​ color: red 字体颜色为红色

​ font-size: 20px 设置文字大小为20像素

​ 格式

​ style=“属性名:属性值;属性名:属性值;属性名:属性值;…”

你可能感兴趣的:(前端,html,css,html5,css3)