JavaWeb基础学习笔记4——HTML

<html>

	<head>
		<title>title</title>
	</head>
	
	<body>
		<font color='red'>Hello World</font><br/>
		<font color='green'>Hello World</font>
	</body>

</html>

2.3、HTML标签

2.3.1、文件标签

文件标签是构成html最基本的标签。

html：html文档的根标签。定义一个html文档。
head：头标签。用于指定html文档的一些属性；引入外部的资源。
title：标题标签。用于给文档定义一个标题。
body：体标签。定义文档的主体。
<!DOCTYPE html>：

2.3.2、文本标签

文本标签是和文本有关的标签。

注释：
<h1> to <h6>：标题标签。h1-h6字体大小逐渐递减。
<p>：段落标签。
<br>：换行标签。
<hr>：展示一条水平线。属性：color：颜色；width：宽度；size：高度；align：对齐方式，有center居中，left左对齐，right右对齐。
<b>：字体加粗。
<i>：字体斜体。
<font>：字体标签。属性定义：① color：颜色，有red，green，blue，或者rgb(值1,值2,值3)：值的范围0~255，或者#值1值2值3：值的范围00~FF；② width：数值的单位默认是px（像素），数值%表示占比相对于父元素的比例；
<center>：文本居中。

  空格

2.3.3、图片标签

<img>：展示图片

<!--展示一张图片-->
<img src="image/aa.jpg" align="right" alt="古镇" width="500" height="300"/>
<!--相对路径：以.开头的路径。./代表当前目录。../代表上一级目录-->
<img src="./image/ss.jpg" align="left" alt="1" width="500" height="300"/>

2.3.4、列表标签

有序列表：

<ol>：
<li>：

无序列表：

<ul>：
<li>：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>

<!--有序列表-->
早上起床干的事情
<ol type="A" start="5">
  <li>睁眼</li>
  <li>看手机</li>
  <li>穿衣服</li>
  <li>洗漱</li>
</ol>

<!--无序列表-->
早上起床干的事情
<ul type="disc">
  <li>睁眼</li>
  <li>看手机</li>
  <li>穿衣服</li>
  <li>洗漱</li>
</ul>
<!--无序列表-->
早上起床干的事情
<ul type="square">
  <li>睁眼</li>
  <li>看手机</li>
  <li>穿衣服</li>
  <li>洗漱</li>
</ul>
<!--无序列表-->
早上起床干的事情
<ul type="circle">
  <li>睁眼</li>
  <li>看手机</li>
  <li>穿衣服</li>
  <li>洗漱</li>
</ul>

</body>
</html>

2.3.5、链接标签

<a>：定义一个超链接。属性：① href：指定访问资源的URL（同一资源定位符）；② target：指定打开资源的方式：_self表示默认值，在当前页面打开，_blank表示在空白页面打开。

2.3.6、div和span

div ：每一个div占满一整行，块级标签
span：文本信息在一行展示，称为行内标签、内联标签

2.3.7、语义化标签

html5中为了提高程序的可读性，提供了一些标签。

<header>：
<footer>：

2.3.8、表格标签

<table>：定义表格。属性：① width：宽度；② border：边框；③ cellpadding：定义内容和单元格的距离；④ cellspacing：定义单元格之间的距离，如果指定为0，则单元格的线会合为一条；⑤ align：对齐方式。
<tr>：定义行。属性：① bgcolor：背景色；② align：对齐方式。
<td>：定义单元格。属性：① colspan：合并列；② rowspan：合并行。
<th>：定义表头单元格
<caption>：表格标题
<thead>：表示表格的头部分
<tbody>：表示表格的体部分
<tfoot>：表示表格的脚部分

2.3.9、表单标签

表单：采集用户输入的数据，用于和服务器进行交互。

表单标签：

<form>：用于定义表单，可以定义一个范围，范围代表采集用户数据的范围。

<form>的属性：

action：指定提交数据的URL
method：指定提交方式。一共有7种，其中有2种比较常用： ① get：请求参数会在地址栏中显示（会封装到请求行中），请求参数的长度是有限制的，不太安全 ② post：请求参数不会在地址栏中显示，会封装在请求体中，请求参数的长度没有限制，较为安全。

注意：表单项中的数据要想被提交，必须指定其name属性。

表单项标签：

<input>：可以通过type属性值，改变元素展示的样式。可以设置name属性值。可以设置value属性值，代表默认值。可以设置placeholder属性值，指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息。type属性值有：① text ：文本输入框；② password：密码输入框；③ radio：单选框（注意：要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样；一般会给每一个单选框提供value属性，指定其被选中后提交的值；checked属性，可以指定为默认选中）；④ checkbox：复选框（注意：一般会给每一个单选框提供value属性，指定其被选中后提交的值；checked属性，可以指定为默认选中；）；⑤ file：文件选择框；⑥ hidden：隐藏域，用来提交一些信息。；⑦ submit按钮：提交按钮，可以提交表单；⑧ button按钮：就是一个普通按钮；⑨ image按钮：图片形式的提交按钮，src属性可以指定图片的路径。
<select>：下拉列表。子元素<option>，指定列表项。
<textarea>：文本域。属性有：① cols：指定列数，每一行有多少个字符；② rows：默认多少行。

<label>：指定输入项的文字描述信息。注意label的for属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

啊噢1231

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb基础学习笔记4——HTML

1、Web概述1.1、JavaWebJavaWeb是使用Java语言开发基于互联网的项目。1.2、软件架构1.2.1、C/S架构C/S架构（Client / Server，客户端 / 服务器端）：在用户本地有一个客户端程序，在远程有一个服务器端程序。如：QQ、迅雷...优点：用户体验好。缺点：开发，安装，部署，维护麻烦。1.2.2、B/S架构B/S架构（Browser / Server，浏览器 / 服务器端）：只需要一个浏览器，用户通过不同的网址（URL），客户访问
复制链接

扫一扫