JAVA WEB介绍和HTML的分类使用

JAVA WEB的介绍

分类

针对后端人员来说，我们现在只需要大概了解前端的基本知识就可以了，同时也会简单操作。
java WEB：分为HTML、CSS、JAVAScript
1.HTML:构建整个页面的基本框架以及内容。
2.CSS：控制html页面样式。
3.JS：控制页面的动态效果。（javaScript）

HTML

1.简单介绍
超文本标记语言，超文本就是指页面可以包含图片、链接，甚至音乐、程序等非文字元素。分为==“头部分”和“主体部分”==，“头部分”提供关于网页信息，主体部分提供网页具体内容。
2.基本框架

<!DOCTYPE html>
<html lang="en">
<head>
    <title>hellohtml</title>
    <meta charset="UTF-8">
</head>
<body>
</body>
</html>

3.元素分类
3.1块状元素
常用块状元素：div、p、li、h、form、body、table、ol、ul、dl
特点：一个元素独占一行 宽高可设置（宽、高、内边距、外边距、边框）
3.2内联元素
常用内联元素：a、span、br、i、em、strong、lable、b
特点：可以与其他元素在一行显示 宽高不可设置，由内容决定宽高
3.3内联块状元素
常用内敛块状元素：input、img、button
特点：可以与其他元素在一行显示 宽高可设置（宽、高、内边距、外边距、边框）

块状元素

div：内大块，相当于一个大容器，将页面分隔成几个部分

<div style="border: 1px red solid;width: 100px;height: 100px"></div>

p:和div相似，不过主要用于段落

<p> 常用块状元素：div、p、li点：一个元素独占一行    宽高可设置（宽、高、内边距、外边距、边框）</p>

h1~h6:标题元素 字体自大变小（h3可以是1到6，字体也相应的变化）

<h3>常见的内联元素</h3>

列表元素：有序列表ol 无序列表ul 自定义列表dl
ol：

 <ol>
         <li>li为一个小的块状</li>
         <li>可去掉排序前面的标签</li>
     </ol>

ul：将前面标签设置为正方形

 <ul type="square">
        <li>标题一</li>
        <li>标题二</li>
        <li>标题三</li>
    </ul>

dl：自定义

<dl>
        <dt>四川</dt>
            <dd>成都</dd>
            <dd>宜宾</dd>
        <dt>云南</dt>
            <dd>西双版纳</dd>
            <dd>大理</dd>
    </dl>

内联元素

"<(a)>"超链接 重要属性href和target（这里其实没有括号，加括号原因是不能直接打尖加a）

相对路径：使用相对路径，相对路径只能访问本项目中的其他页面。
相对路径的写法（举例）：

 <li>同级目录下的其他文件：直接其他页面的文件名称</li>
 <li>同级目录下别的目录下的页面：目录名称/文件名称</li>  例如：<a href="user/adduser.html">增加用户</a>
 <li>上级目录下的目录下的文件 例如<a href="../packge/test.html">上级目录</a></li>

绝对路径：

<li>本项目上的绝对路径,路径的最前面加上/。例如：<a href="/HTML/DEMO/html/elementtype.html">元素类型</a></li>
 <li>互联网上的绝对路径.路径的前面加上http：//  例如：<a href="http://www.baidu.com">链接百度</a></li>

目标框架（打开的超链接在哪个框架打开）

 在新窗口打开链接目标
                <br>
                <a href="http://www.baidu.com"target="_blank">百度</a>

在父级框架集中打开连接目标<br>
                <a href="http://www.baidu.com"target="_parent">在父窗口中打开</a>

    在整个窗口的顶层框架中打开连接目标<br>
                <a href="http://www.baidu.com"target="_top">在顶层窗口中打开</a>

   在当前框架下打开连接目标（默认值）<br>
                <a href="http://www.baidu.com"target="_self">百度（默认打开窗口）</a>

  <p>iframe,网页中的一个框架，可以在iframe里面放入一个页面</p>
        <iframe style="width: 2000px;height: 200px;border:1px " name="main"/>
          在指定框架中打开连接目标（target目标和框架的name属性一致）<br>
                <a href="http://www.baidu.com"target="main">百度（指定框架中打开）</a>

