前端学习-DAY01：html+css基础学习

一、html学习

1、html基础结构

    
    
    
    


    hello
    

 这是一个基础的html的框架。

首先是DOCTYPE，doctype一共有两个模式：1、怪异模式2、标准模式。标准模式是指浏览器按照W3C的标准解析执行代码，而怪异模式是按照旧的非标准的实现方式对文档进行解析。而浏览器解析使用标准模式还是怪异模式，与doctype的声明直接相关。

其次是
向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english。

head标签中是html页面的头部，其中放该页面的一些基本信息。meta 标签用于网页的＜head＞与＜/head＞中。

• 如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。
• 如果设置了 http-equiv 属性，meta 元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同。
• 如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。
• 如果设置了 itemprop 属性，meta 元素提供用户定义的元数据。

title标签则是该html页面的标题。

2、常用基础标签

2.1 单标签

2.1.1 

---

标签：水平分割线，单标签 默认1px。

2.1.2
标签：一个换行符。

2.2 双标签

1.--- 标签： 定义标题：h1最大，h6最小

h1 建议是唯一的主标题，h1......h6 其中建议多使用二~四级，五六级标题字体大小不算合适，也可使用。

2.

标签：p标签是块级元素，在文本标签元素内属于特殊文本元素。Paragraph的首字母，段落的意思，用

标签包裹的内容默认是占一行，相当于打了一个回车。3.

3.标签：

:规定显示图像的URL(统一资源定位符)

4. 标签：定义超链接，用于链接到另一个资源

href： 指定访问资源的URL

target：指定打开资源的方式

_self:默认值，在当前页面打开

_blank:在空白页面打开

3.格式化标签

1.标签：加粗文本，没有特殊意义。

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

2.标签：斜体文本，没有特殊意义。

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

4.^{标签：定义上标。}

5._{标签：定义下标。}

6.标签：删除线文本，没有特殊意义。

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

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

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

10.：定义小号文本。

        加粗文本
        加粗文本
        

        斜体文本
        斜体文本
        

        
这是上标和下标
        删除线文本
        删除线文本
        

        下划线文本
        下划线文本
        

        小号文本

4.语义化标签

HTML语义化标签：

    根据内容的结构(内容语义化)，选择合适的标签(代码语义化)。

    便于开发者阅读和写出更好的代码；

    让浏览器的爬虫和机器很好地解析。

    html语义化的好处：

        1.为了在没有css的情况下，页面也能呈现出更好的内容结构，代码结构。

        2.代码结构清晰，方便阅读，有利于团队开发。

        3.方便搜索引擎识别页面，有利于搜索引擎优化(SEO)。

        4.方便其他页面解析(比如：屏幕浏览器，盲人阅读器，移动设备等)，以语义化的方式渲染页面。

页眉，通过包括页面的logo，主导航，全站链接以及搜索框。
页面的主要内容，一个页面只能使用一次；如果是一个web应用，则包括其主要功能。
定义文档的节点(section，区段)，比如：章节，页眉或文档中的其他部分。

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

二、css学习 1.什么是css

Cascading Style Sheets 通常称为层叠样式表。

为HTML标记语言提供了一种样式描述
即【设置HTML页面中的元素的位置、排版、样式外观等】 如文本内容（字体、大小、对齐方式等）、图片的外形（宽、高、边框等）

2.css常见样式

1.内联样式=行内样式=行间样式

基础语法：

<标签名 >内容

2.内嵌样式=内部样式

基础语法：

3.外联样式：外部样式表，用link引入外部样式表

基础语法：

3.选择器

1.通配符选择器

*{
    属性1:属性值1;
    属性2:属性值2;
}

作用：选择所有标签添加样式。

2.标签选择器

标签名{
    属性1:属性值1;
    属性2:属性值2;
}

作用：选择固定标签添加样式。

3.id选择器

#id值{
    属性1:属性值1;
    属性2:属性值2;
}

作用：选择单个标签添加样式。id是唯一值，不可重复。

4.类选择器

.类名{
    属性1:属性值1;
    属性2:属性值2;
}

作用：选择多个标签添加相同样式。

5.交集选择器

p#first.line{
    font-family: 'Courier New', Courier, monospace;
}

作用：更多条件筛选部分标签添加相同样式。

6.并集选择器

p,#box{
    background-color: #ffc;
}

作用：选择多种标签添加相同样式，给两个或者多个元素设置相同的css样式时使用(节省代码空间)。

7.子选择器

#box>div>h4{
    color: aqua;
}

作用：根据父子关系查找标签添加样式。在嵌套中通过外层元素一层一层的找到某个后代元素。

8.后代选择器

#box span{
    color: red;
}

作用：根据后代关系查找标签添加样式，包括子选择器。

在嵌套中通过外层元素直接找到/一层一层找到某个后代元素。

9.相邻兄弟选择器

div p+div{
    background-color: #cfc;
}

作用：根据相邻关系查找标签，给后一个标签添加样式。

10.兄弟选择器

作用：当两个标签不相邻时，要想修改后一个标签的样式，需要使用通用兄弟选择器。

div p~ul{
    background-color: #ccf;
}

4.选择器优先级

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

        1.id选择器  #id

        2.类选择器  .classname

        3.标签名选择器  div，p

        4.子选择器  <

        5.后代选择器    li a

        6.伪类选择器    a:hover

        最后，需要注意的是：

            !important的优先级最高；

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

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