JavaWeb笔记-01-HTML小结

后缀 :
    .html   .htm

<head>设置相关信息 ,在浏览器上的内容</head>

<body>显示在页面上的内容都写在body里面<body>


html中不区分大小写

有些标签,没有结束标签
    eg: <br/> 换行

**** html 操作思想:

网页中有很多数据,不同的数据可能需要不同的显示效果,

操作: 需要使用标签把数据包起来,通过修改标签的属性值实现标签内数据样式的变化。

HTML中常用的标签

1.文字标签和注释标签

    1)  文字标签: 修改文字的样式

        - <font></font>        
        - 属性:
         size: 文字的大小 范围 1-7,超过7默认为7
         color: 文字颜色
                两种表示方式
            ** 英文单词 : red green blue black white
            ** 使用十六进制表示 #ffffff :RGB
            - 通过工具选取

   2)  注释标签

        - html: <! -- 注释 -->

2.标题标签,水平线标签和特殊字符

    1)  标题标签

        <h1></h1>  <h2></h2> .... <h6></h6>
        字体逐渐变小,并自动换行。

   2)  水平线标签

        - <hr/>
        - 属性
            size:   <hr size="5" />
        color:    <hr color="blue"/>

   3)  特殊字符

        - 需要对特殊字符进行转义才能显示
        > :  &lt;
        < :  &gt;
        空格 : &nbsp;

3.列表标签

    比如下列效果
        学校


            宿舍
        教学楼
        教学楼
    <dl></dl> : 表示列表范围
        在<dl></dl>里面还可以有:<dt></dt>:上层内容
        在<dl></dl>里面还可以有:<dd></dd>:上层内容

       <dl>
            <dt>学校
                <dd>宿舍</dd>
                <dd>教学楼</dd>
                <dd>教学楼</dd>            
            </dt>
        </dl>

 

有序列表
        - 比如下列效果
        1. 2. 3.
        a. b. c.
        i. ii. iii.
    <ol></ol> :有序列表的范围
        - 属性 type: 设置排序方式
                (默认)1. 2. 3.
                    a. b. c.
                    i. ii. iii.
        在<ol></ol>里面可以有 <li>具体内容</li>

      <ol type="a">
            <li>教学楼</li>
            <li>宿舍</li>
            <li>餐厅</li>
      </ol>

 

  无序列表
    <ul></ul>
        属性: type= disc(实心圆)--默认、circle(空心圆)、 square(实心方块)、  
        在<ul></ul>里面: <li></li>

        <ul type="square">
            <li>宿舍</li>
            <li>教学楼</li>
            <li>餐厅/li>
        </ul>

4.图像标签

        <img src = "图片路径" />
        属性:    src: 路径
        width: 宽度
        height: 高度

        alt: 图片上的文字  (一般用于图片不能显示时提示文字)

5. 路径的介绍

     分类:
        A.绝对路径
        B.相对路径
            HTML文件和图片在一个文件时,可以直接写文件名称
        上层目录用..表示

6.超链接标签

    1) 链接资源
        属性:
                href: 链接路径
                target: 打开路径
                        A: _blank: 在新页面打开
                        B: _self: 在当前页面打开 

        < a href="链接到资源的路径" target="打开路径"> 显示在页面上的内容 </a>

                当超链接不需要跳转时
                        <a href="#"> </a>

    2)定位资源
        定位网页位置.  eg: 返回顶部
        
        定义位置:
                         <a name="top">顶部 </a>
        回到位置:
                         <a href="#top">返回顶部 </a>
        
        *** pre 原样输出
                         <pre></pre>

7.表格标签

    1)<table></table>: 表格的范围
        属性:      
                <tr></tr> : 行
                <td></td> : 列单元格
                <th></th> : 单元格,可居中和加粗
                <caption></caption>: 表格标题
                border: 表格线
                bordercolor:表格线颜色
                cellspacing:表格线间距。等于0时表格线合并
                width: 表格宽度
                height: 表格高度
        
    2)<tr></tr>整行设置
       属性:
                align: 
                lift :局左
                center :剧中
                right :居右

    3)<td></td>单元格设置
       属性:
               align: 
               lift :局左
               center :剧中
               right :居右
        

    4)合并单元格:
              rowspan: 跨行
              colspan:跨列
                      <td colspan="3"></td> 跨3列

