html与css基础

目录

文章目录

前言

一、认识HTML

        1.什么是HTML?

        2.什么是标记语言(markup language)            

        3.什么是超文本                 

        4.改进网页代码

二、HTML元素(重点)

        1.什么是元素?

        2.HTML有哪些元素?

        3.元素的组成

        4.元素的属性(Attribute)

        5.属性的分类             

三、HTML元素(重点)

        1.一个完整的HTML结构包括哪几个部分?

        2.文档说明

        3.html元素

        4.head元素            

         5.body元素

四、CSS简介

五、四种引入方式

       1. 第一种引入方式

       2.第二种引入方式

总结


前言

关于的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谁在后面) 执行顺序从上到下依次执行同样的属    性在权重相同的情况下后面的会覆盖前面的


总结
以上就是今天要讲的内容,本文仅仅简单介绍了html与css的一些基础知识

猜你喜欢

转载自blog.csdn.net/xiaowu1127/article/details/127429983