HTML及CSS基础

一、HTML简介

1·1、HTML即超文本标记语言

该语言书写的代码会被浏览器解析执行。
HTML术语分注释和元素两块,HTML注释是用于描述代码功能,浏览器解析HTML代码会忽略注释内容。

HTML注释格式:<!--注释内容-->    快捷键:ctrl+/

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

1·2、HTML元素的组成部分

标记名、属性、元素内容共同决定了一个元素的显示内容和行为
HTML元素组成部分:起始标签+元素内容+结束标签。
起始标签又分标记名,(属性名,属性值)属性。
结束标签分标签名。

二,CSS术语

1·1、css注释

CSS注释的的书写格式:/*注释内容*/  快捷键 :ctrl+/


CSS注释主要用于描述代码功能
浏览器解析CSS代码是会忽略注释内容

1·2、引用css

引用css分为三种:

1、使用外部样式表:
- CSS代码在独立的一个文件中,HTML通过link元素引入到页面
- 使用外部样式表的特点:
a、实现了内容结构和表现形式代码分离,方便复用和维护
b、是HTML代码更加纯净,有利于程序员和搜索引擎的阅读
c、是开发页面的常见做法
2、使用内部样式表: - 将CSS代码写到HTML文档的style元素内容中 - 使用内部样式表的特点: a、没有了样式表文件,在某些时候可以提升效率 b、多个页面难以共享样式,不利于代码的复用 c、html和css代码混杂,不利于程序员和搜索引擎的阅读 d、在某些对效率要求苛刻或者测试的场景下使用 3、使用行内样式表: - CSS代码写在元素的style属性中,行内样式不写选择器 - 使用行内样式表的特点: a、没有了样式表文件,在某些时候可以提升效率。 b、多个元素难以共享样式,不利于代码复用。 c、html和css代码混杂,不利于程序员和搜索引擎阅读 d、javascript操作的式行内样式 e、在测试的场景下使用。

1·3、css规则

CSS代码是由一个一个的规则组成,
每个规则制定了:对哪些元素应用什么样式。

1、元素选择器
元素选择器书写格式:标记名{/*声明块*/
所有与该标记名匹配的元素,都将应用声明块中的规则}
2、类选择器
类选择器书写格式:. 类名{/*声明块*/}
所有class属性为制定类名的元素,都将应用声明块中的规则
3、ID选择器
ID选择器书写格式:#ID值{/*声明块*/}
属性ID为指定值的元素,将应用声明块中的规则
在同一个HTML文档中,元素ID值必须唯一



新手刚学的接触的最多就是这三类。

三、HTML 元素分类

分为块级元素、行内元素、行内块级元素(相互之间可转换)

1、块级元素:

1. 宽高可以自行设置,与内容无绝对关系
2. 默认独占一行,与其他元素不能共存一行
3. 对应的css属性是:display: block; 
4. 常见的有:div、 p 、h1-h6 、hr 、ul 、 ol 、pre各种h5新增的语义化标签如header、footer等

2、行内元素:

1. 宽高不可以设置,设置无效,有内容决定宽高。
2. 默认能与其他元素共存一行。
3. 对应的css属性是:display:inline;
4. 常见的行内元素有:a 、span 、 strong 、 i  等

3、行内块级元素:

1. 宽高可以设置,与内容无绝对关系
2. 默认不独占一行,可与其他元素共存一行
3. 对应的css属性:display:inline-block;
4. 常见的元素有:img 、td 、table 、video 、audio 、表单 、...
原文地址:https://www.cnblogs.com/lyl-0667/p/10948899.html