HTML

一  html的简介

什么是HTML:全称为HyperText Markup Language,超文本标记语言,又叫网页语言

什么叫超文本:超出文本的范畴,使用html可以轻松实现

什么叫标记:html所有的操作都是通过标记实现的,标记就是标签,<标签名称>

什么叫网页语言:

第一个html程序:

html后缀:.html或.htm

直接通过浏览器就可以运行



	这是第一个html程序


这是我的第一个程序


html的规范:
1 一个html文件开始标签和结束标签 :
2 html包含两部分内容
设置相关信息
显示在页面上的内容都写在body里
3 html的标签有开始标签,也要有结束标签
4 html的代码不区分大小写
5 有些标签,没有结束标签,在标签内结束
                 比如:换行

                           


一条水平线
二  html的操作思想
网页中有很多数据,不同的数据可能需要不同的显示效果,这个时候我们需要使用标签,把需要操作的数据封装起来,通过修改标签的属性值实现标签内数据样式的变化
一个标签相当于一个容器,想要修改容器内数据的样式,只需要改变容器的属性值,就可以实现容器内数据样式的变化。
三  文字标签和注释标签
文字标签:修改文字的样式

size:修改文字的大小。取值范围1~7,超出了7 ,默认还是7
color:文字的颜色
两种表示方式
英文单词:red green  blue  black  white  gray
通过工具实现不同的颜色:#66cc66
注释标签:
四  标题标签和水平线标签和特殊字符
标题标签

,

,

,

.........

从h1到h6,大小依次变小,同时会自动变行


	
		标题标签示例
	
	
		

标题一

标题二

标题三

标题四

标题五
标题六

水平线标签




size:水平线的粗细,范围1~7
color:颜色

特殊字符:

想要在页面上显示这样的内容            :是网页的开始
需要对特殊字符进行转译

*  <     <

*  >     >

<html>:是网页的开始
空格: 

&:amp;

五  列表标签

比如显示这样的效果

公司

     财务部

     学工部

     人事部

:表示列表的范围

在dl里面

:上层内容

在dl里面

:下层内容

公司
财务部
学工部
人事部


需要在页面上显示这样的效果


   1.  财务部

   2.  学工部

   3.  人事部

    a. 财务部

    b. 学工部

    c.人事部


    i. 财务部

    ii.学工部

    iii.人事部

