梳理HTML基础

结构:

常用标签元素：

<head> 元素:

包含了所有的头部标签元素。

在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

<!doctype html><!-- 文档头 -->
<head><!-- 脑袋是头部标签 -->
      <title><!-- 显示文件名 --><title>
 </head>
<body><!-- 身体网页里面显示的内容 -->
</body>
</html>
<!-- 切记必须默认闭合  -->

<title> 元素:

定义了浏览器工具栏的标题。

当网页添加到收藏夹时，显示在收藏夹中的标题。

显示在搜索引擎结果页面的标题。

HTML<title>元素不仅可以显示文本，也可以在左侧显示logo等图片。

显示时，要将<link>标签放入<head>里。

举例：

<!doctype HTML>
<html>
<head>
<link rel="shortcut icon" href="图片url">
<title>这是一个带图片的标签</title>
</head>
<body>
……
……
……
</body>
</html>

<base> 标签：

描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接。

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
<!-- target 属性规定在何处打开被链接文档。
 -->

_blank	在新窗口中打开被链接文档。
_self	在被点击时的同一框架中打开被链接文档（默认）。
_parent	在父框架中打开被链接文档。
_top	在窗口主体中打开被链接文档。

<link> 标签：

定义了文档与外部资源之间的关系。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<style> 标签：

定义了HTML文档的样式文件引用地址.

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档。

<head> <style type="text/css"> 
body {background-color:yellow} 
p {color:blue} 
</style>
</head>

<meta>标签:

描述了一些基本的元数据。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<!-- 为搜索引擎定义关键词  -->

<meta name="description" content="免费 Web & 编程 教程">
<!-- 为网页定义描述内容  -->

<meta http-equiv="refresh" content="30">
<!-- 每30秒钟刷新当前页面 -->

<h1> - <h6> 标签:

<h1>这是一个标题</h1> 
<h2>这是一个标题</h2> 
<h3>这是一个标题</h3>

标签 <p> ：

段落用，上下留白多。

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

标签 <a> ：

<a href="https://www.runoob.com">这是一个链接</a>

标签 <img>

<img src="/images/logo.png" width="258" height="39" />

<image>图片标签，不需要闭合，需要放置src地址属性<img src='地址'>

<a href="里面放入要跳转的地址">链接定义名</a>，相当于某种意义上的超链接

<a href="里面放入要跳转的地址"target=_blank>超链接定义名</a>
target=_blank<!-- 打开新页面跳转，保留原页面 -->

<a href="里面放入要跳转的地址">img src='地址'</a>
<!-- 图片跳转，a标签里放入img标签 -->

<div>标签；

身体的各个部分都是<div>标签构成,特性是一层一层的。

<ul>标签：

无序列表标签(总标签)，与<li>搭配使用。

<ul>
<li></li><!-- li可以有无限个，内容放置在li里就行，ul下面第一层只能放li标签 -->
</ul>

<ol>标签：

<ol></ol><!-- ol有序列表下面默认使用数字排序，使用方法与<ul></ul>一样 -->

<input>标签:

<input type="类型">{ ;input标签
text 默认可输入文本框
password 输入字符隐藏，用于密码框
radio 用于选项单选框（点框）
checkbox 多复选（钩框）
color 颜色框 弹出颜色选择
}
网页面上的常见按钮；
<input type="button" value="按钮上的文字">

<button>标签：

<button>内容</button>；button标签按钮类型

笔记之外，更多梳理网站；HTML|菜鸟教程

css部分：

三种引入方式:

1，标签选择器（大量选择）
2，ID选择器（唯一选择；权重最高）
3，类选择器（某一类选择;class,广泛用）
优先级id>class>标签选择器

atyle标签选择器：

会把所有选中的标签都赋予这个样式
<style>标签的3种方式：

外链式；一般推荐使用形式，节省资源，不乱
内嵌式；适合背景
行内式；直接写入标签，浪费大量资源

执行等级；行内式>内嵌式>外链式

代码永远自上而下执行

1，（内嵌式）

