一、HTML入门

1.1、什么是HTML

HTML是用来描述网页的一种语言；

HTML是超文本标记语言，不是一种编程语言，而是一种标记语言；

HTML基本结构和标签含义

<!DOCTYPE html>
<!--!DOCTYPE文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页-->
<html lang="en">
<!--lang语言种类-->
<head>
    <meta charset="UTF-8">
    <!--在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码，-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html标签</title>
</head>
<body>
    <!--常用HTML标签
        标题<h1>-<h6>,属于块级元素，只用于标题，不能变粗和大号字体;
        段落可以将文档分割若干段落，通过<p>来定义;(浏览器会自动的在段落前后添加空行，希望在不产生一个新的段落的情况下进行换行，请使用<br>)
        区块 <div>标签没有特殊的含义，属于块级元素，浏览器会在其前后显示拆行;
        <br>换行，空标签，没有结束标签;
        <hr>在HTML中创建一条水平线，表示主题结束，没有结束标签;
        <span>标签没有特殊的含义，属于内联元素，可作为文本的容器;
        图像<img>标签有两个必须属性，src和alt，空标签，没有结束标签，<img src="url" alt="some_text"
        链接<a> 语法：<a href="url">Link text</a>，使用target属性，可以定义文档在何处显示，常用的有{
            1 在新窗口打开target="_blank";
            2 在当前窗口打开target="_self";
        }
        ------------------------------------------------------------------------

        标签 ---------- 描述
        <b> ----------- 定义粗体文本
        <strong>------- 定义加重语气
        <i>------------ 定义斜体
        <em> ----------定义着重文本
        <sub> ---------定义下标字
        <sup> ---------定义上标字
        <del> ---------定义删除文本
        ---------------------------
        相对路径和绝对路径
        1.相对路径：
        （1）（/）：一个斜杠表示根目录；
        （2）（./）：一个。跟一个斜杠表示当前目录目录；
        （3）（../）：两个点跟一个斜杠表示上一个极目录；
        （4）（../../）：表示上上极目录，以此类推；
        2.绝对路径
         （1）完整的url地址
    -->
</body>
</html>

1.2、语义化

1.什么是语义化：合理的HTML标记以及其特有的属性去格式化文档内容；

2.语义化的好处：

在没有css的情况下，可以更好的展示内容结构；

语义化有利于用户体验，使代码具体可读性，便于团队开发维护；

语义化有利于SEO（和搜索引擎建立良好的沟通，有利于爬虫抓取更多有效信息）

1.3HTML特殊字符

代码	效果	描述
&it	<	小于号或者显示标记
&gt	大于号或者显示标记
&amp	&	显示其他特殊字符
&reg		已注册
&nbsp		不间断的空白

二、CSS入门

2.1、css简介

css通常称为css样式表或层叠样式表，主要设置HTML的文本，图片布局

2.2css语法

css规则是于选择器、一条和多条声明

1.选择器通常是需要改变样式的HTML

2.声明用{}起来，每条声明由一个属性一个值组成，用；隔开

h1{ color:red;font-size:14px;}

2.3基础选择器

2.3.1通配符选择器

用一个星号表示，单独使用，匹配使用的元素，通常选择页面所有的元素，清除自带的内外边框；

{  margin: 0;padding: 0; }

2.3.2元素选择器

以标签名称为选择器，叫类型选择器，匹配文档的所有对应的元素

2.3.3class选择器

又叫类选择器

2.3.4id选择器

可以选择带有制定id的元素设置样式

2.4基础选择器优先级

由高到底分别是

id选择器；
类选择器；
元素选择器；
通配符选择器；

2.5引入css样式

2.5.1内联样式（行内样式）

要使用内联样式，需要在相关的标签使用样式style属性，Style属性可以包含任何css属性

<div style="width: 100px;height: 100px;"></div>

2.5.2内部样式表（内嵌式）

内部样式表是讲css代码集中HTML文档的head头部标签中，并且style标签定义，

<head>
<style>
        .box{
            margin: 0;padding: 0;
        }
</style>
</head>

2.5.3外部样式表（外链式）

<head>
<link href="css文件路径" rel="stylesheet" type="text/css">
</head>

link标签属性介绍： 1.href:规定被链接文档的位置。 2.rel:规定当前文档和替换文档的关系。 3.type:规定被链接文档的MLME类型。

2.5.3多重样式优先级

内联样式>id选择器>class选择器>元素选择器>通配符选择器>浏览器默认样式

2.6文本字体属性

2.6.1css字体

font-size属性设置文本大小；
font-family属性设置文本字体系列；
font-style属性指定斜体文字的字体样式（1）normal显示正常；（2）italic显示斜体
font-weight属性设置文本粗细（1）normal显示正常；（2）blod显示粗体（3）关键字100-900
line-height属性设置行高（1）normal显示正常；（2）number设置数值；（3）设置固定的行间距

2.6.2css文本属性

color属性设置颜色
text-align设置文本的水平对齐方式（1)left居左对齐（2）right（3)center居中
text-decoration设置文本的装饰效果（1)none默认（2）underline定义文本下的一条线（3)overline定义文本上的一条线（4）line-through定义穿过文本的一条线
text-indent 文本首页的缩进

2.7css长度单位

px：像素，绝对长度单位；
em：相对长度单位，相对于字体尺寸font-size；
百分比
rem：相对字体长度单位，根元素（html）font-size来计算；

HTML和CSS入门