HTML的学习

最新推荐文章于 2023-03-29 12:08:39 发布

恸歆

最新推荐文章于 2023-03-29 12:08:39 发布

阅读量545

点赞数

文章标签： html webview p2p

本文链接：https://blog.csdn.net/m0_66163400/article/details/122408149

版权

浏览器展示的图片必须是相对路径，这样可以保证所有人都能看到显示的内容。

运行到内置浏览器后，更改保存就可以实时查看浏览器中的显示效果；其中的“.../”可以返回到上一层。

10.<table>标签（双标签）

表格标签中包含<table>，<tr>，<td>，<th>四种标签：

一般情况下，表格没有边框，可以用<table>中的border属性来设置边框宽度，单位是像素（px），可以不用指明。

相关代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML表格标签</title>
	</head>
	<body>
		<table border="2">
		   <tr>
		     <th>科目</th>
		     <th>姓名</th>
		     <th>成绩</th>
		   </tr>
		   <tr>
		     <td>高数</td>
		     <td>张三</td>
		     <td>80</td>
		   </tr>
		    <tr>
		     <td>数据结构</td>
		     <td>李勇</td>
		     <td>90</td>
		     </tr>
		   <tr>
		      <td>数据库</td>
		      <td>李一</td>
		      <td>70</td>
		    </tr>
		</table>
	</body>
</html>

运行效果如下：

边框合并：我们可以用 CSS 中的 border-collapse 属性来设置表格的边框。border-collapse 是“边框塌陷”的意思，属性值为 collapse 时，可以使表格的双边框变为单边框。

具体代码和运行效果如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML表格标签</title>
	</head>
	<body>
		<table border="2" style="border-collapse: collapse;">
		   <tr>
		     <th>科目</th>
		     <th>姓名</th>
		     <th>成绩</th>
		   </tr>
		   <tr>
		     <td>高数</td>
		     <td>张三</td>
		     <td>80</td>
		   </tr>
		    <tr>
		     <td>数据结构</td>
		     <td>李勇</td>
		     <td>90</td>
		     </tr>
		   <tr>
		      <td>数据库</td>
		      <td>李一</td>
		      <td>70</td>
		    </tr>
		</table>
	</body>
</html>

表格的标题：一个表格只有一个标题，所以<table>标签中只能有一个<caption>标签。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML表格标签</title>
	</head>
	<body>
		<table border="2" style="border-collapse: collapse;">
			<caption>成绩单</caption>
		   <tr>
		     <th>科目</th>
		     <th>姓名</th>
		     <th>成绩</th>
		   </tr>
		   <tr>
		     <td>高数</td>
		     <td>张三</td>
		     <td>80</td>
		   </tr>
		    <tr>
		     <td>数据结构</td>
		     <td>李勇</td>
		     <td>90</td>
		     </tr>
		   <tr>
		      <td>数据库</td>
		      <td>李一</td>
		      <td>70</td>
		    </tr>
		</table>
	</body>
</html>

运行效果如下：

单元格的合并：

rowspan：表示跨行合并。在 HTML 代码中，允许我们使用 rowspan 特性来表明单元格所要跨越的行数。（向下合并）

colspan：表示跨列合并。同样的，在 HTML 中，允许我们使用 colspan 特性来表明单元格所要跨越的列数。（向右合并）

rowspan和colspan都是<td>标签的属性。

具体代码及运行效果如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML表格标签</title>
	</head>
	<body>
		<table border="2" style="border-collapse: collapse;">
			<caption>成绩单</caption>
		   <tr>
		     <th>科目</th>
		     <th>姓名</th>
		     <th>成绩</th>
		   </tr>
		   <tr>
		     <td>高数</td>
		     <td>张三</td>
		     <td>80</td>
		   </tr>
		    <tr>
		     <td rowspan="2">数据结构</td>
		     <td>李勇</td>
		     <td>90</td>
		     </tr>
		   <tr>
		      <td colspan="2">李一</td>
		    </tr>
		</table>
	</body>
</html>

11.列表标签

HTML的列表标签有三种形式：<ul>，<ol>，<dl>。一般不会单独出现。

<ul>+<li>无序列表，<ul> 是 unordered list 的简称，<li> 是 list item 的简称，<li>标签每一项都使用符号●表示，代码及运行效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML &lt;a&gt;标签演示</title>
</head>
<body>
	<p>
		大学学习课程内容
		<ul>
		    <li>HTML教程</li>
		    <li>CSS教程</li>
		    <li>JS教程</li>
		</ul>
	</p>
</body>
</html>

<ol>+<li>有序列表，<ol> 是 order list 的简称，同<ul>+<li>相同。默认使用阿拉伯数字编号。代码及运行结果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML &lt;a&gt;标签演示</title>
</head>
<body>
	<p>
		大学学习课程内容
		<ol>
		    <li>HTML教程</li>
		    <li>CSS教程</li>
		    <li>JS教程</li>
		</ol>
	</p>
</body>
</html>

<dl>+<dt>+<dd>定义列表，<dt> 和 <dd> 是同级标签，都是 <dl> 的子标签。一般情况下，每个 <dt> 搭配一个 <dd>，一个 <dl> 可以包含多对 <dt> 和 <dd>。

具体代码及运行效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML &lt;a&gt;标签演示</title>
</head>
<body>
	<p>
		Java章
		<dl>
		    <dt>Java概述</dt>
			<dd>Java是一种使用广泛的计算机编程语言，它拥有跨平台、面向对象、泛型编程等特性，
			被广泛应用于企业级的web应用开发和移动应用开发中。</dd>
			<dt>Java优点</dt>
			<dd>Java具有简单、面向对象、跨平台、多线程、安全、动态等优点。</dd>
		</dl>
	</p>
</body>
</html>

列表的默认样式

我们可以通过 CSS 样式表的 margin、padding 和 list-style 属性来修改浏览器对列表的默认设置。

12.<form>表单标签

一般用来收集信息。

action和method属性最常用。

method属性中，最常用post属性值，可以加密。

表单控件有：

checkbox为复选框控件，radio为单选按钮控件，emsp表示空格。

具体代码及运行效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML form表单演示</title>
</head>
<body>
    <form action="./userinfo.php" method="POST">
        <label>用户名： </label><input name="username" type="text"><br>
        <label>密&emsp;码： </label><input name="password" type="password"><br>
        <label>性&emsp;别：</label>
        <select name="sex">
            <option value="1">男</option>
            <option value="2">女</option>
        </select>
        <br>
        <label>爱&emsp;好：</label>
        <input type="checkbox" name="hobby" value="1">听音乐
        <input type="checkbox" name="hobby" value="2">看电影
        <input type="checkbox" name="hobby" value="3">打篮球
        <br>
        <label>学&emsp;历：</label>
        <input type="radio" name="education" value="1">小学
        <input type="radio" name="education" value="2">中学
        <input type="radio" name="education" value="3">本科
        <input type="radio" name="education" value="4">研究生
        <br>
        <input type="submit" value="提 交">&emsp;&emsp;
        <input type="reset" value="重 置">
    </form>
</body>
</html>