HTML基本标签,表格标签,框架标签

1、html简介

1.1什么是html

html全称:Hyper Text Markup Language(超文本标记语言)

备注:
          a.超文本:页面内可以包含图片、链接,甚至音乐、程序等非文字元素
          b.标记:标签,不同的标签实现不同的功能
          c.语言:人与计算机的交互工具  
2、html基本标签

2.1结构标签(文件标签)

<html><html>:根标签        
    <head>             
    <title></title>:页面的标题        
    </head>        
    <body></body>:内容

属性:        
    text:文本的颜色        
    bgcolor:背景色        
    background:背景图片                 
颜色的表示方式:                        
    第一种方式:red green blue                 
    第二种方式:#000000  #ffffff  #325687   #377405

2.2排版标签

2.2.1.注释标签:<!--注释-->                
    2.2.2.换行标签:<br/>           
    2.2.3.段落标签:<p>文本文字</p>   
          特点:段与段之间有空行                          
          属性:align对齐方式    (left    center  right)          
    2.2.4.水平线标签:<hr/>                      
          属性:   
              width:水平线的长度(两种:第一种:像素表示;第二种,百分比表示)

size: 水平线的粗细 (像素表示,例如:10px)                                 
              color:水平线的颜色                                  
              align:水平线的对齐方式

2.4文字标签(标题标签)

2.4.1基本文字标签

<div></div>:行级块标签,独占一行,换行
   <span></span>:行内块标签,所有内容都在同一行
         作用:   <div></div>:主要是结合css页面分块布局
                  <span></span>:进行友好提示信息

2.4.2标题标签

<h1></h1>—-<h6></h6>  
 随着数字增大文字逐渐变小,字体是加粗的,内置字号,默认占据一行;

2.5.1无序列表ul(***)

无序列表标签: <ul></ul>
             属性:type :三个值,分别为
                  circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
         列表项:<li></li>
   
   示例如下:  
        <ul type="square">无序列表
            <li>苹果</li>
            <li>香蕉</li>
            <li>橘子</li>
        </ul>

显示效果:

HTML基本标签,表格标签,框架标签

2.5.2有序列表ol(***)

有序列表标签:<ol></ol>
             属性:type:1、A、a、I、i(数字、字母、罗马数字)
             列表项: <li></li>
      示例如下:
         <ol type="I">有序列表
            <li>苹果</li>
            <li>香蕉</li>
            <li>橘子</li>
        </ol>

2.5.3列表嵌套

<ul>
            <li>咖啡</li>
            <li>茶
                <ul>
                    <li>红茶</li>
                    <li>绿茶
                        <ul>
                            <li>中国茶</li>
                            <li>非洲茶</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>牛奶</li>
</ul>

2.6图形标签

<img/>自关闭标签   
  属性:
        src:图形地址
      width:宽度
      height:高度
      border:边框
      align:对齐方式,代表图片与相邻的文本的相当位置(有三个属性值:top middle bottom)
      alt:图片的文字说明
      hspace 和 vspace 设定图片边沿上下左右空白,以免文字或其它图片过于贴近

2.7链接标签

<a></a>
 属性:
     href:跳转页面的地址(跳转到外网需要添加协议);            
     name:名称,锚点(回到锚点: 顶部,底部,中间),在访问锚点的书写格式:#name的值                     target:_self(自己)  _blank(新页面,之前页面存在)  默认_self

2.8 表格标签

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

2.8.1普通表格(table,tr,td)

<!--border:边框的宽度 bordercolor:边框的颜色 cellspacing:单元格的边距-->
        <table border="1" bordercolor="red" cellspacing="0" align="center">
            <tr>
                <td>学号</td>
                <td>姓名</td>
            </tr>
            <tr>
                <td>1</td>
                <td>aa</td>
            </tr>
        </table>

2.8.2表格的表头

<table border="1" bordercolor="red" cellspacing="0" align="center">
            <caption>学生表</caption>
            <tr>
                <th>学号</th>
                <th>姓名</th>
            </tr>
            <tr>
                <td>1</td>
                <td>aa</td>
            </tr>
        </table>

