AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JSP网站开发之HTML入门知识及常用标记符 （一）

2016-08-27 2992
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 准备给《JSP网站开发》这门小学期时间课程总结些HTML入门知识，这对网站设计很有用的，希望对你们也有所帮助吧！文章中如果有不足之处，还请海涵~ 目录： 一. JSP前端设计及HTML基础介绍 1.JSP基础知识
        最近发生的事情很多，其中一件很重要的事情就是：学生生涯的结束，教学生涯的开始。我准备下个月写一篇总结研究生生涯的文章，包括自己放弃互联网选择回家教书、找工作经历、项目和毕业设计的各种感想。很荣幸XB七月初就给了我第一次大学教学的经历，很享受很珍惜也很感触。尤其是看到学生“秀璋，你好！”的跑马灯欢迎界面、发表“终于会编程了，感觉自己好牛逼”的说说、递给我餐巾纸、和你们打球等等。


        言归正传，因为学生是大二升大三的，但是却没有学过网页相关知识，所以准备给《JSP网站开发》这门小学期时间课程总结些HTML入门知识，这对网站设计很有用的，希望对你们也有所帮助吧！文章中如果有不足之处，还请海涵~
        目录：
        一. JSP前端设计及HTML基础介绍
                1.JSP基础知识
                2.HTML基础介绍
                3.查看网页源代码及审查元素
        二. HTML常用标记符
                1.HEAD标记符
                2.HTML属性
                3.BODY标记符及设置BODY背景图片颜色
                4.注释
                5.FONT标记符
                6.B\I\U字体样式及物理元素与逻辑元素
                7.特色字符<>引号等
        三.HTML设置段落格式
                1.分段标记符P
                2.换行标记符BR
                3.标题样式Hn
                4.添加水平线HR
                5.align属性设置对齐方式
                6.列表知识

        推荐大家通过W3C学习HTML知识，文章主要参考我上课内容及北理HTML课件。

一. JSP前端设计及HTML基础介绍


        JSP网站开发推荐这六篇文章：Java+MyEclipse+Tomcat系列
        参考前文：
        Java+MyEclipse+Tomcat (一)配置过程及jsp网站开发入门
        Java+MyEclipse+Tomcat (二)配置Servlet及简单实现表单提交
        Java+MyEclipse+Tomcat (三)配置MySQL及查询数据显示在JSP网页中
        Java+MyEclipse+Tomcat (四)Servlet提交表单和数据库操作
        Java+MyEclipse+Tomcat (五)DAO和Java Bean实现数据库和界面分开操作
        Java+MyEclipse+Tomcat (六)详解Servlet和DAO数据库增删改查操作
        免费资源下载地址：
        http://download.csdn.net/detail/eastmount/8733385

1.JSP基础知识

        静态网页：指网页一旦制作完成，不能随意更改，缺点是不能实现用户与服务器之间的交互，网页制作成本高，更改困难，如“hao123”。
        动态网页：能根据用户的要求而动态改变的网页内容，包括JSP、ASP、PHP，如“12306”。
        JSP：英文是Java Server Page，Java服务器页面。JSP技术有点类似ASP技术，它是在传统网页HTML文件（*.html, *.htm）中插入Java程序段（Scriptlet）和JSP标记（Tag），从而形成JSP文件（*.jsp）。
        在配置MyEclipse和Tomcat后运行如下图所示，其中WebRoot文件夹下的index.jsp即为网站的前端页面设计。

        

        其中index.jsp的代码为：
 
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  </head>
  
  <body>
    This is my JSP page. <br>
  </body>
</html>
        这篇文章的重点部分是普及HTML的基础知识，并结合JSP开发进行普及介绍。

2.HTML基础知识

        第一个问题你肯定会问“什么是HTML”？
        HTML是描述网页的一种语言，一种规范，超文本标记语言（HyperText Markup Language），并不是一种编程语言。主要通过HTML标记标签（markup tag）来标记要显示的各个部分。
        HTML标签主要包括两个特性：
        （1）HTML是所有标记符都由尖括号包围起来，如<html>；
        （2）标签成对出现，开始标签或开放标签（Opening tag）是由“尖括号+关键字”组成，如<table>；而结束标签或闭合标签（Closing tag）是由“<+斜杠/+关键字+>”组成，如</table>。
        HTML文档或网页：由HTML标签和纯文本组成。Web浏览器读取HTML网页，通过网页中添加的标记符，可以告诉浏览器如何显示网页，即确定内容的格式。然后根据内容周围的HTML标记符解析并显示各种内容。
        如何编写HTML网页呢？
        可以通过Dreamweaver编辑HTML，但个人建议使用Notepad记事本、Nptepad++、TextEdit、UltraEdit、Sublime Text等工具来书写网站。
        运行直接将网站命名为.html或.htm后缀的文件，通过浏览器打开即可。例如：
 
