首页 > 代码库 > Html的简单学习笔记

Html的简单学习笔记

1、Html简介
  1)什么是html:

    HyperText Markup Language:超文本标记语言,网页语言。

    》超文本:超出文本范围。
    》标记: html中所有的操作都是使用标记实现的,标记就是标签,<标签名>
    》网页语言:

  2)创建文件:
    》我们创建一个java文件,后缀名为.java
      通过编译,然后使用jvm运行

    》html后缀是:.html,.htm
      直接使用浏览器运行

    》html代码示例:
      这是我的<font size="5" color="green">第一个html程序</font>

    》html的规范
      (1)一个html的范围的开始标签和结束标签
        <html> </html>
       (2)html语言包括两部分:
        <head> 设置相关信息</dead>
        <body> 显示在页面上的内容都写在body中</body>
       (3) html的标签都有开始标签,也都有结束标签。
        <head> </dead>
       (4) html的代码不区分大小写
       (5) 有些标签没有结束标签,就要在标签内部结束
        如:换行: <br/>
          水平直线: <hr/>
          图片: <img/>

    》html的编写思想:

      网页中有很多数据,不同的数据可能需要不同的显示效果,这个时候那就需要使用标签将我们要操作的
      数据封装起来,之后修改标签属性值来改变内部数据属性的变化。

      一个标签相当于一个容器,我们要改变容器内的数据样式,只需要改变容器的属性值,就可以实现容器内部数据的变化


2、文字标签和注释标签

  1)文字标签: 为了修改文字的样式
      -<font> </font>
      -属性:
          *size:文字的大小,取值范围:1~7(超出范围默认边界值)。
          *color:文字颜色
              -两种表示方式:
                **英文单词:red, green,blue,yellow,black,white,gray
                **使用十六进制表示: #ffffff : RGB
                  一般使用工具选择不同的颜色。

  2)注释标签: 为了在代码中进行注释使用的(不在网页中显示)

      -类比java注释(三种)
      -html注释: <!-- html 注释内容 -->

 

3、标题标签、水平线标签和特殊字符

  1)标题标签:
        <h1> </h1> <h2> </h2> <h3></h3> ....<h6> </h6>
        表示标签字体大小依次变小, 同时自动换行。

  2)水平线标签:
        - <hr/>
          - 属性:
              size: 水平线的粗细(规范与文字标签的属性规范相同)
              color 水平线的颜色(规范与文字标签的属性规范相同)
        - 代码演示:
            <hr size="5" color="red" />

  3)特殊字符标签:

      -要在程序中显示一些 html 语法默认使用的符号: 如<html>中的  <   或者    >
      -类似于java中字符串中的转义字符。
        列出常用几个,(其他的查找 html 帮助文档):
              <      &lt
              >      &gt
              &      &amp
              空格      &nbsp

 

4、列表标签

  1)、缩进列表标签:
        <dl> </dl> : 表示列表的范围
          在dl里面:<dt> </dt> : 上层内容
          在dl里面:<dd> </dd> : 下层内容

        代码:
            <dl>
              <dt> 中华名族 </dt>
                <dd> 汉族 </dd>
                <dd> 回族 </dd>
                <dd> 苗族 </dd>
            </dl>

      显示效果:
          中华民族
              汉族
              回族
              苗族


  2)有序列表标签
        <ol> <ol>: 有序列表范围
            属性: type :设置排序方式 1(默认)   a   i
         在ol标签里面 <li> 具体内容 </li>

        代码:
          <ol>
            <li> 汉族 </li>
            <li> 回族 </li>
            <li> 苗族 </li>
          </ol>

          <ol type="a">
            <li> 汉族 </li>
            <li> 回族 </li>
            <li> 苗族 </li>
          </ol>

      显示效果:
            1.汉族
            2.回族
            3.苗族

            a.汉族
            b.回族
            c.苗族

  3) 无序列表标签:
        <ul> </ul>:无序列表的范围
             属性: type :空心圆circle、实心圆disc(默认)、实心方块square
            在 ul 里面: <li> 具体内容 <li>
       代码:
          <ul>
            <li> 汉族 </li>
            <li> 回族 </li>
            <li> 苗族 </li>
          </ul>

      <ul type="circle">
            <li> 汉族 </li>
            <li> 回族 </li>
            <li> 苗族 </li>
      </ul>

      显示效果:

          实心圆 汉族
          实心圆 回族
          实心圆 苗族
  
          空心圆 汉族
          空心圆 回族
          空心圆 苗族


