小黑子的HTML入土过程

小黑子的HTML入土过程

  • 1. HTML+CSS系列教程第一章
    • 1.1 了解什么是HTML和CSS
    • 1.2 编译器VS Code
      • 1.2.1 下载方式和设置
      • 1.2.2 VS Code的快捷键基础用法
    • 1.3 了解网页开发
    • 1.4 Web前端的三大核心技术
    • 1.5 HTML的基本结构和属性
    • 1.6 HTML的初始代码
    • 1.7 HTML的注释
    • 1.8 HTML的语义化
    • 1.9 标题与段落
    • 1.10 文本修饰标签
    • 1.11 图片标签和图片属性
    • 1.12 引入文件的地址路径
    • 1.13 跳转链接
    • 1.14 跳转锚点
    • 1.15 特殊符号
    • 1.16 无序列表
    • 1.17 有序列表
    • 1.18 定义列表

1. HTML+CSS系列教程第一章

1.1 了解什么是HTML和CSS

I.它们是做网站的编程语言

HTML 英文全称是 (Hyper Text Markup Language),即超文本标记语言。 它能独立于各种操作系统平台(如UNIX, Windows等)。使用HTML,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件“翻译”成可以识别的信息,即我们所见到的网页。

CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML等文件样式的计算机语言。它不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化

II.浏览器把代码解析后的样子就是我们看到的网站,如何看到网站的原始代码呢?就是通过鼠标右键选择查看网页源代码

III。每一个网站都由N个网页构成,而每一个网页就是HTML文件

1.2 编译器VS Code

在这里插入图片描述

1.2.1 下载方式和设置

  • 下载方式:
    http:// code.visualstudio.com/在这里插入图片描述
  • 设置:
    在这里插入图片描述

1.2.2 VS Code的快捷键基础用法

  • ctrl基础用法
    小黑子的HTML入土过程_第1张图片

  • shift基础用法
    小黑子的HTML入土过程_第2张图片

  • alt基础用法
    在这里插入图片描述

  • Tab基础用法
    在这里插入图片描述

1.3 了解网页开发

一个大型网站的开发,离不开团队内各个岗位的配合,每个岗位都不可或缺。
  • 主要有三个岗位:
  UI设计师:负责设计稿撰写
  web前端开发工程师:主要负责页面视图
                    将设计稿编写为代码
                    将数据库里的数据显示到页面
                    编写HTML以及CSS
  web后端开发工程师:主要负责后台存储数据

1.4 Web前端的三大核心技术

1.HTML:结构
2.CSS:样式
3.JavaScript:行为

1.5 HTML的基本结构和属性

什么是超文本标记语言?

 超文本:文本内容+非文本内容(图片、视频、音频等)
 语言:编程语言
 标记(也叫做标签):<单词>
 
 单标签:<head><p>等
 
 双标签:<head>head>;<p>p>等
 
 创建标签的快捷键:单词+Tab键-> <单词>
 
 HTML常见标签: http://www.html5star.com/manual/html5label-meaning/
 
 标签可以上下排列,也可以组合嵌套
 标签的属性:用来修饰标签,设置当前标签的一些属性
               <标签 属性1="值1"  属性2="值2">

1.6 HTML的初始代码

每一个html文件都需要添加初始代码,要符合.html文件的规范写法

初始代码就是无论你写什么样的网页,这些代码都是要有的,这就是初始代码

快速的创建HTML的初始代码:!+Tab键
例子:
 DOCTYPE html>   文档声明:告诉浏览器这是一个.html文件
 <html lang="en">  html的最外层标签,包裹着所有html标签代码        
 lang="en":表示是一个英文网站       
 lang=“zh-CN”:表示这是一个中文网站
 <head>     设置的内容
    <meta charset="UTF-8">元信息:是编写网页中的一些赋值信息charset
    ="UTF-8"国际编码,让网页不出现乱码的情况
    <title>Documenttitle>  网页的标题
 head>
 <body>
 显示网页内容的区域
body>
 html>
  • 展示一下哪里是head,哪里是body
  • 小黑子的HTML入土过程_第3张图片

1.7 HTML的注释

写法:

                    

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