2.8.3表格的列合并(colspan)****

<table border="1" bordercolor="red" cellspacing="0" align="center">
            <tr>
                <td colspan="4" align="center">学生表</td>
            </tr>
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td colspan="2">各科成绩</td>
            </tr>
            <tr>
                <td>1</td>
                <td>aa</td>
                <td>80</td>
                <td>90</td>
            </tr>
        </table>

显示效果

HTML基本标签,表格标签,框架标签

2.8.4表格的行合并(rowspan)****

<table border="1" bordercolor="red" cellspacing="0" align="center">
            <tr>
            <td colspan="4" align="center">学生表</td>
            </tr>
            <tr>
                <td>信息</td>
                <td>名称</td>
                <td>价格</td>
            </tr>
            <tr>
                <td rowspan="2">商品信息</td>
              
                <td>哇哈哈</td>
                <td>30</td>
            </tr>
            <tr>
                <td>爽歪歪</td>
                <td>90</td>
            </tr>
</table>

显示效果:

HTML基本标签,表格标签,框架标签

2.9文本格式化标签

<b>     定义粗体文本。
    <big>     定义大号字。
    <em>     定义着重文字。
    <i>     定义斜体字。
    <small>     定义小号字。
    <strong>     定义加重语气。
    <sub>     定义下标字。
    <sup>     定义上标字。
    <ins>     定义插入字。
    <del>     定义删除字
3、html表单标签

3.1from元素

常用属性:action表示动作,值为服务器的地址,把表单的数据提交到该地址上处理
         method:请求方式:get 和post
         enctype:表示是表单提交的类型
                默认值:application/x-www-form-urlencoded  普通表单
                       multipart/form-data  多部分表单(一般用于文件上传)
                       
面试:get请求和post请求的区别?(*****)

get:
       1.地址栏,请求参数都在地址后拼接 path?name="张三"&password="123456"
       2.不安全
       3.效率高
       4.get请求大小有限制,不同浏览器有不同,但是大约是2KB
使用情况:一般情况用于查询数据。
     post:
       1.地址栏:请求参数单独处理。
       2.安全可靠些
       3.效率低
       4.post请求大小理论上无限。
使用情况:一般用于插入删除修改等操作

4.1.1 input元素

type: 以下为type可能要取的值:
      1.1   text 普通文本
      1.2   password  密码框   密文或者掩码
      1.3   radio 表示是单选,name必须一致,
                  表示同一组中只能选中一个( checked ="checked" 表示选中)
      1.4  checkbox  表示多选 ,name必须一致,
                 表示同一组中可以选多个,返回值是个数组( checked ="checked" 表示选中)
      1.5   file :表示上传控件                
      以上具有输入性质的必须要有name属性,一开始写value表示是默认值(以后获取输入框的内容要根据name来取)    
     以下按钮不具有输入性质,不需要name属性,但是按钮上的文字提示使用value属性
      1.6 submit   提交
      1.7 reset   重置
      1.9 image   图片按钮
以上所有input的属性: width 设置宽度,height 设置高度  border 设置边框、
     1.10 hidden  表示隐藏域,该框的内容服务器需要,但是不想让用户知道(不想清楚的显示在界面上)

4.1.2 select元素(下拉列表)

<select name="city">   <!--select标签添加该属性multiple="multiple"表示多选-->  
     <!--option表示下拉列表项-->
    <option value="北京">北京</option>
     <!--selected="selected"表示选中该项-->
    <option value="上海" selected="selected">上海</option>
    <option value="广州">广州</option>
    <option value="杭州">杭州</option>
</select>

4.1.3 textarea元素(文本域)

需要指定输入的区域位置大小

<textarea cols="100" rows="5">  表示5行100列的区域可以输入内容,该元素没有values属性

4、html基本标签的综合案例

HTML基本标签,表格标签,框架标签

注册源码:

