网页设计基础——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. Transferable Joint Attribute-Identity Deep Learning for Unsupervised Person Re-Identification理解

    简介:这篇文章属于跨域无监督行人再识别,不同于大部分文章它使用了属性标注.旨在于能够学习到有属性语义与有区分力的身份特征的表达空间(TJ-AIDL),并能够转移到一个没有看到过的域. 贡献: 提出了一 ...

  2. 【cartographer_ros】六： 发布和订阅路标landmark信息

    上一节介绍了陀螺仪Imu传感数据的订阅和发布. 本节会介绍路标Landmark数据的发布和订阅.Landmark在cartographer中作为定位的修正补充,避免定位丢失. 这里着重解释一下Land ...

  3. 【Python爬虫技巧】快速格式化请求头Request Headers

    你好,我是 @马哥python说 . 我们在写爬虫时,经常遇到这种问题,从目标网站把请求头复制下来,粘贴到爬虫代码里,需要一点一点修改格式,因为复制的是字符串string格式,请求头需要用字典dict ...

  4. 记一次react-hooks项目获取图表图片集合并生成pdf的需求

    需求: 获取子组件中所有图片的dom元素并生成图片,再把生成的图片转化为pdf下载 难点 众所周知,react是单向数据流,倡导f(data)⇒ UI的哲学, 并不建议过多直接操作dom,但是生成图片 ...

  5. 05 MySQL_主键约束

    主键约束 主键: 用于表示数据唯一性的字段称为主键: 约束:就是对表字段添加限制条件 主键约束:保证主键字段的值唯一且非空: - 格式 : create table t1(id int primary ...

  6. 工作流引擎在vivo营销自动化中的应用实践 | 引擎篇03

    作者:vivo 互联网服务器团队- Cheng Wangrong 本文是<vivo营销自动化技术解密>的第4篇文章,分析了在营销自动化业务引入工作流技术的背景和工作流引擎的介绍,同时介绍了 ...

  7. Java代码优化的30个小技巧

    前言 我之前写过两篇关于优化相关的问题:<聊聊sql优化的15个小技巧>和<聊聊接口性能优化的11个小技巧>,发表之后,在全网受到广大网友的好评.阅读量和点赞率都很高,说明了这 ...

  8. Linux下IPC之共享内存的使用方法

    基本参考 <Unix环境高级编程>第14.9节共享内存来学习. 参考blog:https://blog.csdn.net/weixin_45794138/article/details/1 ...

  9. 详解 Apache Hudi Schema Evolution(模式演进)

    Schema Evolution(模式演进)允许用户轻松更改 Hudi 表的当前模式,以适应随时间变化的数据. 从 0.11.0 版本开始,支持 Spark SQL(spark3.1.x 和 spar ...

  10. YII模块化处理

    config.php $config = [ 'modules' => [ 'comment' => [ 'class' => 'frontend\modules\comment\C ...