Java学习总结（二十三）——前端：HTML基本标签的使用

一．HTML概述
1.HTML：（Hyper Text Markup Language）超文本标记语言，是一种专门用于创建Web超文本文档的编程语言，它能告诉Web浏览程序如何显示Web文档（即网页）的信息，如何链接各种信息。
2.HTML的基本结构：

（1）<head></head>中主要包括网页的基本信息：网页标题，元数据标签
（2）<body></body>中主要包括网页内容
3.网页基本信息：
（1）DOCTYPE声明

（2）<title>标签

（3）<meta>标签


例1（基本构建一个HTML网页）：

运行结果：

二．HTML中的基本标签
1.标题标签：
<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>
例2（标题标签使用）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
    <h1>大家好</h1>
    <h2>大家好</h2>
    <h3>大家好</h3>
    <h4>大家好</h4>
    <h5>大家好</h5>
    <h6>大家好</h6>
</body>
</html>

运行结果：

2.网页的基本标签
（1）段落标签：<p>…</p>
（2）换行标签：<br/>
（3）水平线标签：<hr/>
（4）注释：注释<!-- 注释内容 -->
（5）特殊符号：

例3（上述标签的使用）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
    <h1>清平乐</h1>
    <hr/>
    <p>年年雪里，常插梅花醉，涙尽梅花无好意，赢得满衣清泪！</p>
    <p>今年海角天涯，萧萧两鬓生华。</p>
    <p>看取晚来风势，故应难看梅花</p>
</body>
</html>

运行结果：

3.图像标签
（1）常见的图像格式：JPG,GIF,PNG,BMP
（2）图像标签的使用：

例4（图片标签的使用）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签的使用</title>
</head>
<body>
    <h1>清平乐</h1>
    <hr/>
    <p>年年雪里，常插梅花醉，涙尽梅花无好意，赢得满衣清泪！</p>
    <p>今年海角天涯，萧萧两鬓生华。</p>
    <p>看取晚来风势，故应难看梅花</p>
    <img src="../背景图片/timg.jpg" width="400px"; height="200px">
</body>
</html>

运行结果：

4.链接标签
（1）使用语法：

（2）使用场合：
a.超链接使用场合：
·页面间链接（从一个页面链接到另一个页面）
b.功能性链接：
·电子邮件
·迅雷
·QQ等
例5（链接标签的使用）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签的使用</title>
</head>
<body>
    <h1>清平乐</h1>
    <hr/>
    <p>年年雪里，常插梅花醉，涙尽梅花无好意，赢得满衣清泪！</p>
    <p>今年海角天涯，萧萧两鬓生华。</p>
    <p>看取晚来风势，故应难看梅花</p>
    <a href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&fm=detail&lm=-1&st=-1&sf=2&fmq=&fm=detail&pv=&ic=0&nc=1&z=&se=&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&hs=2&word=%E6%A2%85%E8%8A%B1" target="_blank">
    <img src="../背景图片/timg.jpg" width="400px"; height="200px">点击图片查看更多梅花图片</a></br>
    <a href="li2.html" target="_blank">跳转至li2.html页面</a>
</body>
</html>

运行结果：

点击图片跳转：

点击跳转li2.html:

5.html列表
（1）无序列表

·无序列表的类型：
ul标签type属性取值

（2）有序列表

·有序列表的类型
Ol标签的type取值

（3）定义列表

列表对比：

例6（列表的使用）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表的使用</title>
</head>
<body>
    <h1>西安大学名称</h1>
    <hr/>
    <ul type="circle">
        <li>西安交通大学</li>
        <li>西安电子科技大学
            <OL type="a">
                <li>信息工程学院
                    <dt>电子信息工程</dt>
                    <dd>张飞</dd>
                </li>
                <li>自动化学院</li>
                <li>机械学院</li>
            </OL>
        </li>
        <li>西安理工大学</li>
        <li>西安邮电大学</li>
        <li>陕西师范大学</li>
    </ul>
</body>
</html>

运行结果：


三．HTML中的表格
1.表格语法