<style>
选中类型的标签{width（页面块宽度）: 200px（数字参数）; height（页面快高度）:200px（数字参数）;
background（背景色）:【颜色词】
</style>

2，（外链式）

<link rel="stylesheet" type="text/css（格式声明）" href="引入当前环境下的外链地址">

3，（行内式）

<div style='width:300px;height:200px;
background: 颜色词;' /div>

class

后代选择器（点隔开）；

更精准的选择需要的元素
在css中更精准，权重就越高
经常使用

.mydiv .last p{background: green;}
    </style>
</head>
<body>
    <div>
       <p>感谢大家的学习为了将来
       </p>
    </div>
    <div class="mydiv">
        <div class="last">
            <p>可以可以

群组选择器(点加逗号隔开)；
有通用样式就，利用群组选择器
方便快捷，归类样式

.,a1,.a2,.a3{background: green;}
    </style>
</head>
<body>
    <p class="a1"今天心情不错></p>
    <p class="a2"今天心情不好></p>
    <p class="a3">还不错</p>

margin/padding 外边距/内边距（均可以互换）
内边距会改变元素大小，外边距不会改变
选择器{margin-right: 数量px;margin-left:数量px;margin-top: 数量px;}

缩写；

margin:4个值上右下左
margin:3个值上左右下
margin:2个值上下左右

所有的html元素一共可以分为三大类

常用的就两种:块状元素
div 最基本的块状元素

1，支持宽高 margin（外边距） padding（内边距）
2，width 默认是100%
3，块状元素可以随意嵌套

行内元素(input，valve)

1，span最基本的行内元素
2，不支持宽高，但宽高会随着内容变化而变化
3，支持margin，padding，页面上不独占一行，没有任何宽度默认
4，行内元素只能嵌套行内元素

拓展；颜色选择（可以利用photoshop）

1，{color:rgb(红数，绿数，蓝数)}专业个性化
2，{color:颜色词}常用背景
3，{color:#代码号}常用特定

border-边框:

1，占元素的大小，是往外面长的
2，缩写样式；

。border:大小（10px）solid/dashed（实线/虚线）
。颜色（#）（rgb（））（颜色词）

3，非缩写样式；

。border-width
。border-color
。border-style

background-背景

非缩写；

。background-color-背景颜色
。background-image-背景图片
。background-size-背景图大小
。background-repeat-背景图平铺

（不平铺no-repeat）
（横坐标x轴平铺repeat-x）
（纵坐标y轴平铺repeat-y）

。background-position-背景坐标
（放两个参数，第二个参数默认center居中）
（第一个参数x轴，第二个参数y轴）
（支持 right右/bottom下/left左/top上/center居中写法）

font:比较常用的缩写样式:

font-size 可以控制文字大小

1，medium 合适的默认样式
2，后面可以直接放入像素（比较精准）如果未来去做网页的时候那么就使用工具量一下像素（网页截图），然后写上就可以了
3，相对大一点

large
x-large
xx-large

4，相对比较小一点

samll
x-samll
xx-samll

font-weight 可以控制文字的粗细体

1，bold 加粗 bolder再加粗
2，lighter加细
3，支持数字1~1000，粗细调试

font-family 给予元素字体样式

1，开发人员上面的字体，如果使用者本机没有，无法网页显示
2，进行“或操作”（逗号隔开）
font-family:"simsun","Microsoft yahei"有其一选其一

line-height 可以设定内容在自己的内部的高度位置

1，如果大小为元素的大小时，内容会在中心
2，可以控制行内元素，但是控制不了块状元素
3，% 继承父级的高度的来控制的，支持数字，常用px，不支持负数

拓展；

1，在html中有些元素有自己的默认样式，
2，“*”星号在选择器中可以作为“通配符” 可以选取所有的元素，层级算是最低了

font-style样式

1，italic（斜体）是使用字体的斜体
2, oblique （倾斜）让字体倾斜

font-variant

1,把段落设置为小型大写字母字体
2，small-caps

CSS 定位（重要）

一，float: leftr;position: relative //相对定位//

1，相对自己最早的初始位置进行定位
2，left(左) right(右) 只能选择一个
3，top（上） bottom（下）只能选择一个
4，z-index z轴（必须有position: relative）支持负数输入
5，相对定位不会影响原来的位置，显示的元素会变位置

二，position: absolute //绝对定位//

1，脱离标准流（从左往右，上至下排序）
2，原来的位置不会留着
3，绝对定位是根据有定位（加了position: absolute)父元素(嵌套的上一层)进行定位
4，如果父元素没有定位那么就会找到最外层的元素直到html

三，position:fixed //窗口定位//（鼠标滑轮滑动时的固定显示元素）

1，只会根据窗口不看父级定位
2，有滚动条的话，一直跟着窗口走，绝对定位不会跟窗口走，

四，position: inherit //继承定位//

1，父级（上一层）是什么定位他自己就是什么定位

五，static默认值（无定位）

1, display 显示样式
2，:none 让原来的元素进行消失（无论行内还块状都会消失，位置不会保留，不是隐藏）
3，:block（display: inline-block 行内块元素）让任何元素转成块状元素，并以块状元素显示（float也可以让元素变成块状元素）
4，inline 让任何元素转成行内元素，并以行内元素显示

拓展：

行内元素-横着码
块状元素-支持宽，高，独占一行
行内块元素-支持宽，高，不独占一行，横着码
left % 对应的就是父级的width
top % 对应的就是父级的height

元素单位

1，px（像素）绝对单位不会因为浏览器窗口缩放大小而变化，单位的值必须是整数值
2，百分比% 相对单位，无具体像素值，会因为浏览器窗口缩放大小而变化，百分比计算:根据父级元素为参考（例heigh 50% 就是父级高度的一半）

3，in - 表示英寸，是一个物理单位，在CSS中被直接映射成为px; 转换的方法是 1in = 96px
4，cm - 表示厘米，在生活中常用的单位，同样被映射为 px; 转换方法为 1cm = 37.8px
5，mm - 表示毫米，与cm类似，转换方法为 1mm = 0.1cm = 3.78px
5，em 与 rem

em 单位的值等于基本元素或父元素的字体大小。

例如，如果父元素的字体大小为16px，则所有直接子元素中的1em值将计算为16px。基于基本单元的知识，可以很方便的增大或减小子元素的字体大小。这里的值不需要是整数。

使用em可以轻松地将各种元素的字体大小保持在固定比例。

例如，如果父元素的font-size的值为50px，则将子元素的字体大小设置为2em, 相当于设置为100px。类似的，将它设置为0.5em将使得子元素的字体大小为25px。

另外有一点需要注意：如果想要通过 em 设置当前元素的大小值，并且不是相对于直接父元素，而是相对父元素的父元素或者根元素，就会变得很复杂，因为每一层都要进行计算

6，可视区高度单位(vh)和可视区宽度单位(vw)

vh单位与可视区的高度相关。vh的值等于可视区高度的1/100。如果我们要根据浏览器窗口的高度来调整元素，这个单位是有用的。例如，如果可视区的高度是400px，则1vh等于4px。如果可视区高度为800px，则1vh等于8px。

类似的，vw单位与可视区的宽度相关。因此可以推算1vw的值。 1vw就等于可视区宽度的1/100。例如，如果窗口的宽度为1200px，则1vw将为12px。

7，vmin 和 vmax

vmin 是当前 vm 和 vh 中较小的一个值，也就是说，是可视区域较小的一边的1/100的长度；例如：可视区大小为 1000x800, 则 wmin = 800/100 = 8px; 如果可视区大小为 600x800, 则 wmin = 600/100 = 6px;

类似的, wmax 是当前 vm 和 vh 中较大的一个值，也就是说，是可视区域较大的一边的1/100的长度；例如：可视区大小为 1000x800, 则 wmin = 1000/100 = 10px; 如果可视区大小为 600x800, 则 wmin = 800/100 = 8px;

opacity 透明效果样式支持小数

radius
boder-radius 页面框四角圆角
boder-left-top 页面左上角变成圆角以此类推

hover 鼠标触到变色

例子：

先记到这里，虽然看起来挺乱的

.topnode ul li a:hover{
color: #071ac8;
}

自记HTML+CSS