HTML & CSS | 青训营笔记

ddlinux
140 阅读4分钟

这是我参与[第四届青训营]笔记创作活动的第一天。

《前端与HTML》

一.HTML概述

1.1 什么是HTML？

    根据W3C定义，HTML全程HyperText Markup Language,是用于定义文档内容结构。
    
    一个页面就是一篇文档，而一篇文档最核心的，就是内容，不同含义的内容组成了文档的结构。

image.png此图片上的信息也即 “内容”。 其中的标题、图片、图片说明、正文段落就是“结构”。

1.2 什么是CSS？

1.2.1 根据W3C定义，CSS全称Cascading Style Sheets，页面表现的基础，可以控制布局，控制元素的渲染。且用于定义HTML文档的样式（外观），而且HTML文档在页面中的外观样式由CSS决定。

1.2.2 Cascading Style Sheets：层叠样式表。
                              该语言书写的代码通常会被浏览器解析执行。
1.2.3 其中文字居中、加粗、大字号、图片尺寸、上下间距、背景颜色、字体颜色和中型字号均为“样式”。

1.3 HTML和CSS之间的关系

1.3.1 根据W3C定义：

 HTML：用于定义文档的内容结构。
 CSS：用于定义HTML文档的样式（外观）。

HTML决定了文档的内容结构，CSS决定了文档的样式。

image.png

《HTML术语》

一. HTML注释

1.1 HTML注释的书写格式：<!--注释内容-->
  • HTML注释主要用于描述代码功能
  • 浏览器解析HTML代码时会忽略注释内容
1.2 “稀土掘金” 首页的源代码片段。

image.png

二. HTML元素

2.1 什么是HTML元素？
    HTML元素是HTML文档的重要组成部分，一个HTML文档由大量元素组成；HTML中的所有内容结构，都是靠元素组织到页面在中的。

image.png“稀土掘金”首页中 title元素、style元素。

2.1.1 HTML元素的组成部分。

image.png

image.png

image.png

 标记名、属性、元素内容共同决定了一个元素的显示内容和行为。
 a标记：表示这是一个超链接。
 元素内容：表示要在页面上显示立即加入。
 href属性：表示用户点击它后，会跳转到/classroom/17

image.png

2.1.2 HTML中空元素（自闭元素）
    定义：没有元素内容和结束标记。
    书写方式：
        <标记名 属性>
        <标记名 属性/>

image.png

2.1.3 HTML中元素的层次结构
  • 一个元素的内容中可以包含其他元素，形成嵌套的层次结构。

image.png

  • 一个元素的内容中可以包含其他元素，形成嵌套的层次结构，但两个元素之间不能相互嵌套。

image.png

2.1.4 元素嵌套会产生一个树状的层次结构
      当一个元素放在另一个元素里时，形成嵌套的层次结构，称为元素的嵌套。（比如祖孙三代之间的关系）

image.png

image.png

《HTML文档结构》

image.png

一.文档声明

定义：文档声明既不是元素，也不是注释，它总是出现在HTML代码的第一行。

书写代码为： <!DOCTYPE html> 使用HTML5版本，用于通知浏览器，目前的文档正使用哪一个HTML版本，若不写文档说明，浏览器渲染页面时会进入怪异模式。

二.html元素

   定义：html元素又叫做根元素、根标记，它是所有其他元素的祖先元素，文档中所有的其他元素，都必须放置在它的元素内容中。
   相关属性：lang
   该属性指定文档中的文字是用何种自然语言书写的。
   该属性可能会影响浏览器的语音阅读和翻译行为。
   `<html lang="en"></html>` 该文档中的文字使用英语书写。
   `<html lang="zh-cmn-Hans"></html>` 该文档中的文字使用简体中文书写。

三.head元素

    定义：head元素又叫做文档头，它是html元素的第一个子元素。文档头中可以包含一些其他元素，用于描述页面的附加信息。
    注意：head元素中的内容不会显示到页面上！
    组成元素：
         -   <title> 标识文档标题，该标题会显示在浏览器的标题栏或者标签页上。
         -   <meta>  标识页面的其他元素（页面相关的附加信息），这是一个空元素。         
         示例: `<meta charset = "UTF-8>" `
         指示浏览器，使用字符编码UTF-8解析页面。
         注意：为获得更好的地域兼容性、避免乱码，应将字符编码集设置为UTF-8,并且将该代码作为head的第一个子元素。
         -     <style> <link> <script> 也是head元素通常包含的元素。

四.body元素

    定义：body元素又叫做文档体，网页中所有的可见内容都放置在该元素中。
    body元素中可以包含大量的其他元素，定义文档的内容结构。
avatar
文章
阅读
粉丝