5、图像标签(重点)

      <img src="http://www.mamicode.com/图片的路径" />
          注意:该标签没有结束标签,在标签内接结束。
          属性:
            src: 图片的路径
            width: 图片的宽度
            height:图片的高度

            alt: 图片上显示的文字(需要把鼠标移动到图片上片刻才能显示(或在图片出错的时候显示该文字提示))
                但是,有些浏览器不支持该效果。


6、路径介绍(重点)

  *路径分为两种: 绝对 和 相对

    **绝对路径:
        --d:\java\work\a.pmg
        --http://www.baidu.com./b.jpg

    **相对路径:
        --指一个文件相对于另一个文件的位置。
        --一般有三种:
            **文件在 html 的同一个目录下,可以直接写文件名
                -- <img src="http://www.mamicode.com/a.jpg" />

            **文件在 html 的下层目录
              在html中使用xx文件夹中的a.jpg

                ----d:\java\work\ Demo.html
                ----d:\java\work\ xx\a.jpg

                -- <img src="http://www.mamicode.com/xx/a.jpg" />

            **文件在 html 的上层目录
              在html中使用java文件夹中的a.jpg

                ----d:\java\ work\Demo.html
                ----d:\java\ a.jpg

                -- <img src="http://www.mamicode.com/a.jpg" />


7、超链接标签(重要)

  1)、连接资源:
        --<a href="http://www.mamicode.com/连接到资源的路径"> 显示在网页上的内容 </a>
          属性:
            href : 连接的资源地址
            target: 设置打开方式 , 默认实在当前页
                --- _blank : 在一个新的窗口打开。
                --- _self : 在当前页打开。

  2)、定位资源:
        (1) 如果想要定位资源,就必须要先定义一个位置:
            <a name = "top"> 顶部 </a> .
        (2) 回到这个位置
            <a href="http://www.mamicode.com/#top"> 回到顶部 </a>

          (3): 引入一个标签 pre :原样输出。


9、表格标签
  作用: 可以对数据进行格式化,使数据显示更加清晰。

    标签:
      1)、 <table> </table> :表示表格的范围。
        属性:
          --border : 表格线是否显示,和显示多粗。
          --bordercolor : 表格线的颜色。
          --cellspacing : 单元格直线之间的距离。
          --width : 表格的宽度。
          --height : 表格的高度。

      2)、 在table 里面定义行:<tr> </tr>
        属性:
          --设置对齐方式: align :left 、 center 、 right

      3.1)、 在 tr 里面设置单元格1: <td> </td>
        属性:
          --设置对齐方式: align : left 、 center 、 right

      3.2)、 在 tr 里面设置单元格2: <th> </th>
          其本身实现了各种数据的 居中 加粗格式。

      4) 、 表格的标题: <caption> </caption>

      5) 、 合并单元格

        -- rowspan : 跨行(在单元格属性上垮 : <td rowspan="3"> </td>)
        -- colspan : 跨列(在行属性处垮 : <td colspan="3"> </td>)

      分析:
        -- 首先,定义一个表格的范围使用 table
        -- 其次, 定义一行使用 tr
        -- 再次, 定义一个单元格使用 td 或者 th

        操作时,应当先确定表格的行数, 再确定每一行所对应的单元格。



    代码示例:

      < table border="1" bordercoloer="yellow" cellspacing="0" width="400" height="300">
        <tr align="left">
            <td> </td> <td> </td> <td> </td>
        </tr>

        <tr>
            <th> </th> <th> </th> <th> </th>
        </tr>
      </table>



