美文网首页
前期预告:与HTML、CSS的完美邂逅

前期预告:与HTML、CSS的完美邂逅

作者: kevin5979 | 来源:发表于2019-11-08 21:35 被阅读0次

基本术语


  • Web
    互联网

  • W3C
    万维网联盟(World Wide Weh),一个非盈利的组织,为互联网提供各种标准。官网:万维网

  • MDN
    Mozilla Development Network,Mozilla开发者社区,可以查询HTML和CSS相关元素的具体标准用法。官网:https://developer.mozilla.org/zh-CN/docs/Web

  • HTML
    HTML是W3C组织定义的语言标准,用于描述页面结构的语言。
    HTML:(Hyper Text Markup Language)指的是超文本标记语言

<h1>我是标题<h1>
  • CSS
    CSS也是W3C定义的语言标准,主要用于渲染页面(HTML标签)
    CSS:(Cascading Style Sheets)指的是层叠样式表
h1{
color:#f40
}
执行HTML CSS
  • HTML、CSS -> 浏览器内核 -> 页面

浏览器


  • shell:外壳
  • core:内核(javaScript执行引擎、渲染引擎),只有五大浏览器(见上期)才有自己的内核,国内的浏览器都是借鉴五大浏览器的内核。
常见浏览器及其内核
  • IE:Trident
  • Firfox:Gecko
  • Chrome:Webkit / Blink
  • Safari:Webkit
  • Opera:Presto / Blink

开发环境的准备


  • 将电脑的后缀名设为可见
  • 安装浏览器
    建议使用Chrome浏览器,去谷歌官网进行下载,并设置为默认浏览器
  • 安装代码编辑器
    webstorm(好用,占内存大,而且要付费,电脑性能的不好不建议)
    Sublime(占内存超小,界面简单,要安装插件)
    Dreamweaver
    Visual Studio Code (推荐,插件丰富,而且免费)

点击这里进行下载安装 Visual Studio Code

  • 安装VS Code编译器的插件
    live Server:用于将代码运行到默认的浏览器上


    Chinese:汉化插件(安装完成要重启编译器)

    vscode-icons:各种漂亮图标

  • 搜索安装


  • 设置图标


  • 选择vscode-icons


  • 其他插件可上网搜索按步骤安装即可

  • 编写第一个html代码

1.导入你的工作文件夹,并新建一个index.html文件,打开

2.在第一行输入!(英文)

3.然后将光标移动到 !(提示)后

4.按下 Enter 键

补全代码如下

5.在body标签之间写入代码如下

<body>
    <h1 style="color: coral;">Hello Web</h1>
</body>

6.点击右键 --> 点击 Open with Live Server
7.看到下面文字,代表代码运行成功了



END

相关文章

  • 前期预告:与HTML、CSS的完美邂逅

    基本术语 Web互联网 W3C万维网联盟(World Wide Weh),一个非盈利的组织,为互联网提供各种标准。...

  • 前端书单

    HTML 《Head First HTML与CSS》 CSS 《CSS揭秘》《CSS世界》 JS 《JavaScr...

  • 前端学习路线

    前期(集体学习内容)Html5+css3:学习内容:Html51:基础标签的使用2:新增标签和属性css31:C...

  • 2020-11-27

    关于HTML、CSS与JS 1 HTML、CSS与JS定义 HTML(Hyper Text Markup Lang...

  • python爬虫入门

    1. 前期准备及环境安装 1.1 前期准备 python语法基础,html,css基础。 1.2 环境安装 官网下...

  • 前端必读书籍推荐

    HTML 与 CSS 《Head First HTML与CSS(第2版)》--豆瓣评分 9.3。入门真的是经典书籍...

  • CSS的简介

    -为什么要用CSS 什么是CSS CSS与HTML的关系 CSS语法 为什么要用CSS 什么是CSS CSS与HT...

  • css 和JS

    * CSS* CSS的简介* 层叠样式表。* CSS与HTML的结合(4种)* HTML的标签提供了属性style...

  • 面试题一览

    HTML与CSS HTML与CSS常用编译工具 原生js h5 React Vue ES6 javascript框...

  • HTML基础语法

    HTML 与 CSS 主要内容 HTML ​ HTML(HyperText Markup Language)就...

网友评论

      本文标题:前期预告:与HTML、CSS的完美邂逅

      本文链接:https://www.haomeiwen.com/subject/ghmwbctx.html