html+css学习第一天

一、html简介

html,超文本标记语言，使用标签描述内容。

HTML是一种声明式的标记语言，不是编程语言。

纯文本：文件中的数据都是与某种编码格式记录的文本，而不是普通的二进制数据。

超文本可以描述自身。

浏览器的工作原理：

    一个网页的本质是html文件，html文件本身是一个纯文本文件，当我们使用开发工具打开是一个html文件，看到是源代码；用浏览器打开html文时，浏览器会对html文件进行解析，将解析后的页面显示在浏览器窗口中。

二、基础标签

1.格式化标签

            b：加粗文本，没有特殊意义。

            strong：加粗文本，具有很强的强调意义，用于表示文本的重要性。

            i：斜体文本，没有特殊意义。

            em：斜体文本，具有很强的强调意义，用于表示文本的重要性。

            sup：定义上标。

            sub：定义下标。

            s：删除线文本，没有特殊意义。

            del：删除线文本，具有很强的删除意义，用于表示被遗弃的内容。

            u：下划线文本，没有特殊意义。

            ins：添加，插入文本，具有很强的添加意义，用于表示新增的内容。

            small：定义小号文本。

            br:换行。

            hr：水平分割线。

            ul：无序列表。

            ol：有序列表。

            li：列表项。

            dl：自定义列表。

            dt：自定义列表头。

            dd：自定义列表内容。

            div：组合块级元素。

            span：常用文本。

            p：段落文本。

            h1~h6：标题标签。

2.语义化标签

        <nav>标记导航，仅对页面中重要的链接群使用。</nav>

        <header>页眉，通过包括页面的logo，主导航，全站链接以及搜索框。</header>

        <main>页面的主要内容，一个页面只能使用一次；如果是一个web应用，则包括其主要功能。</main>

        <section>定义文档的节点(section，区段)，比如：章节，页眉或文档中的其他部分。</section>

        <footer>页脚，只有当父元素为body时才是整个页面的页脚。</footer>

        <aside>定义所有内容之外的部分，如侧边栏，广告等。</aside>

 3.图像标签

在HTML网页中插入一张图片，使用img标签，它是一个单标签：
其中img标签中常用属性如下：

src： 图⽚名及url地址
alt: 图⽚加载失败时的提示信息
title：文字提示属性
width：图片宽度
height：图片⾼高度
border：边框线粗细
绝对路径和相对路径：

绝对路径：绝对路径就是你的主⻚上的⽂件或⽬录在硬盘上真正的路径。
例如：
C:\xyz\test.txt 代表了test.txt文件的绝对路径。
http://www.sun.com/index.htm也代表了一个URL绝对路径。
相对路路径：相对与某个基准⽬目录的路路径。
“./” 代表当前目录,
"../"代表上级目录。

4.超链接标签

超级链接标签a：
格式：<a href="链接⽬标url地址">显示⽂字</a>
a标签的属性：

href: 必须有的，指的是链接跳转地址
target: 表示链接的打开⽅式：
_blank 新窗⼝
_parent ⽗窗⼝
_self 本窗⼝（默认）
_top 顶级窗⼝
framename 窗⼝名
title：⽂字提示属性

三、css

style标签是个特殊标签，它的标签内容是css样式表。

什么是css：css，层叠样式表，是描述标记语言页面格式的标准/语言。

                    css能够使内容与可视化元素分离，简化编码页面，使其更加灵活。

css的使用方法：1.内联样式：在开始标签内添加style属性并设置css样式。

                           2.内嵌样式：在html中的head标签中添加并按照固定格式设置css样式。

                                        优点：可以重复使用代码。

                           3.外联样式：在外部创建一个css文件，在html中的head标签中通过link标签引入css样式。

                                        优点：可以重复使用代码。

优先级：

正常情况：内联样式——内嵌样式——外联样式

特殊情况：内联样式——内嵌样式/外联样式（按照在头标签里面的先后顺序，以浏览器的执行顺序判断优先级）

选择器：

        css选择器的优先级从高到低排列顺序为：

        1.id选择器：  #myid           当需要为页面中的某一个元素设置样式时，使用id选择器。

        2.类选择器：  .line          选中页面中包含line的元素。

        3.标签名选择器 ： div        选择页面中所有标签名为div的标签。

        4.子选择器：  子<父     父>子        在嵌套中通过外层元素一层一层的找到某个后代元素。  箭头指向子元素。

        5.后代选择器：    div p        在嵌套中通过外层元素直接找到/一层一层找到某个后代元素。

        6.伪类选择器：   a:hover

        7.通配符选择器：*         选择页面中所有的标签。

        最后，需要注意的是：

            !important的优先级最高；

            优先级相同的时候，采用就近原则，选择最后出现的样式；

            继承得来的属性，其优先级最低。

       交集选择器：  p#first.line       选择页面中id值为first并且class值包含line的p元素。

       并集选择器：  p，div    选择页面中所有的p元素和div元素。

       相邻兄弟选择器：p+div      选择所有页面中紧接着p元素之后的第一个div元素。

       兄弟选择器：p~div         选择同一个div元素下的p元素之后的每一个div元素。

class和id的区别：

            1.前缀不同：在css中class以“.”为前缀，id以“#”为前缀。

            2.class类可以添加多个类名，中间以空格隔开。id名只能有一个。

            3.id的优先级：给同意元素同时使用class类名设置相同的css样式，优先执行id选择器内的css样式。

            4.id唯一性：在js中一整个页面中一个id只能出现一次。