JavaWeb入门：第一章 HTML基础

最新推荐文章于 2024-06-28 09:12:14 发布

落落free

最新推荐文章于 2024-06-28 09:12:14 发布

阅读量387

点赞数 1

分类专栏： JavaWeb Java基础实例文章标签： Java JavaWeb 前端

本文链接：https://blog.csdn.net/qq_39394264/article/details/99069977

版权

Java基础实例同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

JavaWeb

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了HTML的基础知识，包括常用标签如标题、段落、换行、列表、图片和超链接，以及表格的创建和表单的使用。重点讲解了div和span元素在网页布局中的作用，并提到了转义字符的概念。

摘要由CSDN通过智能技术生成

第一章 HTML基础

文章目录

第一章 HTML基础

定义：超文本标记语言(Hyper Text Markup Language)，是一种标签语言，不是编译型语言，也不是编程语言。
超文本: 比普通文本功能更加强大,可以添加各种样式
标记语言: 通过一组标签.来对内容进行描述. <关键字> , 是由浏览器来解释执行

b/s和c/s：b/s维护方便，c/s便携性差，维护成本高

1. HTML常用标签

(1) 标题标签
<h></h>

<body>
	<h1>标题1</h1>
	<h2>标题2</h2>
	<h3>标题3</h3>
	<h4>标题4</h4>
	<h5>标题5</h5>
	<h6>标题6</h6>
</body>

(2) 段落标签
<p></p>

<p>
	快乐池塘栽种了梦想就变成海洋，鼓的眼睛大嘴巴
</p>

在这里插入图片描述
(3) 换行标签
<br />

(4) 列表标签

无序列表

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
</ul>

type: disc、square、circle

有序列表

   <ol>
    	<li>列表项1</li>
    	<li>列表项2</li>
    	<li>列表项3</li>
    </ol>

type: 1,a ,A,I
start : 指定是起始索引

(5) 图片标签
<img></img>

a. src 指定图片路径
b. width 图片宽度
c. height 图片高度
d. alt 图片加载有问题时提示

<img src="./my.png" width="100px" height="100px" alt="图片无法加载" />

在这里插入图片描述

注意：src路径中，./表示当前目录，…/表示上一级目录，当图片路径找不到或者其他原因导致找不到图片，alt设置提示信息

(6) 超链接标签
<a></a>
<a href="http://www.baidu.com">百度啊</a>
在这里插入图片描述

2. 表格

<table>
	<tr>
		<td></td>
	</tr>
</table>

tr : 每行
td : 每个单元格
rowspan : 跨行
colspan : 跨列
border : 每个单元格的外框
需求1：设计一个三行三列，外边框为1px的表格
需求2：

3. 表单

<form action="login.jsp" method="提交方式" name="表单名称" >
	各种表单控件
</form>

提交方式：默认是get，但是post提交方式不但保密性好，还可以提交大量的数据。

表单的构成

表单控件(一般内嵌在form表单、table表格中)

  	`<!—input 标签用来创建表单项，type 值就是收集的数据的类型 -->`

在这里插入图片描述

- 提示信息
- 表单域

综合案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册新用户</title>
	</head>
	<body>
		<form action="#" method="post">
			<table cellpadding="2" align="center">
				<tr>
					<td align="right">用户名：</td>
					<!-- 1.文本输入框控件 -->
					<td>
						<input type="text" name="username" />
					</td>
				</tr>
				<tr>
					<td align="right">密码：</td>
					<!-- 2.密码输入框控件 -->
					<td>
						<input type="password" name="password" />
					</td>
				</tr>
				<tr>
					<td align="right">性别：</td>
					<!-- 3.单选输入框控件 -->
					<td>
						<input type="radio" name="gender" value="male" />男
						<input type="radio" name="gender" value="female" />女
					</td>
				</tr>
				<tr>
					<td align="right">兴趣：</td>
					<!-- 4.复选框控件 -->
					<td>
						<input type="checkbox" name="interest" value="file" />看电影
						<input type="checkbox" name="interest" value="code" />敲代码
						<input type="checkbox" name="interest" value="game" />玩游戏
					</td>
				</tr>
				<tr>
					<td align="right">头像：</td>
					<!-- 5.文件上传控件 -->
					<td>
						<input type="file" name="photo" />
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<!-- 6.提交按钮控件 -->
						<input type="submit" value="注册" />
						<!-- 7.重置按钮控件 -->
						<input type="reset" value="重填" />
					</td>
				</tr>
				<tr>
					<td align="right">地区：</td>
					<!-- 8.下拉框控件 -->
					<td>
						<select name="area">
							<option value="武汉">武汉</option>
							<option value="孝感">孝感</option>
							<option value="孝昌">孝昌</option>
							<option value="云梦">云梦</option>
						</select>
					</td>
				</tr>
				<tr>
					<td align="right">评论：<br /></td>
					<td>
						<!-- 多行文本标记 -->
						<textarea cols="60" rows="5">
							评论时，请文明用语
						</textarea>
						<br />
						<input type="submit" value="提交" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

4. 最重要的元素Div和span

div是Division，分割、区域

(1) div : 块级元素，占用网页的一行
(2) span : 内联元素，占用自身大小，主要用来为选中文字设计样式

5. 转义字符

	空格：&nbsp;
    大于：&gt;
    小于：&lt;

--->有问题请联系QQ1436281495^_^

落落free

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb入门：第一章 HTML基础

第一章 HTML基础文章目录第一章 HTML基础1. HTML常用标签2. 表格3. 表单4. 最重要的元素Div和span5. 转义字符定义：超文本标记语言(Hyper Text Markup Language)，是一种标签语言，不是编译型语言，也不是编程语言。超文本: 比普通文本功能更加强大,可以添加各种样式标记语言: 通过一组标签.来对内容进行描述. <关键字> ,...
复制链接

扫一扫

专栏目录