8.表单标签

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


        1)<from></from>:定义一个表单范围
                属性:  action: 把数据传输到指定地址
                enctype:文件上传时候需要的属性
                mathod: 表单的提交方式
                        常用的两种
                                get: 地址栏会携带提交的数据
                                       安全性低
                                       有数据大小的限制
                
                                post: 不携带提交的数据,数据在请求体里
                                        安全性高        
                                        无文件大小的限制


        2)**输入项:可以输入或选择内容的部分
        
        原则:在输入项中需要name属性 
        
        A.大部分输入项  <input type= "输入项的内容"/>

            eg: <intput type="text">

        B.普通输入项:<intput type="text"/>   表单内直接显示输入内容
        C.密码输入项:<intput type="password"/>  表单内显示实心圆点
        
        D.单选输入项:<intput type="radio"/>
            -- 需要属性name ,方可选中且 name必须相同
                eg:<intput type="radio" name="sex"/>
            -- 需要属性value。

            ***实现默认选中: checked = "checked"
                
        E.复选输入项:<input type="checkbox"/>
            -- 需要属性name ,方可选中且 name必须相同
            -- 需要属性value。

            ***实现默认选中: checked = "checked"

        F.文件输入项:<input type="file"/>
            用于文件上传
        
        G.隐藏项:<input type = "hidden">  
            存在于代码中,但不会显示
        
         H.下拉输入项:<select></select>
            <select name="birth">
                <option value="1992">1991<option>
                <option value="1992">1992<option>
                <option value="1992">1993<option>
            </select>

            ***实现默认选中 selected = selected 


         J.文本域:<textarea></textarea>
                属性: row , col
        
                eg:5行6列文本域
               <textarea row="5" col=“6”></textarea>  

         k.提交按钮: <input type="submit"/>   默认提示为:提交查询内容
               用value修改提示语句。提示为注册
               <input type="submit" value="注册"/>


         L.使用图片提交: <input type="image" src="图片路径"/>

         M.重置数据:所有输入项回到初始状态。
                <input type="reset" value="提示语句"/>

         N.普通按钮:事件跳转
                <input type="button" value="提示语句/>

9.其他常用标签:

         <b><b/> : 加粗 
         <u><u/>    :下划线
         <i><i/> :斜体
         <s><s/> :删除线
         <pre><pre/>: 原样输出
         <hr/> 水平分割线
         <sub><sub/> : 下标
         <sup><sup/> : 上标
    
         <div></div> : 自动换行     
                 应用场景:回复评论,自动换行
         <span></span> : 在一行显示   
                 应用场景:错误提示,在一行显示
         <p></p>: 段落标签,比 br 标签多一行

10.HTML头标签的使用

    title : 题目
    meta : 设置页面相关的一些内容
        <meta http-equiv = "refresh" content = "3 ; url = hello.html>
        表示在3秒后刷新,并自动调转到hello.html页面
    base : 超链接的基本信息设置。
        <base target="_blank" /> 所有超链接都在新窗口打开
        
    link : 引入外部文件 
        使用link标签引入css文件

11.框架标签


    作用:划分页面区域,提高页面维护性
    <frameset>:
        - rows  按行划分
            eg: <frameset rows = "80 , *">
                划分为两行,用逗号隔开。一行为80,* 表示剩余所有
        - cols    按列划分

    <frame>
        具体显示的页面
        <frame name = "" src = "a.html">

    ***注意 :   使用框架标签,需要去掉body

    <frameset row = "80 , *">    //将页面划分为上下两部分
        <frame name = "top" src = "a.html">    //上面部分

        <frameset cols = "150 , *">    //把下面分为左右两部分
            <frame name = "lower_left" src = "b.html">    //左边页面
            <frame name = "lower_right" src = "c.html">   //右边页面
        </frameset>
    </frameset>

效果:在左边超链接,内容显示在右边    ---  设置超链接属性target为frame中name的值

12.a标签的扩展

    -百度是网络资源
    -当a标签里面访问网路资源时,必须加一个协议 http :表示一个网络的公共协议

    加上http协议之后,自动识别访问资源是一个网络资源
 

猜你喜欢

转载自blog.csdn.net/qq_41307491/article/details/81150183