网页设计基础——HTML常用标签

 

 

 

一、网页框架；

格式：

<html>

	<head>

		<title>网页标题</title>

		<style>

					/* CSS代码 */

   		</style>

	</head>

	<body>

    				<!-- HTML代码 -->

	</body>

</html>

 

 

二、块级标签；

1.标题标签

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3>

<h4>四级标题</h1>

<h5>五级标题</h2>

<h6>六级标题</h3>

 

2.段落标签

<p>段落标签</p>

 

3.分区标签

<div>分区标签</div>

 

4.列表标签

<ul>

	<ol>

		<li>列表标签</li>

        <li>列表标签</li>

        <li>列表标签</li>

	</ol>

</ul>

 

5.水平线标签

<hr>

 

 

三、行级标签；

1.文本格式化标签

<b>加粗</b>

<i>斜体</i>

<s>删除线</s>

<u>下划线</u>

 

2.超链接标签

<a href="https://www.baidu.com">外部链接</a>

<a href="xxx.html">内部链接</a>

<a href="目标文件名.html">链接到同一级目录中的网页文件</a>

<a href="子目录名/目标文件名.html">链接到下一级目录中的网页文件</a>

<a href="../目标文件名.html">链接到上一级目录中的网页文件</a>

<a href="https://www.baidu.com/" target="_blank"></a>				<!-- 在新窗口打开链接 -->

<a href="#"></a>													<!-- 空链接 -->

 

3.图片标签

<img src="图片名称.jpg" alt="图片未显示时加载的文本" title="鼠标移动到图片上后显示的文本">

 

4.突出显示文本标签

<p>正常CSS样式<span>特殊CSS样式</span>正常CSS样式</p>

 

5.换行标签

<br>

 

6.空格标签

<p>此处空了&ensp;半格</p>

<p>此处空了&emsp;一格</p>

 

 

四、表格；

规则：

  1. table：表示整个表格。
  2. caption：定义表格的标题
  3. tr：表示表格的一行。
  4. td：表示行中的一个列,需要嵌套在 <tr> 标签内。
  5. th：表示表头单元格. 会居中加粗。

 

格式：

<table border="x">					<!-- 边框宽度为x -->

    <caption>标题</caption>

    <tr>

    <th></th>

    <td></td>

    <td></td>

    </tr>

</table>

例如：

<html>

	<head>

		<title>表格</title>

	</head>

	<body>

		<table border="3">					<!-- 边框宽度为3 -->

    		<caption>课程表</caption>

    		<tr>

    			<th></th>

    			<th>Monday</th>

    			<th>Tuesday</th>

				<th>Wednesday</th>

				<th>Thursday</th>

				<th>Friday</th>

    		</tr>

			<tr>

				<th>第一节</th>

				<td>语文</td>

				<td>数学</td>

				<td>英语</td>

				<td>物理</td>

				<td>化学</td>

			</tr>

			<tr>

				<th>第二节</th>

				<td>生物</td>

				<td>语文</td>

				<td>数学</td>

				<td>英语</td>

				<td>物理</td>

			</tr>

		</table>

	</body>

</html>

网页效果：

 

 

五、表单；

规则：

  1. <form>：定义供用户输入的表单标签。
  2. <input>：输入标签。
  3. type：定义输入类型，如文本域text、密码字段password、提交按钮submit。
  4. name：定义表单的名称，用于在表单提交之后引用表单数据，或者在 JavaScript 中引用元素。
  5. placeholder：定义输入框中的提示信息。

 

例一：文本域（Text Fields）

<html>

	<head>

		<title>文本域</title>

	</head>

	<body>

		<form>

    		姓名：<input type="text" name="Name"><br>

    		学号：<input type="text" name="Student ID">

		</form>

	</body>

</html>

网页效果：

 

例二：密码字段（Password）

<html>

	<head>

		<title>密码字段</title>

	</head>

	<body>

		<form>

    		账号：<input type="text" name="Accound"><br>

    		密码：<input type="password" name="Password">		<!-- 默认隐藏输入的内容 -->

		</form>

	</body>

