2.html基础:文件结构,常用标签,表格表单制作

涂apple

于 2021-08-06 16:53:37 发布

阅读量242

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/tqptr_opqww/article/details/119419102

版权

1.HTML简介

全称：Hyper Text Markup Language
寓意：超文本标记语言
(超文本：超于普通文本的文本，即页面内包含所有可以展示信息的内容)

2.用Sublime开发第一个HTML页面

2.1 HTML文件结构

在这里插入图片描述
解释：从html开始到/html结束，这表示这两个之间夹杂着是超文本；head到/head表示这之间的是一个头部说明；body到/body表示这里面是正文，即我们上网看到的部分。
接下来我们仿照以上结构依葫芦画瓢写一个html文件，并用浏览器打开：

<html>
  <head>
  	<title>first.html</title>
  </head>
  <body>
  	这是第一个页面。hello world！
  </body>
</html>

打开后结果如下图所示：
在这里插入图片描述

2.2 HTML常用标签

1.字体标签：

<font>......</font>

作用：规定文本的字体、字体尺寸、字体颜色
示例：

<font size="3" color="red">我是红色</font>

<font size="7" face="隶书" color="red">
这是第一个页面。hello world！
</font>

2.段落标签

<p>......</p>

作用：定义一个段落
示例：

<html>
  <head>
  	<title>first.html</title>
  </head>
  <body>
  	<p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
  	<p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
  </body>
</html>

3.注释标签

<!-- ...... -->

作用：编写程序时，给代码的解释或提示能提高程序代码的可读性以便于以后的参考、修改
示例：

<html>
  <head>
  	<title>first.html</title>
  </head>
  <body>
  <!--这是一个注释，只有自己能看到-->
  	<font color="red">慕课网</font>是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术<br>
  	<font color="red">慕课网</font>是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术
  </body>
</html>

4.常用的转义字符

&nbsp;		不断行的空格
&ensp;		半方大的空格
&emsp;		全方大的空格
&lt;		< 小于
&gt;		> 大于
&amp;		&符号
&quot;		双引号“
&copy;		版权符号©
&reg;		已注册商标®

5.标题标签

<h?>......</h?>

作用：定义标题头的六个不同文字大小，依次显示重要性的递减，也就是权重依次降低。
示例：

<html>
  <head>
  	<title>first.html</title>
  </head>
  <body>
  <h1>标题1</h1>
  <h2>标题2</h2>
  <h3>标题3</h3>
  <h4>标题4</h4>
  <h5>标题5</h5>
  <h6>标题6</h6>
  </body>
</html>

tips：尽量靠近在html中的body标签，越近越好，以便让搜索引擎最快的领略主题

6.img标签

<img src= "***" />

作用：在浏览器显示图片
示例：

<html>
  <head>
  	<title>first.html</title>
  </head>
  <body>
  	logo:<img src="image/headLogo/1.gif" alt="not find" width="100px" height="100px">
  </body>
</html>

7.超级链接标签

<a>......</a>

作用：使用超级链接与网络上的另一个文档相连
在这里插入图片描述示例：

<html>
  <head>
  	<title>first.html</title>
  </head>
  <body>
  	<a href="test1.html" target="_blank">打开新页面</a><br>
  	<a href="http://www.imooc.com" target="_blank">慕课网</a><br>
    <a href="image/logo.png" target="_blank">打开一个图片</a><br>
    <a href="http://www.imooc.com" target="_blank"><img src="image/logo.png"></a>
  </body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<h1>我的新页面</h1>
	<a href="first.html">单击此处返回链接</a>
</body>
</html>

锚点介绍：

<a name="ziti">......</a>

作用：同一个文档中创建指向该锚（位置）的链接
锚点与超链接标签的区别：超链接标签打开的是一个新的文件，而锚点打开的是位置，是当前或者某一个文档中的某一个位置，这里就要求文档足够的长，右侧进度条要大于浏览器宽度，这样使用锚点才会有效果。
示例：

<html>
  <head>
    <title>first.html</title>
  </head>
  <body>
    <p><a href="#num-1">锚点1</a></p>
	<p><a href="#num-2">锚点2</a></p>
	<p><a href="#num-3">锚点3</a></p>
	<p><a href="#num-4">锚点4</a></p>
	<p><a href="#num-5">锚点5</a></p>

	<a name="num-1">
    <p>num-1慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <a name="num-2">
    <p>num-2慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <a name="num-3">
    <p>num-3慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <a name="num-4">
    <p>num-4慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <a name="num-5">
    <p>num-5慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
  </body>
</html>

