HTML学习分享二

 

 

一 . 常用快捷键

 

    ctrl + s : 保存

    ctrl + x、ctrl + c、ctrl + v : 剪切、复制、粘贴

    ctrl + a : 全选

    shift + end : 从头选中一行

    shift + home : 从尾选中一行

    shift + alt + 上下键：快速复制一行

    alt + + 上下键：快速移动一行

    ctrl + z : 撤销

    ctrl + y : 还原

    alt + 光标左键：实现多光标的操作

    ctrl + d : 快速选中后面一样的代码

    tab : 向后缩进

    tab + shift : 向前缩进

    ! + tab : 快速创建初始代码   

    ctrl + /，shift + alt + a 注释

 

 

二 . 常用的标签

    1.标题

        <h1></h1>...<h6></h6>

 

    2.段落

        <p></P>

 

    3.文本修饰标签

 

   （1）强调标签，可以给文本加粗

            <strong></strong>

 

   （2）强调标签，可以给文本加斜体（没有strong强调的那么强烈）

            <em></em>

 

   （3）下标文本，上标文本

            <sub>  <sup>

 

   （4）删除文本，插入文本

            <del>  <ins>

         拓展：<b></b>  <i></i>

 

     4.单标签

    （1）让文本换行

            <br>

 

    （2）水平线

            <hr>

     

     5.图片标签

     （1）单标签

            <img>

 

     （2）图片的链接地址

            src=""

 

     （3）当图片出现问题的时候，会产生提示文字（提升了用户体验）

            alt=""

 

     （4）图片的宽和高，单位是像素（px）

            width="400px" height="400px"

     

     6.链接

     （1）双标签

            <a></a>

 

     （2）链接地址

            href=""

 

     （3）跳转的方式

            target=""    默认：当前窗口中 _self    新窗口打开_blank

 

     （4）改变a标签的默认行为

            <base>        

    

     7.列表标签

             三大类：

 

     （1）无序列表

            <ul></ul> : 列表的最外层容器

            <li></li> ：列表的子项

            重点：ul和li之间 不能添加其他标签

            快捷创建 : ul>li*n

 

     （2）有序列表

            <ol></ol> ：双标签

            <li></li>

 

     （3）定义列表

        带有描述性标题的列表

            <dl>

                <dt></dt> ：描述标题

                <dd></dd> ：描述内容

            </dl>

 

     8.表格

     （1）表格的最外层容器

            <table><table>

 

     （2）定义表格行

            <tr></tr>

 

     （3）定义表头

            <th></th>

 

     （4）定义表格单元

            <td></td>

 

     （5）定义表格标题

            <caption></caption>

    

        表格的属性

     （1）表格边框

            border

 

     （2）单元格内的空间

            cellpadding

 

     （3）单元格之间的空间

            cellspacing

 

     （4）合并行

            rowspan

 

     （5）合并列

            colspan

 

     （6）左右对齐方式

            align    取值：left,center,right

 

     （7）上下对齐方式

            valign   取值: top,middle,bottom

 

     （8）表格的宽高

            width,height

    

     9.表单

        外层：form

 

        控件:input(单标签）

     （1）决定当前是什么控件

            type=""

 

     （2）radio单选框中

            name=""属性可以让单选框成为一组（属性值是自定义的）

 

     （3）输入框

            text

 

     （4）密码框

            password

 

     （5）复选框

            checkbox

 

     （6）单选框

            radio

 

     （7）上传控件

            file

 

     （8）提交按钮

            submit

 

     （9）重置按钮

            reset

    

        注：表单嵌套是没有必须的嵌套规则，比较随意的

 

        多行文本框：textarea

     （1）下拉菜单

            select option（双标签）

 

     （2）选中的默认项（select）

            selected属性

 

     （3）禁止操作（select input）

            disabled属性

 

     （4）选中操作（input）

            checked属性

 

     （5）显示下拉个数（select）

            size属性

 

     （6）多选操作（select，input）

            multiple

 

     （7）输入框的提示信息（input）

            placeholder

 

     （8）辅助表单

            label  提高用户体验的，让选中范围变大。

     

     10.div和sapn

     （1）划分区域的

            div

 

     （2）修饰文字

            span

 

 三.CSS的学习

 

     1.css的引入方式

        （1）内联样式（行间样式）

                样式写到html标签身上的。

                通过style属性添加的

                区别：内联只针对当前标签，不能对样式进行复用。

                建议：尽量不要写内联样式，推荐内部、外部两种写法。

 

        （2）内部样式          

                 <style>

                ...CSS

                </style>

 

        （3）外部样式

                 有一个单独的文件： xxx.css yyy.css

                 <link>定义是引入外部资源，标签引入样式文件

                  href属性：样式的地址

                  rel属性：确定文档（HTML）跟要引入的资源关系

                  区别：跟内部样式的，外部样式可以在多个页面之间复用CSS。

                  还有另外一种外部引入CSS的方式（了解）

                  @import url('地址');

                  区别：https://www.cnblogs.com/my--sunshine/p/6872224.html

     2.CSS的颜色

        （1）单词表示法

                red、yellow、green、blue、white、black ... hotpink

 

        （2）十六进制表示法

                 0 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

                 0 1 10 11 100 101 110 111 ...

                 0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12 ... 1a 1b ..

                 #000000(黑色)   #ffffff(白色)   #ff0000(红色)

 

        （3）rgb三元色

                里面的值：0~255

                rgb(0,0,0) (黑色)   rgb(255,255,255) (白色)   rgb(255,0,0) (红色)

                十六进制中的 ff 转成 十进制 255

                255 -> 2*10*10  5*10  5  ->  每一位 * 进制

                ff ->  f    f   ->   15 * 16   15  ->  255

 

     3.CSS的背景

        （1）背景颜色

                background-color  

  

        （2）背景图片

                background-image    url(地址) : 默认是 x y 都平铺

 

        （3）背景图片的平铺方式

                background-repeat

                repeat;默认

                repeat-x;

                repeat-y;

                no-repeat;

 

             跟图片的区别：

                经常在网页中变化的图，一般用图片。

                而在网页中用于修饰的图，一般用背景。

 

        （4）背景图片的位置

                background-position

                x y : 0 0 ( 针对当前容器的最上角 )

                像素 % | x(left center right) y(top center bottom)

 

        （5）背景图随滚动条的移动方式

                background-attachment

                scroll : 滚动（默认值）

                fixed : 固定

 

                scroll下的定位模式position是根据当前容器来偏移的

                fixed下的定位模式position是根据当前页面来偏移的

 

                小例子：视觉差的网站：https://divups.com/

 

        （6）用的很少，让背景进行固定。

                   background-attachment

 

     4.CSS边框

        （1）边框的样式

                border-style

                solid : 实线

                dashed : 虚线

                dotted : 点线

                border-width：边框的大小

                border-color：边框的颜色

 

        （2） 如何针对某一条边框

                border-left-style

                border-right-style

                border-top-style

                border-bottom-style

                

                颜色设置中，有一个单词表示透明：transparent

     5.background-size

               值：w h -> 背景图的宽 和 背景图的高

               值：单词 cover(覆盖)  contain(包含)

 

     6.align="center"

               属于表格的，而 {text-align:center}这是样式，可以给所有的标题、段落等添加。

 

     7.CSS字体类型

                默认情况下是：微软雅黑

 

                英文字体：Arial（对中文不起作用） 'Times New Roman' （对中文不起作用）

 

                中文字体：宋体，楷体、黑体（对中英文都起作用）

 

                中英文对照：https://www.cnblogs.com/chbyiming-bky/articles/9789869.html

 

                什么时候添加引号：当字体中存在空格的时候，添加引号。

 

                一般字体可以设置多个，通过空格进行添加，主要目的做一些备选方案。

 

     8.CSS字体大小

                 font-size : 16px (默认大小)

                 注：建议字体大小都设置成偶数。(主要目的是考虑文字对齐)

 

     9.CSS字体粗细

                font-weight :

                值 100 200 ... 900

                三个档：100 200 300 (细) 400 500 ( 正常 ) 600 700 800 900 (粗)

                单词 ( normal 默认表示正常 , bold 加粗 )

    

     10.CSS字体样式

                font-style:

                正常的 normal

                倾斜的 italic

 

     11.CSS文本装饰

                text-decoration: overline(上划线) underline(下划线) line-through(删除线)

                可以设置多个值

     

     12.CSS文本大小写 （只针对英文）

                text-transform: lowercase(单词小写) uppercase(单词大写) capitalize(首字母大写)

 

     13.CSS文本缩进   （一般针对中文的）

                text-indent: 32px;

                em单位：相对单位 1em == 一个字的px大小 默认情况下 1em == 16px

    

     14.CSS文本对齐方式

                text-align : left right center justify(两端点对齐)

 

     15.段落的行高

 

                定义：多行段落之间的间距。

 

                默认的行高：是不确定具体大小的，它总是比当前字体大小，大个1.3倍左右。

 

                值：具体的数值 30px 40px | scale( 比例值 1.5 20px -> 30px )

 

     16.letter-spacing：定义字间距

         word-spacing : 定义词间距  ( 针对英文 )

 

           强制折行 : (针对英文)

        1. word-break : break-all; (非常强烈的折行)

        2. word-wrap : break-word;(不是那么强烈的折行)  

           强烈的特点：不会留有空白区域，非强烈的特点：会留有一些空白区域。

     

     17.复合样式

                background : 复合的值是通过空格隔开的，并且没有顺序要求。

        

                background-size : 如果想添加到复合写法中  x y / w h

                background-size : 还可以 (解决方案：可以单独的写到background样式的后面)

        

                border : 复合的值是通过空格隔开的，并且没有顺序要求。

 

                注：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式。

 

                font : 复合写法是有顺序，最少要写两个值 ( size family )

 

                weight style size family  √

                style weight size family  √

                style weight size/line-height family  √

 

                注：text是没有复合写法的

 

     四.CSS选择器

 

       1.ID选择器：

            快捷键创建：div#elem + tab键 -> <div id="elem"></div>

 

            ID选择器的规范：

                在一个页面中，ID是唯一值。( 身份证 )

                命名规范，    字母  _  -  数字（命名的第一位不能是数字）。

 

                除了常规写法外，命名方式还有：驼峰式、下划线式、短线式。

 

                    常规：leftsidebar

                    驼峰式：leftSideBar

                    下划线式: left_side_bar

                    短线式：left-side-bar ( W3C推荐的写法 )

                

                    有些人喜欢这样去写：left-side_bar

 

        2.CLASS选择器（类选择器）

            注：

            （1） class选择器是可以复用的。

                  跟ID选择器有很大区别的，复用代码的能力非常强。（在网页中使用的频率非常强）

 

            （2） 可以添加多个class样式。

                  跟ID区别：ID只能写一个，CLASS可以写多个，通过空格隔开。

 

            （3） 多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。

                  看CSS中的顺序，并不是看class属性中的顺序。

 

            （4） 标签+类的写法

                   div.elem{}

    

        3.标签选择器（TAG选择器）

 

            div{} -> <div></div>

            注：不常用的。

            使用的场景：

               去掉默认样式： 1. ul{ list-style:none;} a{ text-decoration:none;}

               层次选择器： #box div{}

 

            群组选择器（分组选择器）

                div , p , h1{ color:red; }

            

        4. 群组选择器（分组选择器）

            div , p , h1{ color:red; }

 

        5.通配选择器

            *{}  ( *就是所有标签的意思 )

            使用的场景：

                有时候需要去掉所有标签的默认样式

 

        6.层次选择器

 

            后代 : M N

                找M下的所有N

    

            父子 : M > N

                找M下的子标签N

            

            兄弟 : M ~ N

            相邻 : M + N

            特点： ~ 是找M标签下面的所有N标签

                   + 是找M标签下相邻的N标签

                无论用~ + 都是找下面的兄弟，上面的兄弟是不会有任何作用的。

 

        7. 属性选择器：

            M[] : [ class="elem" ]   *  ^  $

            组合的：M[][][]{}

 

        8.伪类选择器：

 

            CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。

    

            主要这四个伪类是针对a标签的

            :link      访问前的选择器     ( 只能加给a标签 )

            :visited   访问过后的选择器   ( 只能加给a标签 )

            :hover     鼠标移入的选择器    ( 所有标签都能添加 )

            :active    鼠标按下的选择器    ( 所有标签都能添加 )

 

            注：

            a标签如果四个伪类都添加的话，那么是有顺序的 L V H A

            一般的网站都只会设置a{ color:red;} a:hover{ color:blue;}

 

            其他伪类选择器：

            :before :after ( 特点，不用单独在创建一个标签，就可以给文本添加样式 )

 

            input:checked{ width:100px; height:100px;}

            input:disabled{ width:100px; height:100px;}

 

            当标签能够获取焦点的时候，会触发 :focus

            input:focus{ background:Red;}

 

            结构性伪类选择器：

 

            :nth-of-type()、 :nth-child()

 

            :first-of-type、 :first-child

 

            :last-of-type、  :last-child

 

            :only-of-type、 :only-child

 

            ()中可以添加的值：number(第几个，从1开始) | n(表示一个0到无穷大的数)

 

 

            常用的：id class 层次 群组 伪类 ...