</html>

网页效果：

 

例三：单选按钮（Radio Buttons）

<html>

	<head>

		<title>表单</title>

	</head>

	<body>

		<form>

    		<input type="radio" name="Sex" value="man">男<br>	<!-- 选择此项后提交的值即为value的值 -->

    		<input type="radio" name="Sex" value="woman">女

		</form>

	</body>

</html>

网页效果：

 

例四：复选框（Checkboxes）

<html>

	<head>

		<title>表单</title>

	</head>

	<body>

		<form>

    		<input type="checkbox" name="Career" value="programmer">我是程序员<br>

    		<input type="checkbox" name="Career" value="Superheroes">我是超级英雄

		</form>

	</body>

</html>

网页效果：

 

例五：提交按钮(Submit)

<html>

	<head>

		<title>表单</title>

	</head>

	<body>

		<form>

			<input type="text" name="Name" placeholder="姓名"><br>				<!-- 与例一的区别就是通过 placeholder 设置了提示信息 -->

    		<input type="text" name="Student ID" placeholder="学号"><br>

    		<input type="submit" value="提交">

		</form>

	</body>

</html>

网页效果：

《网页设计基础——HTML常用标签》的更多相关文章

  1. 简单物联网：外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. 浪姐打分看不够？用几行Python代码模拟评委打分

    大家好鸭~我是小熊猫比赛大家都看过吧,每次是不是都对比赛成绩充满期待.特别是浪姐的打分看的简直欲罢不能- 今天就用Python来模拟评委打分,这个案例很短也很简单,很适合新手跟小白练习. 在某次十佳歌 ...

  2. NC16564 [NOIP2012]借教室

    NC16564 [NOIP2012]借教室 题目 题目描述 ​ 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要向学校申请借教室.教室的大小功能不同,借教室人的身份不同,借 ...

  3. Vue模板解析

    mustcache 什么是模板引擎 模板引擎是将数据变为视图的最优雅的解决方案 数据 [ {"name":"小明","age":12,&qu ...

  4. 聊聊 C++ 中几类特殊成员函数

    一:背景 在 C# 中要说类默认给我们定义的特殊成员函数,莫过于 构造函数,但在 C++ 中这样的特殊函数高达 6 种,有必要整合一下聊一聊. 二:特殊成员函数 1. 默认构造函数 和 C# 一样,很 ...

  5. 如何编写测试团队通用的Jmeter脚本

    平时学习.工作过程中,编写的一些jmeter脚本,相信大多数都遇到过这个问题.那就是:如果换一台电脑运行,文件路径不一样,会导致运行失败. 前不久,自己就真真切切遇到过一回,A同学写了个脚本用于压测, ...

  6. 利用噪声构建美妙的 CSS 图形

    在平时,我非常喜欢利用 CSS 去构建一些有意思的图形. 我们首先来看一个简单的例子.首先,假设我们实现一个 10x10 的格子: 此时,我们可以利用一些随机效果,优化这个图案.譬如,我们给它随机添加 ...

  7. 一张图进阶 RocketMQ - 消息存储

    前言 三此君看了好几本书,看了很多遍源码整理的 一张图进阶 RocketMQ 图片,关于 RocketMQ 你只需要记住这张图!觉得不错的话,记得点赞关注哦. [重要]视频在 B 站同步更新,欢迎围观 ...

  8. gitlab+jenkins自动构建jar包并发布

    一.背景介绍: 公司软件都是java开发的,一般都会将java代码打包成jar包发布:为了减轻运维部署的工作量,合理偷懒,就需要自动化流程一条龙服务:开发将代码提交到gitlab--->jenk ...

  9. python socket理解

    socket 所谓套接字(Socket),就是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象.一个套接字就是网络上进程通信的一端,提供了应用层进程利用网络协议交换数据的机制.从所处的地位来讲 ...

  10. 高通cDSP简单编程例子（实现查询高通cDSP使用率、签名），RK3588 npu使用率查询

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...