html干货部分

1.标签
        a.文本标签:p,span,a,b,i,u,em.文本标签里只能放文字,图片,表单元素.    上标,下标: 5<sup>2</sup>(上标)  8<sub>2</sub>(下标)
        b.容器级标签:div,h系列,li,dt,dd,容器级标签里可以放任何东西.
            1.块级标签div和span:
                div的语义division"分割";span的语义"范围,跨度",都是重要的盒子.两者的区别是,div块会换行,span不换行的(span内不可放标签).
            2. 标签a (超链接,以a标签为例)
                1.超链接:<a href="new.html">点击进入新网页</a>
                  2.锚链接:<a name="top">顶部,设定锚链接</a>
                           <a href="#top">回到顶部,返回到设定锚链接</a>
                3.邮件链接:<a href="mailto:leew2017@126.com">找m</a>
                4.特殊链接:<a href="#">跳转到顶部</a>
                    与js相关:
                        <a href="javascript:alert(1)">内容</a>执行
                        <a href="javascript:;">内容</a>代表不执行
                5.超链接的属性:
                    1.href:目标URL
                    2.title:悬停文本
                    3.name:主要用于设置一个锚点的名称.
                    4.target:打开浏览器的方式:
                        _self:在同一个网页显示(默认)
                        _blank:在新的窗口中打开
                        _parent:在父窗口显示
                        _top:在顶级窗口中显示

        c.图片标签<img/>(属于单边标记)
            img:代表一张图片,img是自封闭标签,也称为单标签.
            src属性:指图片的路径(相对路径,绝对路径都可以)
            例:
                <img src="2.jpg">
                <img src=".2.jpg">(linux形式)
                <img src="images/1.jpg">
                <img src="file://C:UsersDanny明星1.jpg" alt="" />
                <img src="http://www.baidu.com/2016040102.jpg">
            img其他属性:
                宽度(宽高做好只设置一个)
                height:高度
                title:提示性文本.公有属性(鼠标悬停时出现的文本)
                align:指图片的水平对齐方式,
                    属性值可以是:left,center,right(左中右)
                alt:当照片显示不出来时,代替图片显示的内容.

        d. h1~h6标签 : 定义标题的大小(h1最大,h6最小),
                具有align排版属性,属性值可以是:left,right,center            (分别代表 靠左,靠右,居中)
        
        e.列表标签ul,ol,dl
            1.无序列表<ul>,无序列表中每一项都是<li>
                ul:unordered list(无序列表)
                    li:list item(列表项,必须跟随ul或ol)
                ul属性值:<ul type="属性值"></ul>
                    disc(实心原点,默认)
                    square(实心方点)
                    circle(空心圆)
            2.有序列表<ol>,里面的每一项是<li>
                ol:ordered list(有序列表)
                ol属性值:<ol type="属性值"></ol>
                    1(阿拉伯数字,默认)
                    a(有序小写字母)
                    A(有序大写字母)
                    i(另一种数字方式) 
                    I(同i大写)
            3.定义列表<dl>    (dl与dd都只能属于对方,定义列表的作用很大)
                dl:definition list,没有属性,dl的子元素只能是dt和dd.
                dt:definition title,列表的标题,这标题是必须的
                dd:definition description 列表项,如果不需要,可不加 
    2.表格标签<table> 
        (表格是由行组成的(行是由列组成的),而非行和列。)
        表格<table>是由每行<tr>组成的,每行是由<td>组成的.

        a.table的属性:
            border:边框,像素为单位
            style="border-collapse:college;"
                    单元格的线和表格的边框线合并
            宽度
            height:高度
            bordercolor:表格边框颜色
            align:表格的水平对齐方式,属性值:left center right
            cellpadding:单元格内容到边距离,像素单位,默认为0
            cellspacing:单元格和单元格之间的距离(外边框),默认0
            bgcolor="#99cc66":表格的背景颜色
            background="路径src/...":背景照片
                    背景照片的优先级大于背景颜色
        b.行<tr> (表格是由一行一行组成的)
          属性:
              dir:此行行内内容排列方式(公有属性)
                  ltr:从左到右(left to right,默认)
                  rtl:从右到左(right to left)
              bgcolor:设置这一行的背景颜色(注:行内无法设置背景照片)
              height:1行的高度
              align="center":行内内容的水平居中显示(left,center,right)
              valign="middle":行内内容垂直居中显示(top,middle,bottom)
        c.单元格<td>
          属性:
              align:内容水平对齐方式.(left,center,right)
              valign:内容垂直对齐方式(top,middle,bottom)
              单元格的高度
              bgcolor:设置单元格的背景颜色
              background:设置这个单元格的背景图片
        d.单元格的合并
              将两个单元格合并,就需要删除一个单元格
              单元格属性:
                  colspan:横向合并.例colspan="2"
                      表示当前单元格水平方向上要占据两个位置.
                  rowspan:纵向合并.例rowspan="2"
                      表示当前单元格垂直方向上要占据两个位置.
          e.其他属性
              <th>:加粗的单元格,相当于<td>+<d> 属性同<td>标签
              <caption>:表格的标题,使用时和tr标签并用.

          f.表格的标签<thead>,<tbody>,<tfoot>
              写了控制读取顺序

      3.表单标签用<form>表示,用于与服务器的交互.表单就是收集用户信息的,就是让用户填写的,选择的.
          属性:
              name:表单的名称,用于JS来操作和控制表单时使用.
              id:表单的名称,用于来操作或控制表单时使用.
              action:指定表单数据的处理程序,
                  一般是php,如:action="login.php"
              method:表单数据的提交方式,一般取值:get(默认),post
    4.<input>输入标签(文本框)  :用于接收用户输入.
        例:<input type="text" />
        属性:type="属性值"属性值可以是:
                text(默认):文本类型
                password:密码类型
                radio:选单按钮,名字相同的按钮作为一组进行单选                                      (单选按钮,天生只能选一个,想多选必须名字一样)
                checkbox:多选按钮,名字相同的按钮作为一组进行选择.
                checked:将单选按钮或多选按钮默认处于选中状态.
                    当<input>标签的type="radio"时,可以用这个属性.可省略.
                hidden:隐藏框,在表单中包含不希望用户看见的信息
                buttom:普通按钮,结合js代码进行使用
                submit:提交按钮,传送当前表单的数据给服务器或其他程序处理.
                    这个按钮不需要写value,自动就会有"提交"文字,这个按钮有提交功能.
                    点击后,表单就会被提交到form标签的action属性指定的页面中去.
                reset:重置按钮,清空当前表单的内容,并设置为最初的默认值.
                image:图片按钮,和提交按钮的功能完全一致,只不过图片按钮可以显示图片.
                file:文件选择框
            value="内容":文本框里的默认内容
            size="50":表示文本框内可以显示五十个字符,一个英文或中文都算一个字符.
            readondy:文本框只读,不能编辑,因为它的属性值也是readonly,所以属性值可不写.
                这个属性Google光标点不进去,IE可点进去,但不可以编辑
            disabled:文本框只读,不能编辑,光标点不进去,属性值可以不写.
    5.<select>:下拉列表标签
        <select>标签里面每一项用<option>表示.select就是"选择",option就是"选项".
            select标签和ul,ol,dl一样,都是组标签.
        <select>标签的属性:
            multiple:可以对下拉列表中的选项进行多选,没有属性值
            size="3":如果属性值大于1,则列表为滚动视图,默认属性值为1,即下拉视图.
        <option>标签的属性:
            selected:预选中.没有属性值.
        <textarea>标签:多行文本输入框
            属性:
                value:提交给服务器的值
                rows="4":指定文本区域的行数
                cols="20":指定文本区域的列数
                readonly:只读
    6.表单语义化
        比如,我们在注册一个网站信息时,部分必填,另部分选填,这时可以利用表单的语义化。
    7.<label>标签
            <input type="radio" name="sex" /><input type="radio" name="sex" /> 女
        上述,必须选单选框才可以选中,文字和input标签没有关系
            <input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
            <input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>
        input元素有一个id,然后label标签有for属性,和id相同,这个label和input就有绑定关系了。当然了,复选框也有label:(任何表单元素都有label)

    8.颜色 red,green,blue,orange,gray等
           rgb(255,0,0)
           #FF0000 , #0000FF , #00FF00 等

    9.特殊字符:
        &nbsp; :空格(non-breaking spacing,不断打空格)
        &lt;   :小于号(less than)
        &gt;   :大于号(greater than)
        &amp;  :符号&
        &quot; :双引号
        &apos; :单引号
        &copy; :版权标志
        &trade;:商标标志

