JavaWeb——HTML

2023-08-12 10:30:40

HTML

Web(网页)页面内容的组成：内容（结构html）、表现（css）、行为（javaScrist）

一、基本内容

1.1、书写规范

HTML 的代码注释 <! – 这是注释 -->

<!DOCTYPE html> <!-- 约束，声明 -->
<html lang="en">  <!-- html标签表示html的开始  lang="zh_CN"表示中文  html标签中一般分为两部分，分别是：head和body -->
<head> <!-- 表示头部信息，一般包含三部分内容，title标签，css样式，js代码-->
   <meta charset="UTF-8"> <!-- 表示当前页面使用UTF-8字符集 -->
   <title> 标题 </title> <!-- 表示标题 -->
</head>
<body> <!-- body标签是整个html页面显示的主体内容 -->
   hello
<body>
</html>

1.2、标签的格式

<标签名> 封装的数据 </标签名>

标签名大小写不敏感

1.3、标签的属性：

基本属性：bgcolor="red" 
    bgcolor是背景颜色属性
事件属性：onclick="alert('你好！');"
	onclick表示鼠标单击事件
		alter() 是javaScript语言提供的一个警告框函数
它可以接收任何参数，参数就是警告框的函数信息

eg：

<!DOCTYPE html> 
<html lang="en">  
<head> 
	<meta charset="UTF-8"> 
	<title> 标题 </title> 
</head>
<body bagcolor="green">
	hello
<body>
</html>

<!DOCTYPE html> 
<html lang="en">  
<head> 
	<meta charset="UTF-8"> 
	<title> 标题 </title> 
</head>
<body bagcolor="green">
	hello 
	<button onclick="alter('简子淮好帅哦')">
		按钮
	</button>
</body>

2、标签的分类

2.1、单标签和双标签

单标签格式：<标签名/>
     <br /> 为换行符
     <hr /> 为横线符
双标签格式：<标签名>  ...封装的数据....</标签名>

2.2、常用标签

<font color="" face="" size="" > </ font>     字体标签，修改文本字体颜色大小

2.3、特殊字符

<    ====>>>  &lt;
>    ====>>>  &gt;
空格   ====>>>  &nbsp;

2.4、标题标签

h1 到  h6  h1最大    
        排列属性：align="left" 左对齐  center 居中对齐  right 右对齐

eg:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Structure of a HTML5 Webpage</title>
</head>
<body>
	<!--HEADING (there are total 6 Heading Elements in HTML5)-->
	<h1>Heading One</h1>
	<h2>Heading Two</h2>
	<h3>Heading Three</h3>
	<h4>Heading Four</h4>
	<h5>Heading Five</h5>
	<h6>Heading Six</h6>
	<br>
	<!--PARAGRAPH-->
	<p>Paragraph One</p>
</body>
</html>

2.5、超链接

 <a> </a>

重要属性

  • href属性设置连接的地址
  • target属性用于控制链接网页打开的位置（相对于当前网页）。默认情况下，是刷新当前网页所在的窗口，加载新的页面。

_self：默认状态。在当前页面所在窗口打开链接的网页。
_blank：在当前浏览器中打开一个新窗口加载链接的网页。
_parent：在父窗口打开链接的网页。（有些页面可以通过等方式打开一些子窗口）
_top：清除当前窗口中打开的所有框架（子窗口），并在整个窗口打开链接的网页。
framename：在指定的框架中打开链接的网页。

eg:

  • title属性可以为超链接设置一些介绍信息。当鼠标移到设置了title属性的超链接上时，会显示title属性值的内容。设置了title不仅可以提升用户体验，还可以提升网页的SEO（搜索引擎优化）。

eg:

<a href="https://gitee.com/HeavyLeaf" title="欢迎访问我的码云">我的码云</a>

2.6、列表标签

<ul> </ul>是无序列表
<ol> </ol>是有序列表
    type属性可以修改列表前面的符号
	<li> </li>是列表项

eg:
JavaWeb——HTML

2.7、img标签

<img/> 标签是图片标签，用来显示图片
  • src属性可以设置图片的路径
  • width、height属性设置图片的宽高
  • border属性设置图片边框大小
  • alt属性设置当指定路径找不到图片时，用来代替显示的文本内容