<html>
  <head>   
    <title>HTML开发</title>
  </head>
  
  <body>
    欢迎学习Eastmount的HTML网站开发知识! <br>
  </body>
</html>
        使用Sublime Text编辑及运行结果如下图所示，其所有内容放在<html></html>两个标记符之间。图中包含一个首部标记<head></head>，其中首部在JSP中通常可设置标题<title>和JavaScript；同时包含正文标记<body></body>可见网页内容，里面书写具体的网页内容。


3.查看网页源代码及审查元素

        通过查看网页源代码学习别人的代码也是非常重要的一个内容。右键浏览器，查看源代码即可。
        通过审查元素可以定位到具体的网页内容，在爬虫过程中很常见。定位具体的控件，然后右键审查元素。

        显示百度Logo图片结果如下图所示：


        注意：同样右键可以设置浏览器的编码方式，只要.html或.jsp与浏览器编码方式一致，就不会显示中文乱码，例如都为UTF-8。


二. HTML常用标记符


        注意：HTML标记符是不区分大小写的，<html>和<HTML>没有区别，但是XHTML要求标记符区分大小写。希望大家养成使用小写的习惯，兼容性更好。

1.HEAD标记符

        首部标记<head>和</head>位于Web页的开头，其中不包括Web页面的任何实际内容，而是提供一些与Web页有关的特定信息。首部标记内容通常包括：
        （1）样式表CSS定义位于<style>和</style>之间；
        （2）脚本定义位于<script>和</script>之间；
        （3）标题标记<title>和</tilte>之间，用于定义网页标题。如：

2.HTML属性

       HTML中属性用于描述对象特征的特性。所有属性斗放置在开始标记符的尖括号内，多个属性使用空格分开，通常不区分大小写，以“名称-值”的形式出现。
       例如：如<table name="t1" id="t2">。
       属性值应该始终包括在引号内，常用双引号，某些情况下属性本省包含有双引号，必须使用单引号。例如在java中显示超链接。
        常见属性：
        --class: 规定元素类名
        --id: 规定元素唯一id
        --name: 规定元素名称
        --style: 规定元素行内样式（inline style）
        --title: 规定元素额外信息（工具中提示）
        PS：会面讲到具体的标记符会详细介绍。


3.BODY标记符及设置BODY背景图片颜色

        BODY正文标记符中的文字，如果没有其他标记符修饰，则为无格式形式。
        注意：空格、回车这些格式控制在显示时都不起作用，如果要使用它们应使用预格式化元素<pre>和</pre>。
        通常网页格式如下图所示，建议开始结束标签补齐再写具体内容。


        设置<body>标记符的背景颜色使用bgcolor属性可以设置，text用于设置正文的颜色，颜色出来使用名称进行赋值外，可以使用#RRGGBB格式进行赋值。
         --bgcolor: 设置背景颜色；
         --text: 设置背景正文字体颜色；
         --background: 设置背景图片；
         eg: <body bgcolor="yellow" text="red">


        使用background设置背景图案。 
        eg: <body background="image.jpg">

        注意1：背景图片会重复显示，默认是如果图片不能沾满整个屏幕，就在x方向和y方向重复显示。可以通过background-repeat设置重复属性，包括四个值：repeat默认，x和y方向重复；repeat-x水平方向重复；repeat-y垂直方向重复；no-repeat背景图像仅显示一次。
        设置代码：<body style="background-image:url('图片地址'); background-repeat:no-repeat;">

        注意2：在JSP中建议将图片拖动到WebRoot目录下，或建立一个images文件夹，拖动到该项目中，然后通过相对路径进行调用，而不是通过设置"C:\\xxx\\xxx.jpg"的方式（容易丢失路径）。

4.注释

        HTML中的注释开始标签是<!--，结束标签是-->。两个标记之间的内容为注释，不在浏览器中显示。
        主要用于提高代码的可读性、易于理解。
        例如：<!-- This is a comment -->

