前端小白学习first-day

HTML部分

01 基础

HTML ： 是超文本标记语言
HTML5 ：是HTML的第5个版本，大致由HTML+css+js组成
SEO ：搜索引擎优化
meta 源信息标签
属性 ：

1. charset 设置编码格式
2. author 设置网页开发者
3. name 设置网页信息类型，若设置keywords，一般不可超过10个
4. content 设置对应信息的值

title标签：其中内容表示权重最高的标签，内容不可随便书写。
body标签：用户浏览的内容显示在body中，此过程叫标签的渲染。
DOCTYPE作用：声明文档类型，告诉浏览器按html格式进行渲染。
head标签：里面的内容是给浏览器进行识别的。

02 块元素

标题标签：共有h1~h6六种，h1只能用在logo上或者最大标题（新闻标题）处
h2整个页面不可超过20个
h3~h6可以无限使用
设置列表样式：

list-style-type: circle  /*空心圆*/
                dotted  /*实心圆（默认）*/
                square /*方形*/
                none  /*无样式，清除列表样式*/
                lower-roman  /*大写罗马文*/
				upper-roman  /*小写罗马文*/
                upper-alpha  /*大写英文*/
				lower-alphe  /*小写英文*/

<adress> </adress> /*专门用于写地址，自动显示为斜体
<iframe src="" height="" width="" frameborder="0px"></iframe>/*框架，用来直接引入其他页面内容*/

03 行元素

<a href="http://www.baidu.com" target="_self">百度</a>

a标签的作用：

• 超链接 href 设置链接地址
• 跳到指定位置操作：用法：给href属性设置id (#id) (id指的是具体元素的id名）<div id="div" style="……"></div>; <a href="#div">跳转到div</a>
• 设置无跳转: a. href="###" ; b.href=“javascript: void(0);” <a href="#">回到顶部</a>; <a href="###">一动不动</a>; <a href="">刷新</a>

其他标签
有时太多div会，会需要命名很多名字，用其他不同的标签会避免重复太多div，造成代码不清楚，前后容易混乱

<span></span> 可以类比div，无实际意义，只做标记。
<hr/> 创建一条分割线
<var></var> 斜体 
<i></i>  斜体
<em></em>  斜体且语义化加重（常用）
<b></b>  粗体
<strong></strong> 粗体且语义化加重，语义化权重大于em（常用）
<q> 引用标签，引用的是一段简单内容
<blockquote> 引用一段话，内容长，完全引用，比较复杂
<code></code> 包含一段代码   eg:<code>&lt;html &gt;</code>
<img src="" alt=""> 图片标签，src中引用图片地址，alt：当图片未被加载时，可作为图片提示信息

04 标签总结

块元素：独占一行，可设宽和高，支持上下padding和上下margin。
行元素：在同一行显示，不可设宽和高，不支持上padding和上下margin。
标签嵌套规范：

• 标签之间可以相互嵌套
• 块标签可以嵌套块标签，块标签可以嵌套行标签，行标签不可以嵌套块标签
• h1-h6，p，dt标签不可以嵌套块标签
• p标签不可以相互嵌套，a标签也不可以相互嵌套，a标签里可以放任何标签，就是不可以放a标签

05 CSS基础

<link rel="stylesheet" href="./css/style.css">
      rel用于定义链接的文件和html文档间关系，如果关联两个样式表，最后加载的那个
      样式表一定是最终显示出来的样式，style表明指定加载的是样式表。
@import url("./css/import.css"); 此引用要放在style的最上面。
<link rel="icon" href="./1.jpg">  icon是网页标题前显示出的小图标

css层叠样式表有三种引入方式：

1. 行间样式表 ：用于邮箱（此优先级最高，避免邮件被重置）。
2. 内部样式表：用于单页面开发可以，但是一般不这么引用，要遵从样式分离的原则。
3. 外部样式表（最常用）：开发时从外部引入，方法有两种，a.link标签（没有兼容问题，强大，link还可以引入除了css外的其他格式文件）；b. @import 一般老的浏览器会用这种引入方式。

06 基础样式

1.border 复合样式
border：border-width border-color border-style
（其中style包括solid：实线；dotted：点虚线；dashed：虚线；double：双实线；ridge：凸槽；outset：外嵌；inset：内嵌）
2.text样式
a. color: 可用英文单词表示颜色（blueviolet），也可以用十六进制（#ff0），还可以用rgb(rgba)表示颜色。
b. text-align：文本对齐方式（left, center, right）
c. text-decoration：文本修饰（underline, overline, line-through, none）
d. text-transform：针对英文的文本转换 （uppercase：全部大写；lowercase：全部小写；capitalize：首字母大写，前提是所修饰的内容全部是小写才可转换）
e. line-height：num 对单行文本而言，行高等于元素自身的高度，则文本垂直居中，对于多行文本，则为行间距
f. 首行缩进：text-indent：num 设置首行距离左侧的间距
g. word-spacing：num 单词之间的距离
h. letter-spacing：num字符之间的距离
i. overflow：处理子级超出父级的部分，该属性设置在父级上（hidden：超出部分隐藏；scroll：滚动查看超出部分；auto：自适应内容，需要就滚动，不需要就不滚动）

  单行文本超出内容自动添加省略号（常用）
  white-space：nowrap；（强制文本不换行）
               normal （文本换行）
  text-overflow：ellipsis；（设置超出文本样式为省略号）
  overflow：hidden；（要配合使用前两个）

07 font基础

字体设置
a. font-style：italic 斜体；normal 正常渲染
b. font-variant：small-caps 小型大写字母，可作为下标，注意字母是大写的
c. font-weight：设置字体是否加粗（也可以用数值表示加粗程度），400表示normal正常，700表示bold加粗，900表示bolder更粗，实际显示的与bold一样
d. font-size：num 设置字号，谷歌浏览器最小的是12px，默认的是16px
e. font-family: ‘微软雅黑’, ‘黑体’, ‘Times New Roman’;

font是复合属性，其顺序为：

font：font-style  font-variant  font-weight  font-size  font-family  
如果要写复合字体样式，至少font-size和font-family要写

背景设置
background属性是复合属性
background-color：颜色与前面一样同样包括三种写法
background-image：url()；
background-repeat：repeat-x（沿着x轴方向重复）；repeat-y（沿着y轴方向重复）；no-repeat（不重复）；
background-position：有两个值，第一个是水平方向的定位位置，第二个方向是垂直方向的定位位置（可以用left，bottom，right，right，center；也可以用数值px表示）；
background-attachment：scroll（默认值，背景随元素一起动）；fixed（把背景图固定到页面的某个位置）；
background复合写法顺序：color image repeat position attachment；