关于web的一些简要的介绍

关于web

  web前端(HTML5开发)

  前台是做界面的，前台页面跟用户的交互。

  前端涉及到的内容非常丰富：HTML5大前端。

  学前端：初级。

语言：HTML(结构) CSS(样式) JavaScript( 行为 )

工具：

	编辑器： vsCode ( sublime HBuilder webstrom )

        浏览器：chrome ( IE firefox 苹果 欧鹏 )

        切图软件：PhotoShop ( CC的版本 )

  HTML : 

       HTML写法： 单标签： <单词> -> <image>  双标签：<单词></单词>  ->  <title></title>

       HTML文件：xxx.html 

  HTML基本操作：

       创建初始结构 : ! + tab键

       常见标签：

              标题：<h1></h1>  <h2></h2>   ....  <h6></h6>

                    h1在一个网页中只能出现一次（比较重要的标题）

              段落：<p></p>

              文本修饰：<strong></strong> <em></em> ... 

              图片：<img>
                    属性：src、alt

              链接: <a></a>
                    属性：href、target

              列表：
                   无序列表： ul li
                   有序列表： ol li
                   定义列表：dl dd dt

              表单：
                   输入框、复选框、单选框、下拉菜单

              表格：
                    table tr td th

              <div> : 划分区域的 
              <span> : 修饰文本的( 通过CSS样式修饰 )
                    注：div和span默认都是没有任何样式的

  CSS样式：

        样式文件 : xxx.css 
        
        如何在html文件中引入css文件： <link>

        CSS写法：选择器{ 样式1 : 值1; 样式2 : 值2; }

        选择器：
              标签选择器（ TAG选择器 ）
              ID选择器：特点唯一性。CSS需要添加井号标识符。
              CLASS选择器：跟ID区别，可以重复调用。CSS需要添加点标识符。
              通配
              群组
              层次 : 后代、子代、兄弟 、相邻 ...
              属性 : 
              伪类 : 添加一些正常情况下填不上的样式。
                    :hover -> 鼠标移入的时候添加的样式
                    :focus -> 获取光标的时候
                    :after、:before -> 往标签内部添加一些内容，可以直接对内容设置样式。
                    :nth-of-type、nth-child

        CSS基本样式：
             
              宽：width
              高：height
                    px 像素单位
                    % em rem vw vh ...
              边框：border:1px red solid( dashed 、dotted );
                    border-top border-bottom border-left border-right

              背景：
                  背景色：background-color
                    颜色：单词 、rgb(255,0,0)、十六进制颜色表示法 #FF0000
                  背景图：background-image
                    默认：是平铺的。
                  背景图平铺方式：background-repeat
                          no-repeat repeat repeat-x repeat-y
                  背景图位置：background-position

              文本:
                    文字大小：font-size ( 默认文字大小是16px )
                    文字粗细：font-weight ( normal、 bold )
                    文字样式：font-style italic(斜体) normal(正常)
                    字体类型：font-family （默认 微软雅黑）
                    字体颜色：color
                    文本也有复合写法：font: bold italic 20px 宋体;

              段落：
                    首行缩进 : text-indent
                    对齐方式：text-align : justify(端点对齐) 
                    段落修饰：text-decoration
                    单词大小写：text-transform
                    行高：line-height

              盒模型：
                     content : 内容  ( width height )
                     padding : 内填充
                          padding-left
                          padding-right
                          padding-top
                          padding-bottom
                     border : 边框
                     margin : 外边距
                          margin-left
                          margin-right
                          margin-top
                          margin-bottom

                    padding : 20px;  （上下左右都是20）
                    padding : 20px 30px;  （上下是20 左右30）
                    padding : 20px 30px 40px 50px;  （上20 右30 下40 左50）

        

        CSS特性：
              1. 样式的复合写法
                    背景：单一样式 -> background-color
                    背景：复合样式 -> background


        标签的分类：

              1. 块( block )  div h1..h6 ul ol li p ...
                    特点1：独占一行。
                    特点2：不设置宽的情况下，宽度跟父标签一样。
                    特点3：所有样式都支持。

              2. 内联 ( inline ) a strong em span img ...
                    特点1：挨在一起，一行排列。
                    特点2：宽度由内容决定。
                    特点3：不支持width,height,margin,padding也有小问题。
                    特点4：内联元素有空隙。

              3. 内联的块 ( inline-block )  input  select textaera ...
                    特点：即具备块的特点，又具备内联的特点。
                    支持width height 而且在一行。

        布局：
              上下布局  块的默认
              左右布局  块就要改变排列方向 ( 浮动 , 弹性 ... )


  vsCode快捷操作：

        h1 + tab键 : 自动生成标签

        shift + alt + 下键 : 快速复制一行

        ctrl + d键 : 选择下一个一样的文本

        alt + 上下键：快速移动代码的位置

        注释：
              单行：ctrl + /键
              多行：shift + alt + a键