5.FONT标记符

        设置字符格式，包括字体、字号、文字颜色等。
        --size: 设置字体大小，值从1到7，默认是3，可使用+或-作为相对值；
        --color: 设置字体颜色；
        --face: 设置字体样式；
        例如：设置字体大小和颜色。

<HTML>
<HEAD><TITLE>FONT 标记符的 size color 属性示例</TITLE></HEAD>
<BODY>
<P>正常文本
<P><FONT size="7"> 这些是大字体的文本 </FONT>
<P><FONT size="1"> 这些是小字体的文本 </FONT>
<P><FONT size="+2">这些文字的字体比正常文本大 2 号</FONT>
<P><FONT size="-2">这些文字的字体比正常文本小 2 号</FONT>
<P><FONT color="red">这些文字是红色字体</FONT>
<P><FONT color="green">这些文字是绿色字体</FONT>
<P><FONT color="#334455">这些文字是#334455色字体</FONT>
</BODY>
</HTML>
        显示效果如下图所示：

        例如：设置字体样式。 
<HTML>
<HEAD><TITLE>字体示例</TITLE></HEAD>
<BODY>
<DIV align="center">
  <P>以下是常用中文字体：</P>
  <FONT face="宋体">宋体</FONT><BR>
  <FONT face="楷体_GB2312">楷体</FONT><BR>
  <FONT face="黑体">黑体</FONT><BR>
  <FONT face="隶书">隶书</FONT><BR>
  <FONT face="幼圆">幼圆</FONT>
  <P>以下是常用英文字体：</P>
  <FONT face="Times New Roman"> Times New Roman </FONT><BR>
  <FONT face="Arial">Arial</FONT><BR>
  <FONT face="Arial Black">Arial Black</FONT><BR>
  <FONT face="Courtier New">Courtier New</FONT><BR>
  <FONT face="Comic Sans MS">Comic Sans MS</FONT><BR>
  <FONT face="Verdana">Verdana</FONT><BR>
</DIV>
</BODY>
</HTML>
        显示效果如下图所示：
        注意：字体样式拼写需书写正确。

6.B\I\U字体样式及物理元素与逻辑元素

        主要包括：
        --<b> ... </b>文字加粗
        --<strong> ... </strong> 文本加重语气
        --<big>  ...   </big>  字体大一号
        --<small>  ...  </small>  字体小号效果
        --<em>   ...   </em>着重显示（emphasized）
        --<i>   ...    </i>   字体斜体（italic）
        --<sub>  ...  </sub>   定义下标，如H20 水
        --<sup>   ...  </sup>  定义上标，如O2 氧气
        --<u>   ...   </u>   下划线
        --<s>   ...    </s>  删除文本
        
        例如：

<HTML>
<HEAD><TITLE>物理字符样式效果示例</TITLE></HEAD>
<BODY>
  <P><B>此处为粗体b显示文本</B></P>
  <P><STRONG>此为粗体strong显示</STRONG>
  <P><BIG>此处为大字big体文本</BIG></P>
  <P><SMALL>此处为小字small体文本</SMALL></P>
  <P><I>此处为斜体i文本</I></P>
  <P><EM>此为加重语气em斜体</EM></P>
  <P><TT>此处为等宽tt字体文本</TT></P>
  <P><U>此处为下划线u文本</U></P>
  <P><S>此处为使用<S>标记设置的删除线文本</S></P>
  <P><STRIKE>此处为使用<STRIKE>标记设置的删除线文本</STRIKE></P>
  <P>此处为上标示例：x<SUP>2</SUP> + y<SUP>2</SUP> = R<SUP>2</SUP></P>
  <P>此处为下标示例：H<SUB>2</SUB>SO<SUB>4</SUB></P> 
</BODY>
</HTML>
        显示效果如下图所示：

        物理元素：加粗Bold，表示标记符本身说明了所修饰的效果。
        逻辑元素：strong强调某段文字的消息，表示标记符说明所修饰效果的逻辑含义。

7.特色字符<>引号等

        如果用户需要在网页中显示某些特色字符，例如<（小括号）、>（大括号）、”（引号）等，需要使用特殊字符来表示。
        参考字符以&开始，以；结束。既可以使用数字代码，也可以使用名称代码。
        例如：显示1<2    <p>1&lt;2</p>
        HTML特殊字符编码对照表
        参考：http://www.jb51.net/onlineread/htmlchar.htm



三. HTML设置段落格式


