目录
前言
关于的html与css的相关知识
提示:以下是本篇文章正文内容,下面案例可供参考
一、认识HTML
1.什么是HTML?
HTML全称是:超文本标记语言(HTML)是一种用于创建网页的标准标记语言
2.什么是标记语言(markup language)
由无数个标记(标签、tag)组成
是对某些内容进行特殊的标志,以供其他解释器识别处理
由标签和内容组成的称为元素(element)
3.什么是超文本
表示不仅仅可以插入普通的文本(Text),还可以插入图片、音频、视频等内容还可以表示超链接(HyperLink)
4.改进网页代码
二、HTML元素(重点)
1.什么是元素?
元素是网页的一部分
一个元素可以包含一个数据项,或是一块文本,或是一张照片,或什么也不包含
2.HTML有哪些元素?
参考网站:HTML 元素参考 - HTML(超文本标记语言) | MDN
3.元素的组成
这个元素的主要部分的组成:
(1)开始标签(Opening tag):包含元素的名称(本例为 p),被左、右尖括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
(2)结束标签(Closing tag):与开始标签相似,只是其在元素名之前包含了一个斜 杠。这表示着元素的结尾 —— 在本例中即段落 在此结束。初学者常常会犯忘记包含结束标签的错误,这可能会产生一些奇怪的结果。
(3)内容(Content):元素的内容,本例中就是所输入的文本本身。
(4)元素(Element):开始标签、结束标签与内容相结合,便是一个完整的元素。
4.元素的属性(Attribute)
属性包含元素的额外信息不会出现在实际的内容里
一个属性必须包含如下内容:
(1)一个空格,在属性和元素名称之间。(如果已经有一个或多个属性,就与前一个属性之间有一个空格。)
(2)属性名称,后面跟着一个等于号。
(3)一个属性值,由一对引号“ ”引起来。
5.属性的分类
有些属性是公共的,每一个元素都可以设置 比如class、id、title属性
有些属性是元素特有的,不是每一个元素都可以设置 比如meta元素的charset属性、img 元素的alt属性等
三、HTML元素(重点)
1.一个完整的HTML结构包括哪几个部分?
(1)文档声明
(2)html元素
head元素
body元素
2.文档说明
HTML最上方的一段文本我们称之为 文档类型声明,用于声明文档类型
意义和要求(1)HTML文档声明,告诉浏览器当前页面是HTML5页面;
(2)让浏览器用HTML5的标准去解析识别内容;
(3)必须放在HTML文档的最前面,不能省略,省略了会出现兼容性问题;
3.html元素
(1)<html>元素表示一个 HTML文档的根(顶级元素),所以它也被称为根元素。所有其他元素必须是此元素的后代。
(2)W3C标准建议为html元素增加一个lang属性,作用是a.帮助语音合成工具确定要使用的发音; b.帮助翻译工具确定要使用的翻译规则;lang=“en”表示这个HTML文档的语言是英文; lang=“zh-CN”表示这个HTML文档的语言是中文;
4.head元素
(1)HTMLhead元素规定文档相关的配置信息(也称之为元数据),包括文档的标题,引用的文档样式和脚本等。
(2)什么是元数据(meta data)是描述数据的数据;这里我们可以理解成对整个页面 的配置:
(3)常见的设置有哪些呢?
一般会至少包含如下2个设置。 网页的标题:title元素
网页的编码:meta元素可以用于设置网页的字符编码,让浏览器更精准地显示每一 个文字,不设置或者设置错误会导致乱码; 一般都使用utf-8编码,涵盖了世界上几乎所有的文字;
5.body元素
body元素里面的内容将是你在浏览器窗口中看到的东西,也就是网页的具体内容和结 构。 之后学习的大部分HTML元素都是在body中编写呈现的;
四、CSS简介
让我们的网页更加丰富多彩,布局更加灵活自如。
CSS的最大贡献就是: 让 HTML 从样式中脱离, 实现了 HTML专注去做结构呈现, 样式交给css
CSS 做的很出色,如果JavaScript是网页的魔法师,那么CSS它是我们网页的美容师
概念:
CSS(Cascading Style Sheets) ,通常称为CSS样式表或层叠样式表(级联样式表)
作用:
主要用于设置 HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽 高、边框样式、边距等)以及版面的布局和外观显示样式。
CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等, 而且还可以针对不同的浏览器设置不同的样式。
五、四种引入方式
1. 第一种引入方式
行内样式表(首次提出结构和样式相分离) 用法: 在标签内添加一个style属性
2.第二种引入方式
内部样式表用法: 在head标签里面添加一个style标签
3.第三种引入方式
外部样式表(完全实现了结构和样式的相分离)
4.第四种引入方式
导入式
<style>
@import "css/test.css";//@import导入样式表
</style>
注意:链接式与导入式的区别:
链接式是html层面写的,导入式是使用css脚本写的;在页面加载时,链接式是先加载好了 css文档,再显示html页面;而导入式是先加载html显示出来后,再加载css脚本的效果;
所以:推荐使用链接式,不推荐使用导入式,但是我们需要知道有这么一种方式;
优先级就近原则(显示) 行内 > (link style谁在后面) 执行顺序从上到下依次执行同样的属 性在权重相同的情况下后面的会覆盖前面的