HTML基本语法——文字图片超链接表格表单框架

最新推荐文章于 2024-10-13 16:48:19 发布

一JJL

最新推荐文章于 2024-10-13 16:48:19 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： HTML基本语法文字图片超链接表格表单、框架

本文链接：https://blog.youkuaiyun.com/tcbdbd/article/details/96891988

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了HTML的基本语法，包括文字处理、图片插入、超链接创建、表格构建以及表单元素的使用。讲解了标题、段落、列表、字符实体、图片的src属性、页面间和页面内的链接、表格的结构和属性、表单的各种输入类型以及框架的运用。同时，还提到了HTML标签的分类，如块级和行级标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML
超文本标记语言

属性

 <a href="">内容</a>
 <img src=""/>

不区分大小写建议小写

作用：开发静态页面
运行环境: 浏览器
开发环境:记事本 dw hbuilder

注释

 <!-- -->

文字

标题

<h1>我的第一个标题</h1>

段落

 <p>我的第一个段落</p>

列表

有序列表

<ol type="a">
			<li>香蕉</li>
			<li>苹果</li>
		</ol>

有序列表（从c开始）

<ol type="a" start="3">
			<li>香蕉</li>
			<li>苹果</li>
		</ol>

无序列表

<ul type="circle">
			<li>java</li>
			<li>c++</li>
		</ul>

自定义列表

<dl>
			<dt>想要描述的对象，可以是文字或图片</dt>
			<dd>
				描述内容，也可以是超链接
			</dd>
			<dd>
				 描述内容，也可以是超链接
			</dd>
</dl>

列表的嵌套

有序列表的嵌套

<ol>
			<li>香蕉</li>
			<li>苹果</li>
			<ol type="a">
				<li>大苹果</li>
				<li>小苹果</li>
			</ol>
</ol>

#无序列表的嵌套

<ul type="circle">
			<li>java</li>
			<ul>
				<li>javaee</li>
				<li>javase</li>
			</ul>
			<li>c++</li>
</ul>

常用的字符实体

空格：&nbsp;
<:&lt;
>:&gt;
":&quot;
版权：&copy;
':&apos;

图片

<img src="img/w3.jpg" width="800" title="这是一只小猫猫" alt="小猫猫不见了"/>

其中src属性必须要有，后面的属性可以没有

超链接

页面间链接
从一个页面导航到另一个页面

 <a href="image.html">超链接的文本</a>

如果需要返回到原网页，可以在这个网页上再加一个超链接

<a herf="link.html">超链接的文本</a>

页面内链接

1.锚标记 <a name="abc">...</a>
2.锚链接 <a href="#abc">....</a>

<body>
			<dl>
			    <dt>微信电脑版</dt>
			    <dd>
				<a href="#download">下载</a>
			    </dd>
		    </dl>
				<div style="height: 9999px;"></div>
				<ul>
					<li>
						<a name="download">电信高速下载1</a>
					</li>
					<li>电信高速下载2</li>
					<li>电信高速下载3</li>
					<li>电信高速下载4</li>
				</ul>
	</body>

功能性链接

   <a href="mailto:1344346@163.com">新闻投稿</a>

表格

最基本的标签 table tr td th caption

<table border="1" width="400" height="200">
            <caption>姓名信息表</caption>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>19</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>女</td>
				<td>22</td>
			</tr>
		</table>

属性 border rowspan colspan

表格跨行跨列
在这里插入图片描述

<table border="1">
			<tr>
				<td colspan="3">111</td>
			</tr>
			<tr>
				<td rowspan="2">222</td>
				<td>222</td>
				<td rowspan="2">222</td>
			</tr>
			<tr>
				<td>333</td>
			</tr>
		</table>

分组 thead tbody tfoot

<table border="1" width="400" height="200">
			<caption>姓名信息表</caption>
			<thead>
				<tr>
				<th>姓名</th>
				<th>支出</th>
				<th>收入</th>
			</tr>
			</thead>
			<tbody>
				<tr>
				<td>张三</td>
				<td>50000</td>
				<td>35000</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>80000</td>
				<td>60000</td>
			</tr>
			</tbody>
			<tfoot>
				<td>总计</td>
				<td>130000</td>
				<td>950000</td>
			</tfoot>
		</table>

表单

