html

超链接(重点!!!)

在网页中所有点击之后可以跳转的内容都是超链接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4.超链接.html</title>
</head>
<body>
	<!-- a标签是 超链接
	 		href属性设置连接的地址
	 		target属性设置哪个目标进行跳转
	 			_self		表示当前页面(默认值)
	 			_blank		表示打开新页面来进行跳转
	 -->
	<a href="http://localhost:8080">百度</a><br/>
	<a href="http://localhost:8080" target="_self">百度_self</a><br/>
	<a href="http://localhost:8080" target="_blank">百度_blank</a><br/>
</body>
</html>

表单标签(重点!!!)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的显示</title>
</head>


<body>
<!--需求1:创建一个个人信息注册的表单界面。包含用户名,密码,确认密码。性别(单选),兴趣爱好(多选),国籍(下拉列表)。
隐藏域,自我评价(多行文本域)。重置,提交。-->

<!--
    form标签就是表单
        input type=text     是文件输入框  value设置默认显示内容
        input type=password 是密码输入框  value设置默认显示内容
        input type=radio    是单选框    name属性可以对其进行分组  同一组内只能选一个   checked="checked"表示默认选中
        input type=checkbox 是复选框   checked="checked"表示默认选中
        input type=reset    是重置按钮      value属性修改按钮上的文本
        input type=submit   是提交按钮      value属性修改按钮上的文本
        input type=button   是按钮          value属性修改按钮上的文本
        input type=file     是文件上传域
        input type=hidden   是隐藏域    当我们要发送某些信息,而这些信息,不需要用户参与,就可以使用隐藏域(提交的时候同时
发送给服务器)
        select 标签是下拉列表框
        option 标签是下拉列表框中的选项 selected="selected"设置默认选中
        textarea 表示多行文本输入框 (起始标签和结束标签中的内容是默认值)
            rows 属性设置可以显示几行的高度
            cols 属性设置每行可以显示几个字符宽度
-->
<form>
    <h1 align="center">用户注册</h1>

    <table align="center">
        <tr>
            <td> 用户名称:</td>
            <td>
                <input type="text" value="默认值"/>
            </td>
        </tr>
        <tr>
            <td> 用户密码:</td>
            <td><input type="password" value="abc"/></td>
        </tr>
        <tr>
            <td>确认密码:</td>
            <td><input type="password" value="abc"/></td>
        </tr>
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex"/><input type="radio" name="sex" checked="checked"  /></td>
        </tr>
        <tr>
            <td> 兴趣爱好:</td>
            <td>
                <input type="checkbox" checked="checked" />Java
                <input type="checkbox" />JavaScript
                <input type="checkbox" />C++
            </td>
        </tr>
        <tr>
            <td>国籍:</td>
            <td>
                <select>
                    <option>--请选择国籍--</option>
                    <option selected="selected">中国</option>
                    <option>美国</option>
                    <option>日本</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价:</td>
            <td><textarea rows="10" cols="20">我才是默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset" /></td>
            <td align="center"><input type="submit"/></td>
        </tr>
    </table>
</form>
</body>
</html>

在这里插入图片描述

跨行跨列表格(次重点)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>7.表格的跨行跨列</title>
	</head>
	<body>
<!--	需求1:
			新建一个五行,五列的表格,
			第一行,第一列的单元格要跨两列,
			第二行第一列的单元格跨两行,
			第四行第四列的单元格跨两行两列。
			colspan 属性设置跨列
			rowspan 属性设置跨行
			-->
 
		<table width="500" height="500" cellspacing="0" border="1">
			<tr>
				<td colspan="2">1.1</td>
				<td>1.3</td>
				<td>1.4</td>
				<td>1.5</td>
			</tr>
			<tr>
				<td rowspan="2">2.1</td>
				<td>2.2</td>
				<td>2.3</td>
				<td>2.4</td>
				<td>2.5</td>
			</tr>
			<tr>
				<td>3.2</td>
				<td>3.3</td>
				<td>3.4</td>
				<td>3.5</td>
			</tr>
			<tr>
				<td>4.1</td>
				<td>4.2</td>
				<td>4.3</td>
				<td colspan="2" rowspan="2">4.4</td>
			</tr>
			<tr>
				<td>5.1</td>
				<td>5.2</td>
				<td>5.3</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

img标签

可以在html页面上显式图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5.img标签.html</title>
</head>
<body>
    <!--需求1:使用img标签显示一张美女的照片。并修改宽高,和边框属性
        img标签是图片标签,用来显示图片
            src属性可以设置图片的路径
            width属性设置图片的宽度
            height属性设置图片的高度
            border属性设置图片边框大小(一般设为1,默认为0)
            alt属性设置当指定路径找不到图片时,用来代替显示的文本内容
        在JavaSE中路径也分为相对路径和绝对路径.
            相对路径:从工程名开始算
            绝对路径:盘符:/目录/文件名
        在web中路径分为相对路径和绝对路径两种
            相对路径:
                .           表示当前文件所在的目录
                ..          表示当前文件所在的上一级目录
                文件名      表示当前文件所在目录的文件,相当于 ./文件名            ./ 可以省略
            绝对路径:
                正确格式是:  http://ip:port/工程名/资源路径
                错误格式是:  盘符:/目录/文件名
    -->
    <img src="1.jpg" width="200" height="260" border="1" alt="美女找不到"/>
    <img src="../../2.jpg" width="200" height="260" />
    <img src="../imgs/3.jpg" width="200" height="260" />
    <img src="../imgs/4.jpg" width="200" height="260" />
    <img src="../imgs/5.jpg" width="200" height="260" />
    <img src="../imgs/6.jpg" width="200" height="260" />
</body>
</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Lacrimosa&L

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值