2.3 表格1：制作一个简单的表格

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>练习</title>
</head>
<body>
	<table border="1px" width="600px">
		<caption>用户信息表</caption>
		<tr>
			<th>姓名</th>
			<th>密码</th>
			<th>邮箱</th>
		</tr>
		<tr>
			<td>张三</td>
			<td>111</td>
			<td>111</td>
		</tr>
		<tr>
			<td>李四</td>
			<td>222</td>
			<td>222</td>
		</tr>
	</table>
</body>
</html></p>

其中：table作用是制作一个表；caption的作用是给表起一个标题；tr的作用是制作一行；th的作用是产生单元格制作表头，有加粗居中的效果；td的作用也是产生单元格，只不过没有加粗居中效果；boader是给表添加边框，width是指定边框的宽度。

2.4 表格2：表格里面的合并（行合并与列合并）

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>练习</title>
</head>
<body>
	<table border="1px" width="600px">
		<caption>商品信息表</caption>
		<tr>
			<th>商品类别</th>
			<th>商品名称</th>
			<th>单位</th>
			<th>数量</th>
		</tr>
		<tr>
			<td rowspan="2">家电类</td>
			<td>冰箱</td>
			<td>台</td>
			<td>520</td>
		</tr>
		<tr>
			<td>洗衣机</td>
			<td>台</td>
			<td>13</td>
		</tr>
		<tr>
            <td>辅料</td>
			<td>插线板</td>
			<td>个</td>
			<td>14</td>
		</tr>
		<tr>
            <td colspan="4">备注</td>
		</tr>
	</table>
</body>
</html></p>

要合并行，就要找到最上面的要合并的那一行，然后在tr标签输入rowspan，并把后面上下要合并的行对应的代码删除；要合并列就要找到最左边的那一列，在tr标签输入colspan，并将其余要合并的列的对应的代码删除。

2.5 表格3：表格属性

在这里插入图片描述

2.6 表单

作用：用于收集用户信息，进行人机交互操作
示例：
在这里插入图片描述
在实现上述示例之前，学习一下几个常用的属性：

界面显示代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>表单</title>
</head>
<body>
	<form>
		<label>请输入姓名:</label>
			<input type="text" name="username" id="username"><br>
		<label>请输入密码:</label>
			<input type="password" name="password" id="password"><br>
		<label>再次输入密码:</label>
			<input type="password" name="password1" id="password1"><br>
		<label>性别:</label>
			<input type="radio" name="xb" id="" value="男">男
			<input type="radio" name="xb" id="" value="女">女<br>
		<label>兴趣爱好:</label>
			<input type="checkbox" name="" id="" value="看书">看书
			<input type="checkbox" name="" id="" value="旅游">旅游
			<input type="checkbox" name="" id="" value="思考">思考
			<input type="checkbox" name="" id="" value="爬山">爬山<br>
		<label>生日:</label>
			<select>
				<option value="1995">1995</option>
				<option value="1996" selected="selected">1996</option>
				<option value="1997">1997</option>
				<option value="1998">1998</option>
				<option value="1999">1999</option>
				<option value="2000">2000</option>
			</select>年
			<select>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>
			</select>月
			<select>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>
				<option value="13">13</option>
				<option value="14">14</option>
				<option value="15">15</option>
				<option value="16">16</option>
				<option value="17">17</option>
				<option value="18">18</option>
				<option value="19">19</option>
				<option value="20">20</option>
				<option value="21">21</option>
				<option value="22">22</option>
				<option value="23">23</option>
				<option value="24">24</option>
				<option value="25">25</option>
				<option value="26">26</option>
				<option value="27">27</option>
				<option value="28">28</option>
				<option value="29">29</option>
				<option value="30">30</option>
				<option value="31">31</option>
			</select>日<br>
			头像:<img src="image/headLogo/13.gif">
			<select>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
			</select><br>
			<input type="button" value="普通按钮">
			<input type="submit" value="提交按钮">
	</form>
</body>
</html>

涂apple

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
2.html基础:文件结构,常用标签,表格表单制作

这里写目录标题1.HTML简介2.用Sublime开发第一个HTML页面2.1 HTML文件结构2.2 HTML常用标签1.HTML简介全称：Hyper Text Markup Language寓意：超文本标记语言(超文本：超于普通文本的文本，即页面内包含所有可以展示信息的内容)2.用Sublime开发第一个HTML页面2.1 HTML文件结构解释：从html开始到/html结束，这表示这两个之间夹杂着是超文本；head到/head表示这之间的是一个头部说明；body到/body表示这里面是
复制链接

扫一扫