2.对其方式
（1）表格对齐方式：默认对齐、居中对齐、左对齐、右对齐
（2）单元格对齐方式：水平对齐方式、垂直对齐方式

3.表格的跨行跨列
（1）表格的跨行：

（2）表格的跨列：与跨行相似使用rowspan=”n”;

例7（表格练习）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
    <style type="text/css">
        td{
            width: 80px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">天津高级中学学生成绩统计表</h1>
    <table border="1px" cellspacing="0" cellpadding="0" align="center">
        <tr>
            <td colspan="8" align="center">理科学生成绩表</td>
        </tr>
        <tr>
            <td rowspan="2">学号</td>
            <td rowspan="2">姓名</td>
            <td colspan="4" align="center">科目成绩</td>
            <td rowspan="2">总分</td>
            <td rowspan="2">排名</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>理科综合</td>
        </tr>
        <tr>
            <td>1</td>
            <td>张飞</td>
            <td>119</td>
            <td>138</td>
            <td>120</td>
            <td>270</td>
            <td>647</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>赵云</td>
            <td>120</td>
            <td>143</td>
            <td>106</td>
            <td>269</td>
            <td>638</td>
            <td>3</td>
        </tr>
        <tr>
            <td>3</td>
            <td>关羽</td>
            <td>134</td>
            <td>137</td>
            <td>119</td>
            <td>239</td>
            <td>629</td>
            <td>4</td>
        </tr>
        <tr>
            <td>4</td>
            <td>刘备</td>
            <td>134</td>
            <td>123</td>
            <td>108</td>
            <td>240</td>
            <td>605</td>
            <td>5</td>
        </tr>
        <tr>
            <td>5</td>
            <td>诸葛亮</td>
            <td>145</td>
            <td>109</td>
            <td>102</td>
            <td>289</td>
            <td>645</td>
            <td>2</td>
        </tr>
        <tr>
            <td colspan="2">链接</td>
            <td colspan="6"><a href="wenke.html" target="_blank">点击跳转至文科学生成绩统计表</a></td>
        </tr>
    </table>
</body>
</html>

运行结果：

四．表单标签
1.表单：

2.表单语法：

3.表单元素格式：

4.表单元素：
（1）文本框：

（2）密码框：

（3）单选按钮：

（4）复选框：

（5）下拉列表框：

（6）按钮：

（7）多行文本域：

（8）文件域：

（9）表单元素的高级属性
·只读：readonly=”true”
·禁用：disabled=”true”
例8（表单标签的使用）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>哈哈网注册界面</title>
    <style type="text/css">
        body{
            text-align: center;
        }
        #jiemian{
            margin-left: 350px;
            border: 1px solid black;
            width: 550px;
            height: 600px;
            background-image: url(../背景图片/t019f18508716a0654b.jpg);
        }
    </style>
</head>
<body>
    <div id="jiemian">
        <h2>欢迎来到哈哈网注册界面</h2>
        <form method="get" action="localhost">
            <p>用户名：<input type="text" name="username" placeholder="请输入用户名"></p>
            <p>密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" placeholder="请输入密码"></p>
            <p>
                性别：
                <input type="radio" name="sex" value="男">男
                <input type="radio" name="sex" value="男">女
            </p>
            <p>
                兴趣爱好：
                <input type="checkbox" name="hobby" value="football"> 足球
                <input type="checkbox" name="hobby" value="basketball"> 蓝球
                <input type="checkbox" name="hobby" value="dancing"> 乒乓球
                <input type="checkbox" name="hobby" value="sing"> 网球
                <input type="checkbox" name="hobby" value="dancing"> 跳舞
                <input type="checkbox" name="hobby" value="sing"> 唱歌
            </p>
            <p>
                籍&nbsp;&nbsp;&nbsp;&nbsp;贯：
                <select name="homeadress">
                    <option value="shanxi">请选择你所在的省份</option>
                    <option value="shanxi">陕西</option>
                    <option value="hebei">河北</option>
                    <option value="henan">河南</option>
                    <option value="shangdong">山东</option>
                    <option value="hunan">湖南</option>
                    <option value="hubei">湖北</option>
                    <option value="sichuan">四川</option>
                    <option value="zhejiang">浙江</option>
                    <option value="zhejiang">云南</option>
                    <option value="zhejiang">山西</option>
                </select>
            </p>
            <p>
                出生年月：
                    <input type="month" name="birthday">
                </select>
            </p>
            <p>
                自我描述：<br/>
                    <textarea name="showText" cols="30" rows="4"></textarea>
            </p>
            <p>
                上传个人照片：
                <input type="file" name="photo"/>
            </p>
            <p>
                <input type="submit" value="提交">
                <input type="reset" value="重置">
            </p>
        </form>

    </div>
