HTML和CSS

什么是HTML?

具有特殊含义的标签，遵循"盒模型"，组成整个网站的结构

代码类似这样：

<tag attr1=vaule1 attr2=vaule2 attr3 ......>content</tag>

tag 标签名。理论上可以用任何名字的tag，只要结构正确。但是w3c为了统一，就制定了标准。像div img a这样的预定义标签就能够被浏览器识别，如果使用自定义标签就需要写Javascrpit代码自己解析。现在很多的前端框架就是这么做的，reactjs，vuejs
attr=value 属性和值，可以没有value。常见的属性有src class id这些，当然你也可以自己定义属性，不过浏览器不会解析你的属性，需要自己解析
content 标签内容。没什么好讲的

常用HTML标签

1.`div`

目前最常用的

2.`<span>`设置字体 (不推荐用`<font>`标签)

<p>我最喜欢的颜色是<span style="color: red;font-size:20px;font-weight:bold;">红色</span>。</p>

设置display为block换行
<span style="display:block;">第一行
第二行
第三行<span>

使用<br>换行
<br>

3.`<br/>`或`<br>`换行

br是break的缩写

什么是CSS - 定义网站显示风格(颜色，字间距，背景...)

使用CSS选择器设置元素的样式

selector {
  property1: value1;
  property2: value2;
  ...
}

selector是选择器的名称，它用于指定要应用样式的 HTML 或 XML 元素
property和value是CSS样式属性和属性值，用于设置元素的外观和行为

CSS选择器可以根据元素的标签名、类、ID、属性、伪类、伪元素等进行选择

标签选择器：p 表示选择所有的段落元素。
类选择器：.my-class 表示选择所有的 class 属性中包含 my-class 的元素。
ID 选择器：#my-id 表示选择所有的 id 属性等于 my-id 的元素。
属性选择器：[type="checkbox"] 表示选择所有的 type 属性等于 checkbox 的元素。
伪类选择器：

它可以在元素的状态不同的情况下，为元素添加不同的样式

格式 :功能名称(参数这个参数也可以是CSS选择器)

:hover 鼠标悬停在元素上时的状态

:first-child 选择某个元素的第一个子元素

:not(.my-class) 排除具有 my-class 类的元素

:not([type="checkbox"]) 排除所有 type 属性等于 checkbox 的元素
伪元素选择器：::before 表示选择元素前面的伪元素。

使用HTML中的`style`属性设置元素的样式

使用 style 属性设置一个段落元素的文本颜色为蓝色

<p style="color: blue;">这是一段文本。</p>

常用属性

字体大小 font-size:20px
字体加粗 font-weight:20px
边框 border:red 2px solid}
内间距padding/外间距margin (上,右,下,左)
元素定位

absolute 在父元素中的绝对位置

relative 按照元素在DOM中的顺序进行排列

fix 固定定位不随页面滚动而滚动，一直保持在视口相对位置不变

SVG

由<svg>做最外层标签，里面再包含几个<rect> <path>类的，浏览器就可以识别到并绘制出来其中有几个比较重要的属性

svg的viewBox，只是规定了SVG内部元素的坐标系和大小。元素的实际显示大小还是要通过css中width和height指定。如果内部的rect显示区域超过了viewBox的大小，超出部分就会被截掉；反之，就会产生空隙。所以为了不留空隙，viewBox的值应该取内部绘制元素的最大值
transform 平移，旋转，斜切（skew），矩阵变换