2018-07-16

HTML知识点总结

一.什么是html？

HTML（HyperText Markup Language） 超文本标记语言，运行在浏览器端。

二.HTML基本结构

                                             声明文档类型

                                                            根标记标签    双标签

       

               

                                 设置字符编码的类型,utf-8是万国码

       

       

       

三.段落标签

段落的内容

元数据标记定义HTML页面中的相关信息，语法格式如下：

                    设置搜索的关键字

                          描述

四.图片标签

图片标签    单标记标签

属性：

1.src        引入图片路径

2.alt         替代文字     当图片加载不出来时，用来替代图片的文字

3.width     设置图片的宽度      值：数字   默认单位是像素

4.height    设置图片的高度      值：数字   默认单位是像素

5.title         提醒文字    当鼠标放到图片上时的提醒文字

路径：

 1.当图片和html文件在同一级目录下，直接写图片名字

 2.当图片所在的文件夹和html文件在同一级目录下，先写文件夹名称,再写图片名称     例如：xx文件夹/xx.jpg

3.当图片和html文件所在的文件夹在同一个目录下，用 ../ 跳出当前目录，然后再写图片名称           ../xx.jpg

4.当图片所在的文件夹和html文件所在的文件夹在同一个目录下，用 ../ 跳出当前目录，然后写图片所在的文件夹名称，最后写图片名称           ../图片文件夹名/xx.jpg

五.标题标签

标题1

标题2

标题3

标题4

标题5

标题6

共同点：都是标题标签       字体加粗，都有默认的外边距

不同点：字体大小不一样       h1~h6依次减小

六.列表

1.无序列表        没有先后顺序之分

      

• 列表项1

      

• 列表项2

        .....

2.有序列表        有次序

         

1. 列表项1

        

2. 列表项2

          .....

3.定义列表

        

列表项（术语）

        

对列表项的说明

七.字体排版标签

1.加粗

      表示加粗

    加粗    主旨表强调

2.倾斜

        表示倾斜

    倾斜    主旨表强调

3.上下标

     表示下标

     表示上标

八.超链接

超链接

属性：

1.href         跳转的路径

       a)路径      相对路径或绝对路径

       b)mailto:邮箱地址

       c)锚点      #id值   如：回到顶部

2.target       链接打开的方式

        a)_blank    在新窗口中打开

        b)_self      _parent      _top

九.热点区域

        

         .....

area标签的属性：

1.shape      形状

        a)rect       矩形

        b)circle     圆形

        c)poly       多边形

2.coords      坐标

         a)如果shape=”rect” ,coords=”数值1,数值2,数值3,数值4”          数值1和数值2代表矩形左上角顶点的坐标，数值3和数值4代表右下角顶点的坐标

         b)如果shape=”circle”, coords=”数值1，数值2，数值3”            数值1和数值2代表圆心坐标，数值3代表圆的半径

         c)如果shape=”poly” , coords=”数值1，数值2，数值3，数值4,.......”              每两个数值代表一个多边形顶点的坐标

3.href         热点区域跳转的链接

4.target      跳转的方式，在新窗口打开

十.框架

1.行内框架

属性：

 1)src          引入框架的路径

 2)frameborder            框架的边框

     值： 1         默认   有边框

              0         无边框

3)scrolling           框架的滚动条

    值： yes          默认   有滚动条

             no           无滚动条

4)width    height            设置行内框架的大小

2.框架集           不能和body共用

          

          

          

            .......

frameset的属性：

1）cols （列）或 rows（行）            值：数值 或 百分比 或 *（剩下所有）

 2）frameborder            框架的边框

值： 1          默认   有边框

         0          无边框

frame的属性：

1）src                   引入框架的路径

2）scrolling           当前框架是否有滚动条

值： yes          默认   有滚动条

         no           无滚动条

3）noresize           不能调整框架大小

十一.table表格

1.表格的基本结构

      

            

                         th默认字体加粗，水平、垂直方向都居中

             

                    td只默认垂直方向居中，水平方向居左

              ......

        

        ......

表格的标题	表格的单元格

table的属性：

 1）border        边框

2）cellspacing           单元格与单元格之间的间隙

3）cellpadding           内容与单元格四周边框的距离

2.单元格的合并

1）列合并     colspan=”合并单元格的个数”           水平合并

2）行合并      rowspan=”合并单元格的个数”         垂直合并

十二.表单

         

1.form的属性：

action          行为          提交的路径（服务器地址）

method           方式          提交的方式

       值：1.get        提交后，提交的内容会出现在地址栏里，安全性较低；提交的数据的大小有限制

               2.post         提交后，提交的内容不会出现在地址栏里，安全性较get方式高；提交的数据大小无限制。

2.input的属性：

1）type       类型

      值：

       a)     text          文本框

       b)     password           密码框

       c)      checkbox           复选框

       d)      radio                  单选框              name必须保持一致

       e)      hidden                隐藏域

       f)       file                      文件上传框

       g)      submit                提交按钮

       h)       reset                  重置按钮

       i)        button                 一般按钮

2）name       名字

3）value        值        初始值

label       是一个行内元素

复选框默认被选中    checked

让按钮不可用,变灰        disabled

 只读      readonly

点文字可以把复选框选中或取消：

文字

文字

单选框和复选框用法类似

4.文本域（多行文本框）

5.下拉选择框

         

           

           .....

option默认被选中           selected

6.按钮

button放在form里面才有用

提交按钮

提交按钮

重置按钮

一般按钮

注释

其他

无自带样式的块级元素          

无自带样式的行内元素          

换行      

水平线                  align水平对齐方式

特殊字符：

       空格                             

       大于号      >

       小于号      <

        版权         ©

块级元素           独占一行     能设置宽度和高度，行高，外边距，内边距等               display：           block

p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd,hr,div,form,option

行内（内联）元素            能和其他元素在一行显示     不能设置宽度和高度               display:inline

b,strong,i,em,sub,sup,span,a,label

行内（内联）块级元素           能和其他元素在一行显示         能设置宽度和高度，行高，外边距，内边距等              display:inline-block

img,input,textarea,select,button

颜色样式：style="color:rgb(255,0,0);"

                  style="color:#f00;"

            rgb:                                                          十六进制:

                       r           red            (255,0,0)                                 #f00

                       g           green         (0,255,0)                               #0f0

                        b           blue           (0,0,255)                              #00f

                                                                                                  #000黑色

                                                                                                  #fff白色