锚链接

 <div id="food">
   <h1 id="top">超链接a</h1>
   <a href="#top">回到页面顶部</a><br>
    <a href="elementtype.html#food">回到页面的尾部</a>

内联块状元素（img input）

img

重要属性：src：指向需要打开的图片地址并显示（地址和超连接的地址一样）
alt：图片没有找到的替代文字
title：鼠标悬浮文字（可设置）
举例：

<a href="http://www.baidu.com"> <img src="../img/ty.jpg" alt="未找到图片的文字"width="200px" height="100px" title="漂亮的姐姐"><br></a>
<!--图片作为连接去连接-->
<img src="../img/ty.jpg" alt="未找到图片的文字"width="200px" height="100px" title="漂亮的姐姐"><br>
<img src="../img/yy.jpg" alt="未找到图片的文字" width="200px" height="100px"><br>

input

直接举例：

 文本框：<input type="text"><br>
        文本框：<input type="text" value="99999"><br> <!--赋初始值-->

密码框:<input type="password">

复选框：<input type="checkbox" value="1" name="ho">
        <input type="checkbox" value="1" name="ho">

 单选框：<input type="radio" name="sex" checked> 男
               <input type="radio" name="sex">女<br>
        注明：相同nama的属性，表示同一个组的单选框，那么最多只能被选中一个<br>
        复选框都可以选中，一个单选题，一个多选题。<br>
        默认选中：  使用属性：checked<br>

文件框： <input type="file"><br>
        主要用于文件上传

隐藏域：<input type="hidden"><br>
        用户不可见，但是程序可使用。一般用于在页面记录隐藏信息。（不用给用户看，但是程序又需要的数据）

 <input type="submit" value="提交按钮">用于提交form表单到服务器的<br>
<input type="reset" value="重置按钮"> 将form表单中的控件值置为初始状态<br>
普通按钮：<input type="button" value="普通按钮" onclick="javascript:alert('我就是触发事件结果')">没有特点的功能，主要用于触发Js事件

 多行文本域：<textarea cels="40" rows="20"></textarea><br>
            备注：cels设置列，rows设置行（两个一起控制文本域的大小）<br>
            多行文本域：<textarea cels="40" rows="20" style="height: 80px;width: 400px"></textarea><br>
            备注：多行文本域一般使用style的width和height控制文本域大小

  下拉列表：
            <select>
                <option>党员</option>
                <option>团员</option>
                <option>群众</option>
            </select>

table

 <table style="border: 1px red solid; width:100%"border="1" cellspacing="0"><!--solid 实现,border="1" cellspacing="0"设置表格框线-->
        <tr>
            <th>商品名称</th>   <!--居中，并且加粗字体-->
            <th>价格</th>
            <th>生产日期</th>
            <th>厂家</th>
        </tr>
        <tr>  <!--表示一行，有几行就是几行-->
            <td>商品名称</td>       <!--表示一个单元格-->
            <td>价格</td>       <!--表示一个单元格-->
            <td>生产日期</td>      <!--表示一个单元格-->
            <td>厂家</td>        <!--表示一个单元格，有几个单元格就是几列-->
        </tr>
        <tr>
            <td>雪碧</td>
            <td>2元</td>
            <td>8月15</td>
            <td>成都高新</td>
        </tr>
        <tr>
            <td>可口可乐</td>
            <td>3元</td>
            <td rowspan="2">8月15</td> <!--合并列，占据两个位置colspan-->
            <td>成都温江</td>
        </tr>
        <tr>
            <td>旺仔</td>
            <td>6元</td>
            <td>成都金牛</td>
        </tr>
        <tr>
            <td>旺仔</td>
            <td>6元</td>
            <td colspan="2">8月15成都锦江</td> <!--合并行，占据两个位置colspan-->
        </tr>
    </table>

框架集 frameset 作为了解

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎使用自助贩水机</title>
</head>    <!--frameset,去掉body部分-->
<frameset rows="80px,*,50px">   <!--三行，首尾行80磅，中间撑满-->
    <frame name="head" src="use/head.html">
    <frameset cols="200px,*" >  <!--第二行继续给了一个两列的框架-->
        <frame name="meno" src="use/meno.html">
        <frame name="main">
    </frameset>
    <frame name="toot" src="use/foot.html">
</frameset>
</html>
版权声明：本文为green5858原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。