</body>
</html>

运行结果：

五．滚动标签
direction="down" left默认值 right up
behavior="alternate" 滚动方式 scoll滚动 alternate 来回滚动 slide单次滚动
loop 循环次数 默认就是无限滚动 可以给具体的次数 -1代表无限滚动
scrollamount 决定文字滚动的速度 数值越大滚动速度越快
bgcolor 滚动区域的背景
width height 滚动的宽高区域
scrolldelay="2000" 滚动的延时
hspace 调整滚动区域离左边边框的横向间距
vspace 调整滚动区域离上边框的纵向间距
onmouseover="this.stop()" 鼠标移动上去，暂停滚动
onmouseout="this.start()" 鼠标离开后，继续滚动
例9（滚动标签练习）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动标签网页设计</title>
    <style type="text/css">
        img{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <!--
            direction="down" left默认值 right up
            behavior="alternate" 滚动方式 scoll滚动  alternate 来回滚动  slide单次滚动
            loop 循环次数 默认就是无限滚动 可以给具体的次数 -1代表无限滚动
            scrollamount 决定文字滚动的速度 数值越大滚动速度越快
            bgcolor 滚动区域的背景
            width height 滚动的宽高区域
            scrolldelay="2000" 滚动的延时
            hspace 调整滚动区域离左边边框的横向间距
            vspace 调整滚动区域离上边框的纵向间距
            onmouseover="this.stop()" 鼠标移动上去，暂停滚动
            onmouseout="this.start()" 鼠标离开后，继续滚动
       -->
       <marquee direction="right up behavior="alternate" loop="-1" bgcolor="#00FFFF" hspace="50px">
       <h1>×××</h1>
       中央人民政府 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 美利坚合众国
       </marquee>
        <marquee direction="right up behavior="scoll" loop="-1" hspace="50px" scrolldelay="20" onmouseout="this.start()" onmouseover="this.stop()">
            <a href="http://www.baidu.com" target="_blank"><img src="../../20180306-CSS/img/002.gif"></a>
       </marquee>
</body>
</html>

运行结果：


【本次HTML部分总结完毕】

原文地址：http://blog.51cto.com/13501268/2130861

时间： 2024-10-13 12:50:27

Java学习总结（二十三）——前端：HTML基本标签的使用的相关文章

Java学习系列(二十三)Java面向对象之内部类详解

一.前言 内部类也称寄生类,就是把一个类放在类里面(即内部类的上一级程序单元是类)定义,将其作为外部类的成员.内部类主要用几种定义形式:静态(static)内部类,非静态内部类,匿名内部类(也就是没有名字的寄生类).内部类的好处就是内部类可以直接外部类的(包括私有)成员,反之不能.下面我们通过一些实例来详细讲解一下Java中内部类的使用及几种定义形式的相互调用. 二.实例说明 (1)匿名内部类:当程序创建匿名内部类时,会立即创建匿名内部类(实现类)的实例. interface IBreathe

angular学习笔记(二十三)-$http(1)-api

之前说到的$http.get和$http.post,都是基于$http的快捷方式.下面来说说完整的$http: $http(config) $http接受一个json格式的参数config: config的格式如下: { method:字符串 , url:字符串, params:json对象, data:请求数据, headers:请求头, transformRequest:函数,转换post请求的数据的格式, transformResponse:函数,转换响应到的数据的格式, cache:布尔

Java Web总结二十三发送邮件

一.所需jar包: 1.mail.jar 2.activation.jar 二.代码: 1.MailUtil.java package com.gnnuit.web.mail.util; import java.util.Properties; import javax.mail.Message; import javax.mail.Session; import javax.mail.Transport; import javax.mail.internet.InternetAddress;

Java学习笔记二：初始化（一）

1.对象初始化 在使用 new 初始化对象时,系统通常使用默认的构造函数,这个构造函数没有返回值,格式为: public class InitializeTest { private int a; // 默认构造函数 public InitializeTest() { } // 自定义构造函数 public InitializeTest(int a) { this.a = a; } } 虽然在使用 new 创建实例时,返回了这个对象的引用,但是这个与没有返回值的void方法不同 //void方法

Java学习笔记二：数据类型

Java学习笔记二:数据类型 1. 整型:没有小数部分,允许为负数,Java整型分4种:int short long byte 1.1 Int最为常用,一个Int类型变量在内存中占用4个字节,取值范围从-2 147 483 6至2 147 483 647 超过20亿,如果用来存储大于20亿的值,最好使用long型. 1.2  int 与Integer: Java中的数据类型分为基本数据类型和复杂数据类型.Int为前者,integer为后者. Integer是int的封装类,提供了很多转换方法,当

【转载】JAVA学习路线二

JAVA学习路线二------------高阶面试 作者:Java高级进阶链接:https://zhuanlan.zhihu.com/p/35301291来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 1.hashcode相等两个类一定相等吗?equals呢?相反呢? 2.介绍一下集合框架? 3.hashmap hastable 底层实现什么区别?hashtable和concurrenthashtable呢? 4.hashmap和treemap什么区别?低层数据结

javaweb学习总结(二十三)——jsp自定义标签开发入门

一.自定义标签的作用 自定义标签主要用于移除Jsp页面中的java代码. 二.自定义标签开发和使用 2.1.自定义标签开发步骤 1.编写一个实现Tag接口的Java类(标签处理器类) 1 package me.gacl.web.tag; 2 3 import java.io.IOException; 4 5 import javax.servlet.http.HttpServletRequest; 6 import javax.servlet.jsp.JspException; 7 import

javaweb学习总结(二十三)——jsp自定义标签开发入门【转】

原文地址:http://www.cnblogs.com/xdp-gacl/p/3916734.html 一.自定义标签的作用 自定义标签主要用于移除Jsp页面中的java代码. 二.自定义标签开发和使用 2.1.自定义标签开发步骤 1.编写一个实现Tag接口的Java类(标签处理器类) 1 package me.gacl.web.tag; 2 3 import java.io.IOException; 4 5 import javax.servlet.http.HttpServletReques

javaweb学习总结(二十六)——jsp简单标签标签库开发(二)

一.JspFragment类介绍 javax.servlet.jsp.tagext.JspFragment类是在JSP2.0中定义的,它的实例对象代表JSP页面中的一段符合JSP语法规范的JSP片段,这段JSP片段中不能包含JSP脚本元素. WEB容器在处理简单标签的标签体时,会把标签体内容用一个JspFragment对象表示,并调用标签处理器对象的setJspBody方法把JspFragment对象传递给标签处理器对象.JspFragment类中只定义了两个方法,如下所示: getJspCon

javaweb学习总结(二十五)——jsp简单标签开发(一)

一.简单标签(SimpleTag) 由于传统标签使用三个标签接口来完成不同的功能,显得过于繁琐,不利于标签技术的推广, SUN公司为降低标签技术的学习难度,在JSP 2.0中定义了一个更为简单.便于编写和调用的SimpleTag接口来实现标签的功能. 实现SimpleTag接口的标签通常称为简单标签.简单标签共定义了5个方法: setJspContext方法 setParent和getParent方法 setJspBody方法 doTag方法(非常重要),简单标签使用这个方法就可以完成所有的业务