1.分段标记符P

        分段标记符用于将文档划分为段落，标记为<p></p>。
        其中结束标记符通常可以省略。

2.换行标记符BR

        在HTML中换行通常使用<br />或<br>。它是在不产生一个新段落情况下的换行。单标签元素 />关闭。
        注意：在HTML源码中设置多个空格或换行，所有的连续空格或换行被显示为一个空格，浏览器会忽略源码排版信息，移除多余空格与换行；而如果使用<br />标签可以实现多个换行，&nbsp;实现多个空格。

3.标题样式Hn

        在HTML中，用户可以通过Hn标记符来识别文档中的标题和副标题，其中n是数字1到6；H1表示最大的标题，H6为最小标题，使用标题样式时，必须使用结束标记符。
        注意：使用标题时应按照其逻辑含义，而不是按照显示效果。换句话就是你不能为了产生大点的字体就使用它们，设置字体请使用其他标签或CSS替代。


4.添加水平线HR

        它包括以下属性：
        --size：设置水平线的粗细
        --width：设置水平线长度
        --noshade：设置水平线以实线显示
        --color：设置水平线颜色
        例如：

<HTML>
  <HEAD>
    <TITLE>水平线效果</TITLE>
  </HEAD>
  <BODY>
  以下是默认水平线：<HR>
  以下是粗为 5 像素的水平线：<HR size="5">
  以下是长度为100像素的水平线：<HR width="100">
  以下是长度为屏幕宽度 50% 的水平线：<HR width="50%">
  以下是粗为 5 像素的实心水平线：<HR size="5" noshade="noshade">
  以下是红色的水平线：<HR color="red">
  </BODY>
</HTML>
显示效果如下图所示：


5.align属性设置对齐方式

        设置段落对齐方式，其值包括：
        --right：右对齐
        --left：左对齐
        --center：居中对齐
        --justify：两端对齐
        注意：align属性可以用于多种标记符，最典型为P、Hn、HR、table、div等。在讲述table、div布局时会详细介绍。

6.HTML列表

        （1）有序列表（Ordered List）
          在表的各项前显示数字或字母的缩排列表。
          有序列表标记符<ol></ol>，列表项标记符<li></li>（结束可省略</li>）。
          <ol>
                 <li> List item 1
                 <li> List item 2
          </ol>
          注意：type属性设置样式，取值为1、A、a、I、i。

<HTML>
<HEAD>
  <TITLE>有序列表示例</TITLE>
</HEAD>
<BODY>

一般的有序列表
<OL>
 <LI>列表项1 <LI>列表项2 <LI>列表项3
</OL>

用大写罗马字母表示的有序列表：
<OL type="I">
  <LI>列表项1 <LI>列表项2 <LI>列表项3
</OL>

</BODY>
</HTML>
        显示效果如下图所示：


         （2）无序列表（Unordered List）
          它是一种在表各项前显示特殊项目符号的缩排列表。
          无序列表标记符<ul></ul>，列表项标记符<li></li>（结束可省略</li>）。
          <ul>
                 <li> List item 1
                 <li> List item 2
          </ul>
          注意：type属性设置样式，取值为disc、circle、square。在IE中，type属性的取值是区分大小写的，通常使用小写。 

<HTML>
<HEAD><TITLE>无序列表示例</TITLE></HEAD>
<BODY>
默认无序列表：
<UL><LI>列表项1<LI>列表项2<LI>列表项3</UL>
使用方块作为列表项标记的无序列表：
<UL type="square">
<LI>列表项1<LI>列表项2<LI>列表项3
</UL>
</BODY>
</HTML>
        显示效果如下图所示：

        （3）自定义列表
         格式如下：
         <dl>
                 <dt>   </dt>
                 <dd>  </dd>
                 <dt>   </dt>
                 <dd>  </dd>
          </dl>
 



        最后希望文章对你有所帮助，主要讲述了HTML相关的基础知识，如果文章中存在错误或不足之处，还请海涵~文章中的部分例子是我讲课的内容，部分是我读书时的HTML网页内容。
      （By:Eastmount 2016-7-28 清晨5点  ）

