HTML的零星笔记 - 基础

html的部分细碎笔记

写在前面 ——

写页面一定要先整体布局，有初步结构，再开始着手往里面写代码，一定要把代码写规范，正确合理的利用标签，这样做开发才有利于后期的成品在展示中被搜索引擎找到。搜索引擎抓取的是网页中的文字和图片，根据抓取的标签不同，来确定你的作品（网页）的权重值，所以语义性标签的合理使用很重要。比如a标签需要添加title的属性，img标签要添加阿alt和title的属性等

---

举个例子

图片四要素

1.图片路径需要使用绝对路径方式;
2.img元素加上alt属性，修饰性图片alt属性内容留空，内容性质
3.图片alt属性写相应内容;
4.必须加上width和height属性，值为它的原大小，但不要用来对它进行缩放。

---

/-以下的一些标签属性都是最开始接触代码的时候一点点记在备忘录，恰好又打开手机看到， 就发了上来-/
—— 【 很少也很基础的笔记 】

---

简单的页面初始化
*｛margin：0；
padding：0；｝

position：relative；父级相对定位 参考系
absolute；子级绝对定位

bottom：10px；底部距离
border-bottom：1px dashed #f03（虚线红色）底线

text-align：center；文本居中 水平居中
line-height：80px；父级一半 行高=高度

均分

display：flex；开启弹性盒模型布局
justify-content：space-around；
主轴横向排列均分
align-items：center；
辅轴排列 居中
小圆点

cursor：pointer；/小手指示/
li｛list-style：none；｝清除小圆点
margin：100px auto；上下100，左右居中
box-shadow：0px 0px 4px #f30；横向位移，纵向位移，阴影羽化程度，颜色
float：left；左浮动

opacity：0；透明度过渡

border-radius：10px；圆角
伪类，鼠标放上去的动作样式
a：hover｛margin-left：6px；color：red；text-decoration：underline；｝ /下划线/

hover｛font-weight：bold；加粗 border-left：2px solid #fff；左边线 ｝

样式合并：h3，p

display：block；变成块级显示

overflow：hidden；超出隐藏

transition：.5s；css3过渡
中心扩散

text-indent：-2000px；隐藏 a标签的文字 淘宝 一般用于图标logo

用h1～h3标签强调时，不加粗
font-weight：normal；（尽量写数字400）

块元素的特点

1. 独占一行 在默认的情况下 其宽度自动填满父元素宽度
2. 宽度和高度可以控制的 通过 display: inline 转化为块元素
3. margin 和 padding 横向 纵向设置都有效

行元素的特点

1. 并排显示 不能独占一行
2. 宽高不可设置，只能由内容自己撑开
   也可以通过 display: inline 转化为块元素
3. margin 和 padding 横向设置有效
   纵向设置不会产生边距效果

4. 除ins和del外 其他都不能包括块元素

   以上仅供参考学习