有序列表:

    :有序列表的范围

    属性 type:设置排序方式 1(默认) , a,i。

    在ol标签里面

  1. 具体内容

    1. 财务部
    2. 学工部
    3. 人事部


    无序列表:

    在页面上显示:特殊符号(方框)财务部

    在页面上显示:特殊符号(方框)学工部


      :表示无序列表的范围

      type:空心圆circle,实心圆dise,实心方框square,默认是实心圆

      在ul里面


    • 六  图像标签



      属性:src:图像的路径

                  width:图片的宽度

                  height:图片的高度

                  alt:图片上显示的文字,把鼠标移动到图片上,停留片刻后就会显示文字。(有些浏览器上不显示)

      七  路径的介绍

      分类:两类

      绝对路径:完全的路径

      相对路径:一个文件相对于另外一个文件的位置

                三种:html文件和图片在一个路径下,可以直接写文件名称

                            在html文件中,使用blue.jpg

                            L:\DW\           img\blue.jpg

                            L:\DW\           ear.html

                           在html中使用此图片,ear.html和img在一个路径下

                           img\blue.jpg

                          图片在html文件的上层目录


                            L:\DW\          blue.jpg

                            L:\DW\          wenjian\ ear.html

                         html文件所在的目录和图片是一个目录                   图片和html文件是什么关系:图片在html的所在的目录的上层目录  DW

                          怎么表示上层路径    ../


                          ../blue.jpg

                          想要表示上层的上层 ../../

      八  案例——列表标签使用

      
      	
      	
      	
      		
      		

      首页>中国馆>女装/女士精品>所有商品

      热点推荐

      一口价:49.00
      全国包邮!韩版修身T恤


      九  超链接标签

         连接资源

                显示在页面上的内容

      
      	
      	
      	
      		这是一个链接	
               
      

      href:连接的资源的地址

      target:设置打开的方式,默认是在当前页面打开

                  _blank:在一个新窗口打开

                  _self:在当前页打开

      当href中为空时,会打开其所在文件夹。此时使用占位符“#”,表示超链接不会有任何效果

      这是一个链接  
      

          定位资源

      例如:回顶部

           如果想要定位一个资源,需要定义 一个位置

          顶部

          回到这个位置:

             回到顶部

            引入一个标签   pre:原样输出

              aaaaaa
              bbbbbb
      
      顶部
      
      此处省略n行文字
      回到顶部


      十  表格标签

      什么是表格?

      表格的作用:可以对数据进行格式化,使数据显示更加清晰

      :表示数据的范围

         border:表格线

         bordercolor:表格线的颜色

         cellspacing:单元格之间的距离

         width:表格的宽度

         height:表格的高度

      在table里面:

         设置显示方式:align:left,center,right

      在tr里面

      使用th也可以表示单元格,表示可以实现居中+加粗

      分析表格的写法:

      首先定义一个表格的范围使用table

      定义一行使用tr

      定义一个单元格使用 td

      操作技巧:首先数多少行,数每行里面有多少个单元格

      表格的标题:写在table里面

      人员信息
      东方不败 30
      岳不群 30
      林平之 40


      十一  表单标签

      提交数据到服务器,这个过程可以使用表单标签实现

      :定义一个表单的范围

      属性:action,内容提交到的地址,默认为当前页面

                 method:表单的提交方式。常用的有两种:get和post,默认为get请求

                 面试题目:get和post的区别?

                       get:地址栏会携带提交的数据,post不会携带(请求体里面)

                       get安全级别较低,post较高

                       get请求数据大小的限制,post没有限制。

                enctype:一般情况下不需要这个属性,做文件上传的时候需要设置这个属性。

      输入项:可以输入内容或者选择内容的部分

      在输入项里面必须写入属性name,否则提交的nei'rong

      大部分的输入项:使用

      普通输入项:

      密码输入项:

      单选输入项:

           需要在里面加入属性name,name的名称必须相同,设置value区分选项

           实现默认选中:属性,checked=“checked”

      复选输入项:

           需要在里面加入属性name,name的名称必须相同,设置value区分选项

           实现默认选中:属性,checked=“checked”

      文件输入项:

      下拉输入项(不在input里):

      默认选中:selected=“selected”

       文本域:

      隐藏项(不会出现在页面上,但存在于html代码里):

      提交按钮:

      重置按钮(回到输入项的初始状态):

      普通按钮:


      十二  案例使用表单标签实现注册的页面

      
      	
      		例子
      	
      	
      		

      注册账号

      注册邮箱
        你可以使用账号注册或者使用手机号注册
      创建密码:
      真实姓名:
      性别:
      生日:
      我现在:
       


      十三  其它标签的使用

      b;s;u;i;pre;sub;div;span

      b:加粗

      s:删除线

      u:下划线

      i:斜体

      pre:保持原样输出

      sub:下标

      sup:上标

      div:自动换行

      span:不换行

      p:段落标签

      
      	
      		其他常用标签
      	
      	
      		三千繁华
      		弹指刹那
      		百年之后
      		不过一捧黄沙
      		
      三千繁华
      			弹指刹那
      			百年之后
      			不过一捧黄沙
      		

      3100 4200
      这是div一
      这是div二
      这是div三
      这是span一 这是span二

      十四  html的头标签的使用

      头标签放在head里面

      表示标签上显示的内容

      :设置页面的一些相关内容

      base标签:设置超链接的基本设置,可以统一设置

      所有连接都在新窗口打开

      标签:引入外部文件
      十五  框架标签的使用

      什么叫框架标签?

      rows:按行进行划分

      cols:按列划分

      frame:具体显示的页面

      使用框架标签的时候,不能写在body里面,使用了框架标签,需要把body去掉

              //把页面划分成上下两部分
      
                      //上面页面
      
                            //把下面的部分划分成左右两部分
      
                                     //左边的页面
      
                                     //右边的电脑
      
             
      
      
      

      如果在左边的页面超链接,想让内容显示在右边的页面中

      设超链接的属性,target值设置成frame的name的名称


      十六  html文件中文乱码

        保存文件时注意:最好选系统默认                       

      
      

      你可能感兴趣的:(javaweb自学之路一,html)