第一次学习前端总结

时间:2021-03-30 16:36:59

学习总结

一、 HTML

  1. HTML:指超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,用于定义文档和结构
  2. HTML标签:通常是成对出现(如:<p></p>)标签对中第一个标签还开始标签,第二个标签为结束标签。
  3. HTML注释的书写格式:<!- - 注释内容 - ->,用于描述代码功能,浏览器解析HTML代码时不会解析注释内容。
  4. HTML元素:是HTML文档中重要组成部分,一个HTML文档由大量元素组成,HTML中的所有内容结构,都是靠元素组织到页面中。
  5. HTML元素组成部分:<h3>内容</h3><h3>:表示起始标签;</h3>:表示结束标签;<h3></h3>:表示H3元素。)
  6. 空元素:没有元素内容和结束标记,(如<img src=”img.jpg”alt=”图片);书写方式<标记名 属性>
  7. 元素的层次结构:一个元素可以包含其他元素,形成嵌套的层次结构(如<a><p>内容</p></a>);但两个元素之间不能相互嵌套(如<a><p>内容</a></p>)。

<html>

  <head>

     <p></p>

  </head>

  <bady>

      <a></a>

  </bady>

</html>

Html元素直接包含了head与bady元素,所以HTML元素为head与bady元素的父元素,head与bady元素为HTML的子元素,head,bady互为兄弟元素,

 

二、 CSS

  1. CSS注释:书写格式/* 注释内容*/,用于描述代码功能,浏览器解析CSS代码时会自动忽略。
  2. CSS规则:CSS代码由一个个的规则组成,每个规则指定了:对哪些元素应用什么样式。(如h1{color:red;text-align:center;}表示一个规则,h1表示选择器,“color:red;text-align:center”表示声明块)。

Color:表示颜色     text-align:表示内容位置,

Font-size:表示字体大小;text-indent:缩进,

Border:1px solid red表示红色的实线边框。

  1. CSS规则选择器

a) 元素选择器:书写格式:标记名{/*声明块*/},所有与该标签名匹配的元素,都将用声明块中的规则。

b) 类选择器:书写格式:.类名{/*声明块*/},所有class属性为指定类名的元素,都将用声明块中的规则。

c) ID选择器:书写格式:#ID{/*声明块*/},属性ID为指定值得元素,将用声明块中的规则,在一个文档中元素ID是唯一的。

  1. CSS的应用:

a) 使用外部样式表:CSS代码在一个独立的文件中,在HTML中用link元素引用到页面。(如<link rel=stylesheetherf=”main.css”>,rel表示所用资源是样式表,herf=””中书写样式表所路径。)

外部样式表特点:实现了内容结构和表现形式代码分离,方便复用和维护;使HTML代码更加纯净,有利于程序员和搜索引擎的阅读是开发页面的常见做法 

b) 内部样式:将CSS代码写在HTML文档的style元素内容中。

<head>
    <meta charset="UTF-8">
    <title>我的第一个页面</title>
    <style type="text/css">
        h1{color:red;text-align: center;}
        p{text-indent: 2em;color:chocolate;font-size:18px;}
    </style>
</head>

内部样式特点:没有了样式表文件,在某些时候可以提升效率;多个页面难以共享样式,不利于代码复用HTML和CSS代码混杂,不利于程序员和搜索引擎阅读在某些对效率要求苛刻或测试的场景下使用c行内样式:CSS代码写在元素的style属性中,行内样式不写选择器

特点:没有了样式表文件,在某些时候可以提升效率;多个元素难以共享样式,不利于代码复用HTML和CSS代码混杂,不利于程序员和搜索引擎阅读javascript操作的是行内样式在测试的场景下使用