填写数据的一组标签
get标签在地址栏里可以看到，将数据附加在url后面以明文方式提交，并且
地址栏能接收到的数据是有限的，由于是以字符串形式提交的，二进制数据
无法提交
post便签在地址栏里看不到，随着请求报文提交，数据量理论上不受限制
，取决于服务器。

输入型
单行文本框

<form action="http:www.baidu.com" method="get">
			用户名<input type="text" name="username" maxlength="10"/>
			<br />
			密码<input type="password" name="password" />
			<br />
			<input type="submit" value="登录" />
</form>

多行文本框

<textarea rows="6" cols="50">xxxxxxxxxxxxxxxx</textarea>

密码框

<input type="password" name="password" />

点击选择型
单选按钮

性别：<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女

其中name必须一样
多选按钮
选修课程：

<input type="checkbox" name="course"/>java
<input type="checkbox" name="course"/>c++
<input type="checkbox" name="course"/>c#

下拉列表
所在城市：

<select>
				<option value="许昌">许昌</option>
				<option value="郑州">郑州</option>
			    <option value="开封">开封</option>
                <option value="武汉">武汉</option>
</select>

数字上拉下拉选择

<input type="number" min="5" max="20" value="10" step="1"/>

选择日期

<input type="date" name="date"/>

选择颜色

<input type="color" name="color"/>

选择文件

<input type="file" name="xxx"/>

提交按钮

<input type="submit" value="登录" />

<button>提交</button>

重置按钮

<input type="reset" value="重置"/>

触发按钮

<input type="button" value="点歌" onclick="alert('你想干啥？')"/>

图片按钮

<input type="image" src="img/btn_reg.gif"/>

隐藏域

<input type="hidden" value="r31xaqeg"/>

默认选择
checked=“checked”
selected=“selected”
例如：

<input type="radio" name="sex" checked="checked"/>男
<input type="checkbox" name="course" checked="checked"/>java
<option value="郑州" selected="selected">郑州</option>

禁止登陆

<input type="submit" value="登录" disabled="disabled"/>

禁止输入用户名

<input type="text" name="username" maxlength="10" value="张三" readonly="readonly"/>

右对齐

<td align="right">注册邮箱：</td>

框架

1.框架集
主要用于网络布局
实现点击超链接，内容在右面边框打开：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="img/w3.jpg" width="120" align="middle"/>
		<span style="font: bold 80px '微软雅黑';">许昌</span>
	</body>
	
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li><a href="f3.html" target="a">信息工程学院</a></li>
			<li><a href="f4.html" target="a">体育学院</a></li>
		</ul>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<dl>
			<dt>
				信息工程学院
			</dt>
			<dd></dd>
		</dl>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<dl>
			<dt>
				体育学院
			</dt>
			<dd>xxxxxxxxxxxxxxxxxxxxxxx</dd>
		</dl>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<frameset rows="200,*" frameborder="0">
		<frame src="f1.html" scrolling="no"/>
		<frameset cols="200,*" frameborder="0">
			<frame src="f2.html" scrolling="no"/>
			<frame src="f3.html" name="a" scrolling="no"/>
		</frameset>
	</frameset>
</html>

2.内联框架
主要用来做页面复用
例如写一个搜索的页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<body>
		<form action="#" method="post">
		<input type="text" name="text" size="50"/>
		<input type="submit" value="搜索" />
		<!--
		超链接被引用后在新的窗口打开
    	<a href="f5.html" target="_top">信息工程学院</a>
    -->
	</form>
	</body>
</html>

在另一个页面中复用这个页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p>aaaaaaaaaaaaaaaaa</p>
		<iframe src="search.html" width="500" height="60" frameborder="0" scrolling="no"></iframe>
		<p>bbbbbbbbbbbbbbbbb</p>
	</body>
</html>

标签分类

1.块级标签

自带换行，<div></div>,多用于布局
段落<p></p>
标题<h1></h1>
2.行级标签

不带换行<a></a>
<span></span>
用于修饰中间的一小块，如商品降价

价格：<span style="font: bold 18px 微软雅黑; color: red;">￥998</span>&nbsp;&nbsp;1500

<hr />：在页面显示一条水平线

<br />：换行

<label></label>
<label for="username">用户名</label><input type="text" name="username" id="username"/>

<label for="aa">同意</label>
<input type="radio" id="aa"/>

如果for和id值相同，点击文字和文本框有一样的效果