小白学前端Day1

《小白学前端》系列博客是根据腾讯课堂IMWeb前端小白训练营每天任务的内容加以整理而成。

任务一：W3SCHOOL---“HTML简介”到“HTML注释”+“HTML文档类型”

HTML简介

• HTML 是用来描述网页的一种语言(超文本标记语言)
  疑问1：编程语言与标记语言的区别？
  《知乎回答：编程语言 标记语言 脚本语言分别有哪些？ 区别是什么？》
  标记语言不用于向计算机发出指令，常用于格式化和链接。 2、脚本语言介于标记语言和编程语言之间，脚本语言脚本语言不需要编译，可以直接用，由解释器来负责解释。 3、编译型语言写的程序执行之前，需要一个专门的编译过程，把程序编译成为机器语言的文件，比如exe文件，以后要运行的话就不用重新翻译了，直接使用编译的结果就行了（exe文件），因为翻译只做了一次，运行时不需要翻译，所以编译型语言的程序执行效率高。

• HTML 标签通常是成对出现的
  疑问2：不成对出现的标签有哪些？
  有少部分标签不是成对的,我们称之为空标签或空元素.如
换行

  ---

  水平线 ，它们在 > 前加入 (空格)/ 代表标签的结束.（HTML5
  

  ---

  也是合理的）。

• 浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
  疑问3：浏览器解析HTML的原理是什么？
  浏览器的渲染原理简介

常见HTML标签

• 标题

This is a heading

定义最大的标题。

定义最小的标题。h1到h6逐渐变小。

• 段落

This is a paragraph.

• 链接：

This is a link

href 链接到的地址

• 图像

src图片的来源地址
width height图片的宽、高

常见HTML文档结构

• 标签声明了该 HTML 文档的文档类型为 HTML5。只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。
• 标签是 HTML 文档的最底层标签，包含了文档的所有内容。
• 代表了 HTML 文档的“头部”，这里描述了浏览器需要的一些信息，也可以定义一些需要从外部引入的文件（如 .css .js 文件）。
• 定义了网页的标题，该信息会显示在浏览器的标题栏（或浏览器标签）以及收藏夹中。
• 定义了网页的内容，也就是我们可以从浏览器中看到的内容。

常见Style属性

• style 作用：提供了一种改变所有 HTML 元素的样式的通用方法。
• 将样式表加入到HTML中的几种方法

属性样例：

font-family:arial;
color:red;
font-size:20px;
text-align:center

HTML文本格式化

This text is bold

This text is bold

This text is italic

This text is italic

这是
预格式文本。
它保留了      空格
和换行。

 这是
 预格式文本。
 它保留了 空格
 和换行。
 

Computer code

Computer code

这是长的引用。这是长的引用。这是长的引用。这是长的引用。
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。

这是长的引用。这是长的引用。这是长的引用。这是长的引用。
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。

一打有 二十 十二 件。

一打有 二十 十二 件。

其他

• HTML的大多数标签都可以嵌套使用。
• HTML 标签对大小写不敏感，推荐使用小写标签。
• HTML 属性值本身就含有双引号，必须使用单引号。如：name='Bill "HelloWorld" Gates'
• HTML 注释，提高其可读性``

任务二：软谋教育网站开发绝杀技---“HTML开篇”到“html常用标签使用（一）”

网站开发需要的知识

• 前端
  HTML ------ 内容
  CSS ------ 外观
  js ------ 动作交互效果
• 后端
• 数据库

HTML标签

段落标签

大标题


换行标签

``

粗体

斜体

下划线
下划线

删除线
删除线

删除线
删除线

p上标签
p^上标签

p下标签
p_下标签

1. 有序列表
2. 有序列表
3. 有序列表
4. 有序列表

1. 有序列表


2. 有序列表


3. 有序列表


4. 有序列表

---

• 无序列表
• 无序列表
• 无序列表
• 无序列表

• 无序列表


• 无序列表


• 无序列表


• 无序列表

Name

Godzilla

Born

1952

Birthplace

Japan

Color

Green

Name

Godzilla

Born

1952

Birthplace

Japan

Color

Green

HTML转义
HTML转义

缩写说明
缩写说明

Simple table with header

  

    
First name
    
Last name
  
  

    
John
    
Doe
  
  

    
Jane
    
Doe
  

Simple table with header

First name	Last name
John	Doe
Jane	Doe

Table with thead, tfoot, and tbody

  

    

      
Header content 1
      
Header content 2
    
  
  

    

      
Footer content 1
      
Footer content 2
    
  
  

    

      
Body content 1
      
Body content 2
    
  

Table with thead, tfoot, and tbody

Header content 1	Header content 2
Footer content 1	Footer content 2
Body content 1	Body content 2

Table with colgroup

  
  

    
Countries
    
Capitals
    
Population
    
Language
  
  

    
USA
    
Washington D.C.
    
309 million
    
English
  
  

    
Sweden
    
Stockholm
    
9 million
    
Swedish
  

Table with colgroup

Countries	Capitals	Population	Language
USA	Washington D.C.	309 million	English
Sweden	Stockholm	9 million	Swedish

Table with colgroup and col

  
    
    
  
  

    
Lime
    
Lemon
    
Orange
  
  

    
Green
    
Yellow
    
Orange
  

Table with colgroup and col

Lime	Lemon	Orange
Green	Yellow	Orange