9、表单标签(重)

  就是可以向服务器提交数据的标签(比如注册页面)

    1)、<form> </form>: 定义一个表单的范围
      --属性
      --action :提交到的地址,默认为提交到当前的页面。
         值为:一个地址。
      --method :表单的提交的方式
        --常用的有两种: get(默认) 和 post

        get 和 post的区别:
          (1):get请求地址栏会携带提交的数据,post不会(http协议中详说)
          (2):get请求的安全性较低, post较高。
          (3):get请求数据大小有限制,post没有。

      --enctype:文件上传时使用(后面的讲了再来补此博内容)

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

      --大部分输入项 使用 <input type="输入项的类型" />
          在这些输入项中需要一个name属性,才能被提交。

      --普通输入项:<input type="text" />

      --密码输入项:<input type="password" />

      --单选输入项:<input type="radio" />
          ---在里面需要 name 属性。
          ---要关联的单选输入项之间的name值必须相同。
          ---必须有一个value。
        ---在要实现默认选中的选项中加入属性:
          checked="checked"

      --复选输入项:<input type="checkbox" />
          ---在里面需要 name 属性。
          ---要关联的复选输入项之间的name值必须相同。
          ---必须要有一个value值。
        ---在要实现默认选中的选项中加入属性:
          checked="checked"

      --文件输入项(在之后学了在补)
        <input type="file" />

      --下拉输入选项(此标签不是在input标签里的)
          如:
            <select name="birth">
                  <option value="http://www.mamicode.com/1991">1991</option>
                  <option value="http://www.mamicode.com/1992">1992</option>
                  <option value="http://www.mamicode.com/1993">1993</option>
            </select>
          --在需要默认的选项中加入属性:
            selected="selected"

      --文本域
          <textarea cols="10" rows="10"></textarea>

      --隐藏项(不会显示在页面上,但是会在himl代码里面)
          <input type="hidden" />


      --提交按钮
          <input type="submit" />
          <input type="submit" value="http://www.mamicode.com/要显示在按钮上的字符" />
        (提交过后,数据的传递使用 name=value的类键值对的方式)

      --使用图片作为按钮提交
          <input type="image" src="http://www.mamicode.com/picturePath" />

      --重置按钮(会到输入项的初始状态)
          <input type="reset"/>

      --普通按钮(需要事件监听,常和js同时用)
          <input type="button" value="http://www.mamicode.com/要显示在按钮上的字符" />


10、html中的其他常用的标签

    <b></b> : 加粗
    <s></s> :删除线
    <u></u> :下划线
    <i></i> :斜体

    <p></p> : 段落标签(比br标签多一行)

    <pre></pre> : 原样输出

    <sub></sub> : 下标
    <sup></sup> : 上标

    <div></div> : 自动换行
    <span></span> : 在一行显示

11、html中的头标签的使用

    html中分为: head 和 body 两部分, 而使用在head中的就是头标签

      <title> </title> : 表示在标签上显示的内容。

      <meta /> 标签 :设置页面的一些相关内容
          <meta name="Keyword" content="word1, word2.."/> :设置网页关键字
          <meta http-equiv="refresh" content="等待秒数;url=网页地址" /> :定时刷新跳转。

      <base/> 标签 :设置超链接的基本设置,可以统一设置网页中所有的超链接的打开方式(本页还是另开)
          <base target="_blank" />

      <link /> 标签 : 引入外部文件。
           比如引入css文件



12、框架标签(比较过时,一般少用,掌握用法即可)

    * <frameset> </frameset>
        --rows: 按照行进行划分
            如: <frameset rows="80,*" > </frameset>

        --cols: 按照列进行划分
            如: <frameset cols="80,*" > </frameset>

    *<frame></frame>
        --具体显示的页面
            如: <frame name="显示的页面标题" src="http://www.mamicode.com/页面的地址" > </frame>

    注意: 使用框架标签的时候,不能写在body里面,使用了框架标签,需要把body取消。

    一个划分的示例:
        <frameset rows="80,*"> //将页面分为上下两部分
            <frame name="top" src="http://www.mamicode.com/a.html"> //设置上面部分显示的页面
            <frameset cols="150,*"> //把下面页面分为左右两部分
                <frame name="lower_left" src="http://www.mamicode.com/b.html"> //设置左边页面显示页面
                <frame name="lower_right" src="http://www.mamicode.com/c.html"> //设置右边页面显示的页面
            </frameset>
        </frameset >

      如果在左边的超链接,想让内容显示在右边的页面中
        --设置超链接里面的页面属性 target 设置成右边页面的名称。
        --<a href="http://www.mamicode.com/超链接打开的网页名" target="right">超链接1</a>

Html的简单学习笔记