2018-07-16

一.什么是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(文件夹)/xx.jpg

五.文字排版标记


换行:在段落里换行处加

标记标题:只有六个标题

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

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

    :无序列表标记,表示列表所包含的项是没有先后顺序的,列表项使用
  • 表示

      :有序列表标记,表示列表所包含的项是有先后顺序的,列表项使用
    1. 表示

      六.定义列表:

      需要解释的术语/关键字
      //定义列表项

      解释说明
      //列表项说明

      不能脱离

      段落中添加空格:"  "" &ensp"" &emsp"(空格大小,小→大)



      1.加粗

      表示加粗

      加粗,主旨表强调

      2.倾斜

      表示倾斜

      倾斜,主旨表强调

      3.上下标

      表示下标

      表示上标

      4.注释

      <!--注释-->

      5.无自带样式的块级元素

      无自带样式的行内元素

      6.水平线


      align表示水平对齐方式,默认为居中对齐

      7.大于号>

      小于号<

      版权©

      8.

      超链接   双标记标签1

      >href  跳转的路径,相对路径/绝对路径

              mailto:邮箱地址

            锚点:  #+id值2>target  链接打开的方式

                -blank  在新窗口中打开          -self/-parents/-top  在旧窗口打开

      9.热点区域(地图热点)

           

      .......

      area标签的属性:

      1.shape  形状

      rect  矩形

      circle  圆形

      poly  多边形

      2.coords  坐标

      如果shape="rect",coords="1,2,3,4"(1,2代表矩形左上角坐标,3,4代表矩形右下角坐标)

      如果shape="circle",coords="1,2,3"(1,2代表圆心坐标,3代表圆的半径

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

      3.href  跳转的链接

      4.target  跳转的方式

      块级元素:独占一行,能设置宽度和高度,行高,外边距,内边距等p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd,hr,div,form,option

      行内元素,能和其他元素在一行显示,不能设置宽度和高度b,strong,i,em,sub,span,a,label

      行内块级元素img,input,textarea,select,button

      行内元素里不可以加块距元素,块距元素可以跟任意行内元素

      1.框架

      1>行内框架:

      属性:

      src: 引入框架的路径

      frameborder: 框架的边框 值: 1 默认值,有边框

                                                           0 无边框

      scrolling: 框架的滚动条 值: 1 默认值,有滚动条

                                                       0 无滚动条

      width/height 设置行内边框的大小

      2>框架集(不能和body共用):

      (数值可以用百分比,像素,*表示,*表示剩下所有的空间)

      frameset的属性:

      1>cols或rows 值:数值或百分比 或*

      2>frameborder 框架的边框

      frame 的属性:

      1>src 引入框架的路径

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

      3>noresize 不能调整框架大小

      表格:

      1.表格的基本结构:

              

                      

                     

             

      表格的标题 表格的单元格

      table的属性:

      1>border  边框

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

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

      2.单元格的合并:

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

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

      >颜色样式和字体大小:style="color:rgb(255,0,0);font-size:20px;"

                  rgb:

                             r           red            (255,0,0)

                             g           green         (0,255,0)

                              b           blue           (0,0,255)

      表单:

      1.form属性:

      action:行为,提交的路径(服务器地址)

      method: 方式  提交的方式     

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

                        post 提交后,提交的内容不会出现在地址栏里,安全性较高,提交的数据大小无限制

      2.input的属性:

      1>type  类型    值: text  文本框      

                                      password  密码框

                                      checkbox  复选框

                                       radio  单选框  name值必须保持一致

                                       hidden    隐藏域 

                                      submit    提交按钮

                                       reset    重置按钮

                                      file        文件上传域

                                       button    一般按钮

      2>name  名字

      3>value  值(初始值)

      3.label  行内标签

      复选框(checkbox)

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

      单选框和复选框用法类似

      4.文本域/多行文本框