在JavaSE中路径也分为相对路径和绝对路径.
相对路径:从工程名开始算
绝对路径:盘符:/目录/文件名
在web中路径分为相对路径和绝对路径两种
相对路径:
. 表示当前文件所在的目录
… 表示当前文件所在的上一级目录
文件名 表示当前文件所在目录的文件,相当于.文件名 ，./可以省略
绝对路径:
正确格式是:http://ip:port/工程名/资源路径

eg：

<img src="/i/eg_tulip.jpg"
  alt="上海鲜花港 - 郁金香" />

2.8、表格标签

    <table> </table>
            border 属性设置表格边框标签
            width、height    属性设置表格宽高
            align 属性设置表格相对页面的对齐方式
            cellspacing 属性设置单元格间距
    <tr> </tr> 是行标签
    <th> </th>是表头标签
    <td> </td>是单元格标签
                align 属性设置单元格文本对齐方式
    <b>  </b>  是加粗标签

eg:

<html>
   <head>
          <title>www.likunpeng.comm</title>
   </head>
   <body>
		<h1>HTML表格标签</h1>
		<table  border="10"  width="500" height="30%" align="center"
cellspacing="0" cellpadding="30" bordercolor="red"
bgcolor="#1979CA">
		<caption>梁山好汉</caption>
		<tr>
			<th>姓名</th>
			<th>地址</th>
			<th>年龄</th>
		</tr>
		<tr  valign="middle">
		<tdalign="center">宋江</td>
		<td  align="center">山东郓城</td>
		<td  align="center">32</td>
		</tr>
		<tr  align="center" valign="middle">
			<td>晁盖</td>
			<td>石洁村</td>
		<td>35</td>
		</tr>
		<tr  align="center" valign="middle">
			<td>武松</td>
			<td>阳谷县</td>
			<td>26</td>
		</tr>
	</table>
	</body>
</html>

JavaWeb——HTML

2.9、跨行跨列表格

  Colspan：列合并
  Rowspan:行合并

2.10、iframe标签

 <iframe>可以在页面上开辟一个小区域显示一个单独的页面
         iframe和a标签组合使用的步骤：
         1 在iframe标签中使用name属性定义一个名称
         2 在a标签的target属性上设置iframe的name的属性值

eg：

2.11、表单标签

 表单就是html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器
    <form> 表单标签
                    action属性设置提交的服务器地址
                    method属性设置提交的方式GET（默认值）或POST‘

                    表单提交的时候,数据没有发送给服务器的三种情况:
                            -表单项没有name属性值
                            -单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
                            3、表单项不在提交的form标签中

                    GET请求的特点是:
                        1、浏览器地址栏中的地址是:action属性[+?+谤求参数]
                               请求参数的格式是:name=value&name=value
                        2、不安全
                        3、它有数据长度的限制
                    POST谤求的特点是：
                        1、浏览器地址栏中只有action属性值
                        2、相对于GET请求要安全
                        3、理论上没有数据长度的限制|



            input type="text"  是文本输入框            value属性设置默认值
            input type="password"  是密码输入框            value属性设置默认值
            input type="radio"  是单选框        name属性可以对其进行分组  checked="checked"表示默认选中
            input type="checkbox"  是复选框        name属性可以对其进行分组  checked="checked"表示默认选中
            input type="reset"    是重置按钮    value属性修改按钮上的文本
            input type="submit"    是提交按钮    value属性修改按钮上的文本
            input type="button"    是按钮    value属性修改按钮上的文本
            input type="hidden"    是隐藏域    当我们要发送某些信息，而这些信息不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）

            <select> 是下拉列表框
            <option> 是下拉列表框中的选项 selected="selected" 设置默认选中
            <textarea> 表示多行输入框(起始标签和结束标签中的内容是默认值)
                        rows 属性设置可以显示几行的高度
                        cols  属性设置每行可以显示几个字符宽度
eg：

2.12、其他标签

<div> 标签默认独占一行
<span> 标签长度是封装数据的长度
<p>    段落标签默认会在段落的上方或下方各空出一行来（如果已有就不再空）
上一篇：数据库mysql-6-复合查询


下一篇：自用Java基本语法