html干货部分:1.标签a.文本标签:p,span,a,b,i,u,em.文本标签里只能放文字,图片,表单元素.上标,下标: 5<sup>2</sup>(上标)  8<sub>2</sub>(下标)b.容器级标签:div,h系列,li,dt,dd,容器级标签里可以放任何东西.1.块级标签div和span:div的语义division"分割";span的语义"范围,跨度",都是重要的盒子.两者的区别是,div块会换行,span不换行的(span内不可放标签).2. 标签a (超链接,以a标签为例)1.超链接:<a href="new.html">点击进入新网页</a>  2.锚链接:<a name="top">顶部,设定锚链接</a>   <a href="#top">回到顶部,返回到设定锚链接</a>3.邮件链接:<a href="mailto:leew2017@126.com">找m</a>4.特殊链接:<a href="#">跳转到顶部</a>与js相关:<a href="javascript:alert(1)">内容</a>执行<a href="javascript:;">内容</a>代表不执行5.超链接的属性:1.href:目标URL2.title:悬停文本3.name:主要用于设置一个锚点的名称.4.target:打开浏览器的方式:_self:在同一个网页显示(默认)_blank:在新的窗口中打开_parent:在父窗口显示_top:在顶级窗口中显示
c.图片标签<img/>(属于单边标记)img:代表一张图片,img是自封闭标签,也称为单标签.src属性:指图片的路径(相对路径,绝对路径都可以)例:<img src="2.jpg"><img src=".2.jpg">(linux形式)<img src="images/1.jpg"><img src="file://C:UsersDanny明星1.jpg" alt="" /><img src="http://www.baidu.com/2016040102.jpg">img其他属性:宽度(宽高做好只设置一个)height:高度title:提示性文本.公有属性(鼠标悬停时出现的文本)align:指图片的水平对齐方式,属性值可以是:left,center,right(左中右)alt:当照片显示不出来时,代替图片显示的内容.
d. h1~h6标签 : 定义标题的大小(h1最大,h6最小),具有align排版属性,属性值可以是:left,right,center(分别代表 靠左,靠右,居中)e.列表标签ul,ol,dl1.无序列表<ul>,无序列表中每一项都是<li>ul:unordered list(无序列表)li:list item(列表项,必须跟随ul或ol)ul属性值:<ul type="属性值"></ul>disc(实心原点,默认)square(实心方点)circle(空心圆)2.有序列表<ol>,里面的每一项是<li>ol:ordered list(有序列表)ol属性值:<ol type="属性值"></ol>1(阿拉伯数字,默认)a(有序小写字母)A(有序大写字母)i(另一种数字方式) I(同i大写)3.定义列表<dl>(dl与dd都只能属于对方,定义列表的作用很大)dl:definition list,没有属性,dl的子元素只能是dt和dd.dt:definition title,列表的标题,这标题是必须的dd:definition description 列表项,如果不需要,可不加 2.表格标签<table> (表格是由行组成的(行是由列组成的),而非行和列。)表格<table>是由每行<tr>组成的,每行是由<td>组成的.
a.table的属性:border:边框,像素为单位style="border-collapse:college;"单元格的线和表格的边框线合并宽度height:高度bordercolor:表格边框颜色align:表格的水平对齐方式,属性值:left center rightcellpadding:单元格内容到边距离,像素单位,默认为0cellspacing:单元格和单元格之间的距离(外边框),默认0bgcolor="#99cc66":表格的背景颜色background="路径src/...":背景照片背景照片的优先级大于背景颜色b.行<tr> (表格是由一行一行组成的)  属性:  dir:此行行内内容排列方式(公有属性)  ltr:从左到右(left to right,默认)  rtl:从右到左(right to left)  bgcolor:设置这一行的背景颜色(注:行内无法设置背景照片)  height:1行的高度  align="center":行内内容的水平居中显示(left,center,right)  valign="middle":行内内容垂直居中显示(top,middle,bottom)c.单元格<td>  属性:  align:内容水平对齐方式.(left,center,right)  valign:内容垂直对齐方式(top,middle,bottom)  单元格的高度  bgcolor:设置单元格的背景颜色  background:设置这个单元格的背景图片d.单元格的合并  将两个单元格合并,就需要删除一个单元格  单元格属性:  colspan:横向合并.例colspan="2"  表示当前单元格水平方向上要占据两个位置.  rowspan:纵向合并.例rowspan="2"  表示当前单元格垂直方向上要占据两个位置.  e.其他属性  <th>:加粗的单元格,相当于<td>+<d> 属性同<td>标签  <caption>:表格的标题,使用时和tr标签并用.
  f.表格的标签<thead>,<tbody>,<tfoot>  写了控制读取顺序
  3.表单标签用<form>表示,用于与服务器的交互.表单就是收集用户信息的,就是让用户填写的,选择的.  属性:  name:表单的名称,用于JS来操作和控制表单时使用.  id:表单的名称,用于来操作或控制表单时使用.  action:指定表单数据的处理程序,  一般是php,如:action="login.php"  method:表单数据的提交方式,一般取值:get(默认),post4.<input>输入标签(文本框)  :用于接收用户输入.例:<input type="text" />属性:type="属性值"属性值可以是:text(默认):文本类型password:密码类型radio:选单按钮,名字相同的按钮作为一组进行单选          (单选按钮,天生只能选一个,想多选必须名字一样)checkbox:多选按钮,名字相同的按钮作为一组进行选择.checked:将单选按钮或多选按钮默认处于选中状态.当<input>标签的type="radio"时,可以用这个属性.可省略.hidden:隐藏框,在表单中包含不希望用户看见的信息buttom:普通按钮,结合js代码进行使用submit:提交按钮,传送当前表单的数据给服务器或其他程序处理.这个按钮不需要写value,自动就会有"提交"文字,这个按钮有提交功能.点击后,表单就会被提交到form标签的action属性指定的页面中去.reset:重置按钮,清空当前表单的内容,并设置为最初的默认值.image:图片按钮,和提交按钮的功能完全一致,只不过图片按钮可以显示图片.file:文件选择框value="内容":文本框里的默认内容size="50":表示文本框内可以显示五十个字符,一个英文或中文都算一个字符.readondy:文本框只读,不能编辑,因为它的属性值也是readonly,所以属性值可不写.这个属性Google光标点不进去,IE可点进去,但不可以编辑disabled:文本框只读,不能编辑,光标点不进去,属性值可以不写.5.<select>:下拉列表标签<select>标签里面每一项用<option>表示.select就是"选择",option就是"选项".select标签和ul,ol,dl一样,都是组标签.<select>标签的属性:multiple:可以对下拉列表中的选项进行多选,没有属性值size="3":如果属性值大于1,则列表为滚动视图,默认属性值为1,即下拉视图.<option>标签的属性:selected:预选中.没有属性值.<textarea>标签:多行文本输入框属性:value:提交给服务器的值rows="4":指定文本区域的行数cols="20":指定文本区域的列数readonly:只读6.表单语义化比如,我们在注册一个网站信息时,部分必填,另部分选填,这时可以利用表单的语义化。7.<label>标签<input type="radio" name="sex" /> 男<input type="radio" name="sex" /> 女上述,必须选单选框才可以选中,文字和input标签没有关系<input type="radio" name="sex" id="nan" /> <label for="nan">男</label><input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>input元素有一个id,然后label标签有for属性,和id相同,这个label和input就有绑定关系了。当然了,复选框也有label:(任何表单元素都有label)
8.颜色 red,green,blue,orange,gray等   rgb(255,0,0)   #FF0000 , #0000FF , #00FF00 等
9.特殊字符:&nbsp; :空格(non-breaking spacing,不断打空格)&lt;   :小于号(less than)&gt;   :大于号(greater than)&amp;  :符号&&quot; :双引号&apos; :单引号&copy; :版权标志&trade;:商标标志

原文地址:https://www.cnblogs.com/pupilheart/p/9250352.html