网页设计基础——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. [零基础学IoT Pwn] 环境搭建

    [零基础学IoT Pwn] 环境搭建 0x00 前言 这里指的零基础其实是我们在实战中遇到一些基础问题,再相应的去补充学习理论知识,这样起码不会枯燥. 本系列主要是利用网上已知的IoT设备(路由器)漏 ...

  2. Visio Professional之活动图

    1 什么叫活动图? 活动图在本质上是一种流程图. 活动图(Activity diagram)是UML用于对系统的动态行为建模的一种常用工具,它描述活动的顺序,表示一个活动到另一个活动的控制流. 2.活 ...

  3. 【转载】vscode配置C/C++环境

    VScode中配置 C/C++ 环境 Tip:请在电脑端查看 @零流@火星动力猿 2022.4.12 1. 下载编辑器VScode 官网:https://code.visualstudio.com/( ...

  4. jdk8 hashmap 链表resize 源码分析

    重点看这部分代码 for (int j = 0; j < oldCap; ++j) { Node<K,V> e; if ((e = oldTab[j]) != null) { old ...

  5. DIY蓝牙hub F1方向盘

    介于已经入手了自己的第一套OWS FFB直驱力反馈方向盘,因此决定要自己做一款F1方向盘盘面,来提升一下F1 2020游戏的游戏体验感.整体的技术路线如下: [技术路线] 主控:esp32 软件环境: ...

  6. echart图表中y轴小数位数过长展示效果不佳

    业务中后端返回的精密数据,小数过长,导致所有数据差距不大,在图表中显示重合为一条直线 解决方法设置echart的min属性 min: "dataMin", 但是设置了以后又出现了问 ...

  7. 字符串运算符&&三元运算符

    public class Demo01 { public static void main(String[] args) { //字符串连接符 + String int a=20; int b=10; ...

  8. 4-6 Mabatis 框架

    Mabatis 框架 Ⅰ.关于Mabatis 对数据库中的数据进行访问的框架 数据库执行过程: 连接数据库-->准备好SQL-->发送SQL语句-->执行语句-->获取结果-- ...

  9. Solution -「CF113D」Museum

    Upd 2021.10.21 更改了状态定义. 记 \(S(u)\) 表示 \(u\) 结点的相邻结点的集合. 又记 \(p(u)\) 表示走到了 \(u\) 且下一步继续留在 \(u\) 结点的概率 ...

  10. 关于mybatis-plus出现Not Found TableInfoCache. 的解决方法

    查看自己的pom里面是不是导入了多个mybatis相关,若是的话就全部删去,然后添加如下代码段即可 <dependency> <groupId>com.baomidou< ...