文章标签：
Java
Web App开发
前端开发
数据库
关键词：
HTML入门
HTML标记
jsp HTML
HTML jsp
网站开发HTML
小珞珞
目录
相关文章
小徐在进步
|
3月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表（`&lt;ul&gt;`嵌套`&lt;li&gt;`）、有序列表（`&lt;ol&gt;`嵌套`&lt;li&gt;`）和定义列表（`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`）。
小徐在进步
65 19
小徐在进步
|
3月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性，包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签，用于创建超链接，并展示了如何设置目标页面打开方式。最后，文档还涵盖了如何在网页中嵌入音频和视频文件，包括简化写法及常用属性。
小徐在进步
52 13
神明木佑
|
2月前
|
移动开发 前端开发 JavaScript
HTML入门（详细）
HTML入门（详细）
神明木佑
26 0
小徐在进步
|
3月前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境，包括安装VSCode及常用插件；接着全面解析HTML的基本结构与标签语法，涵盖从基本骨架搭建到注释的使用，以及标题、段落、换行和平行线、文本格式化等标签的具体应用，适合初学者循序渐进地掌握HTML。
小徐在进步
42 3
热爱技术的小郑
|
4月前
|
缓存 Java 应用服务中间件
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二）
这篇文章详细介绍了在SpringMVC中创建JSP页面的全过程，包括项目的创建、配置、Tomcat的设置，以及如何实现页面跳转和配置模板解析器，最后还对比了JSP和HTML模板解析的差异。
热爱技术的小郑
167 1
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二）
我不是游客20240119
|
4月前
|
移动开发 开发者 HTML5
构建你的首个个人网站：HTML基础入门
【8月更文挑战第29天】在数字化时代，拥有一个个人网站是展示自我、分享知识和技能的窗口。本文将引导你通过简单的步骤，使用HTML构建你的第一个个人网站。我们将探索HTML的基础标签，页面结构，以及如何将这些元素融合在一起创建一个简单的网页。无论你是编程新手还是希望扩展你的技术工具箱，这篇文章都提供了一条清晰的路径，帮助你开始你的网站开发之旅。
我不是游客20240119
48 1
米果粒
|
4月前
|
移动开发 HTML5
HTML5文档头部相关标记
【8月更文挑战第28天】HTML5文档头部相关标记。
米果粒
40 1
米果粒
|
4月前
HTML标记 和标记的属性
【8月更文挑战第28天】HTML标记 和标记的属性。
米果粒
52 1
源码星辰
|
4月前
|
前端开发 JavaScript Java
springmvc前端jsp与html
在Spring MVC框架中，前端页面既可以使用JSP（JavaServer Pages）也可以使用HTML，具体使用哪一种或哪几种技术，主要取决于项目的需求、团队的熟悉度以及项目的可维护性等因素。
源码星辰
33 2
杨校
|
6月前
杨老师课堂之网页制作HTML的学习入门-含有案例1
杨老师课堂之网页制作HTML的学习入门-含有案例
杨校
44 3

热门文章

最新文章

  • 1
    HTML基础加强
  • 2
    再来 10 个新鲜的 HTML5 教程
  • 3
    MDN Web技术文档 - HTML 元素
  • 4
    Skytte：一款令人印象深刻的 HTML5 射击游戏
  • 5
    jQuery从html代码中获取对应标签的写法
  • 6
    在Pyramid中使用Mako模板以及默认和.html后缀关联
  • 7
    HTML5 &lt;script&gt;元素async,defer异步加载
  • 8
    vs 2010 支持 html5
  • 9
    初识HTML
  • 10
    HTML5 Storage API
  • 1
    排课系统【JSP+Servlet+JavaBean】（Java课设）
    64
  • 2
    仓库管理系统【JSP+Servlet+JavaBean】（Java课设）
    176
  • 3
    校园帮【JSP+Servlet+JavaBean】（Java课设）
    41
  • 4
    新闻发布系统【JSP+Servlet+JavaBean】（Java课设）
    51
  • 5
    学院管理系统【JSP+Servlet+JavaBean】（Java课设）
    62
  • 6
    学校人员管理系统【JSP+Servlet+JavaBean】（Java课设）
    53
  • 7
    学校教师管理系统【JSP+Servlet+JavaBean】（Java课设）
    61
  • 8
    学生信息管理系统【JSP+Servlet+JavaBean】（Java课设）
    80
  • 9
    图书信息管理系统【JSP+Servlet+JavaBean】（Java课设）
    31
  • 10
    个人信息管理系统【JSP+Servlet+JavaBean】（Java课设）
    50

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • JSP快速入门

    • 相关电子书

    更多
  • 《零基础HTML入门教程》
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月