<body style="background:mediumseagreen;" >
    
       <form action="" method="get">
           <table align="center">
               <h3>注册</h3>
               <tr>
                   <td align="right">用户名:</td>
                   <td><input type="text" name="username" /></td>
               </tr>
               <tr>
                   <td align="right">密码:</td>
                   <td><input type="password" name="password" id="password" ></td>
               </tr>
               <tr>
                   <td align="right">确认密码:</td>
                   <td>
                       <input type="password" name="conf" />
                   </td>
               </tr>
               <tr>
                   <td align="right">性别:</td>
                   <td>
                       <input type="radio" name="sex" value="男" />男
                       <input type="radio" name="sex" value="女"  checked="checked"/>女
                   </td>
               </tr>
               <tr>
                   <td align="right">爱好:</td>
                   <td>
                   <input type="checkbox"  name="happy" value="digdate" checked="checked" />大数据
                   <input type="checkbox" name="happy" value="mysql"/>数据库
                   <input type="checkbox" name="happy" value="physon" />physon
                   <input type="checkbox" name="happy" value="java" />java
                   </td>
               </tr>
               <tr>
                   <td align="right">地址:</td>
                   <td>
                       <select name="city">
                           <option value="北京">北京</option>
                           <option value="上海">上海</option>
                           <option value="河南" selected="selected">河南</option>
                       </select>
                   </td>
               </tr>
               <tr>
                   <td align="right">个人介绍</td>
                   <td>
                       <textarea cols="100" row="5"></textarea>
                   </td>
               </tr>
               <tr>
                   <td></td>
                   <td align="center">
                   <input type="submit" value="注册" />    
                   <input type="reset" value="重置"/>
                   </td>
               </tr>
           </table>
       </form>
    </body>
5、html的框架标签frameset

5.1框架结构标签frameset

框架结构标签(<frameset>)定义如何将窗口分割为框架
        每个 frameset 定义了一系列行或列
        rows/columns 的值规定了每行或每列占据屏幕的面积

5.2框架标签frame

Frame 标签定义了放置在每个框架中的 HTML 文档。

5.3基本的注意事项

1. 不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用
2. 假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在   <frame> 标签中加入:noresize="noresize"。

5.4效果图及源码展示

5.4.1源代码:

<!--1.框架标签不能和body同时出现
    2.frameset: border去除框架标签的框 ,示例:border="0"
                     border="10px" bordercolor="yellow"
    3.frame框大小不变:两种情况:
           第一种:border ="0"
           第二种: noresize="noresize"  不改变大小
     备注:scrolling是否显示滚动条
                yes  显示
                no   不显示
                auto  如果内容高度超过屏幕高度直接显示滚动,  
    4. frame 是框,内容使用src来填充,
             定位显示到指定位置:  使用name属性
        例如:
            点击left.html的标签跳转内容显示在right.html            
             1.给right.html的frame添加name属性,方便定位。
             2.在left.html中使用target目标定位,根据name名查找
        -->
    <frameset rows="200,*" border="10px" bordercolor="yellow">
        <frame src="top.html" scrolling="yes" noresize="noresize" />
        <frameset cols="200,*">
            <frame src="left.html" scrolling="yes" noresize="noresize" />
            <frame src="right.html" name="content" scrolling="yes" />
        </frameset>
    </frameset>

显示效果:

HTML基本标签,表格标签,框架标签

6、html的其它标签和特殊字符

6.1其他标签

<!--该网页的关键字-->
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <!--该网页的描述-->
        <meta http-equiv="description" content="this is my page">
         <!--该网页的编码-->
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <!-- href:引入css文件的地址-->
        <link rel="stylesheet" type="text/css" href="./styles.css">
        <!--src:js的文件地址-->
        <script type="text/javascript" src=""></script>

6.2 特殊字符  

       &lt; 小于号  
        &gt; 大于号
        &amp; 与字符
        &quot; 引号
        &reg; 己注册
        &copy; 版权
        &trade; 商标
        &nbsp; 空格

上一篇:poj 2942 Knights of the Round Table 圆桌骑士(双连通分量模板题)


下一篇:la3523 白书例题 圆桌骑士 双联通分量+二分图