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

 

 

 

一、网页框架；

格式：

  1. <html>
  2. 	<head>
  3. 		<title>网页标题</title>
  4. 		<style>
  5. 					/* CSS代码 */
  6.    		</style>
  7. 	</head>
  8. 	<body>
  9.     				<!-- HTML代码 -->
  10. 	</body>
  11. </html>

 

 

二、块级标签；

1.标题标签

  1. <h1>一级标题</h1>
  2. <h2>二级标题</h2>
  3. <h3>三级标题</h3>
  4. <h4>四级标题</h1>
  5. <h5>五级标题</h2>
  6. <h6>六级标题</h3>

 

2.段落标签

  1. <p>段落标签</p>

 

3.分区标签

  1. <div>分区标签</div>

 

4.列表标签

  1. <ul>
  2. 	<ol>
  3. 		<li>列表标签</li>
  4.         <li>列表标签</li>
  5.         <li>列表标签</li>
  6. 	</ol>
  7. </ul>

 

5.水平线标签

  1. <hr>

 

 

三、行级标签；

1.文本格式化标签

  1. <b>加粗</b>
  2. <i>斜体</i>
  3. <s>删除线</s>
  4. <u>下划线</u>

 

2.超链接标签

  1. <a href="https://www.baidu.com">外部链接</a>
  2. <a href="xxx.html">内部链接</a>
  3. <a href="目标文件名.html">链接到同一级目录中的网页文件</a>
  4. <a href="子目录名/目标文件名.html">链接到下一级目录中的网页文件</a>
  5. <a href="../目标文件名.html">链接到上一级目录中的网页文件</a>
  6. <a href="https://www.baidu.com/" target="_blank"></a>				<!-- 在新窗口打开链接 -->
  7. <a href="#"></a>													<!-- 空链接 -->

 

3.图片标签

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

 

4.突出显示文本标签

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

 

5.换行标签

  1. <br>

 

6.空格标签

  1. <p>此处空了&ensp;半格</p>
  2. <p>此处空了&emsp;一格</p>

 

 

四、表格；

规则：

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

 

格式：

  1. <table border="x">					<!-- 边框宽度为x -->
  2.     <caption>标题</caption>
  3.     <tr>
  4.     <th></th>
  5.     <td></td>
  6.     <td></td>
  7.     </tr>
  8. </table>

例如：

  1. <html>
  2. 	<head>
  3. 		<title>表格</title>
  4. 	</head>
  5. 	<body>
  6. 		<table border="3">					<!-- 边框宽度为3 -->
  7.     		<caption>课程表</caption>
  8.     		<tr>
  9.     			<th></th>
  10.     			<th>Monday</th>
  11.     			<th>Tuesday</th>
  12. 				<th>Wednesday</th>
  13. 				<th>Thursday</th>
  14. 				<th>Friday</th>
  15.     		</tr>
  16. 			<tr>
  17. 				<th>第一节</th>
  18. 				<td>语文</td>
  19. 				<td>数学</td>
  20. 				<td>英语</td>
  21. 				<td>物理</td>
  22. 				<td>化学</td>
  23. 			</tr>
  24. 			<tr>
  25. 				<th>第二节</th>
  26. 				<td>生物</td>
  27. 				<td>语文</td>
  28. 				<td>数学</td>
  29. 				<td>英语</td>
  30. 				<td>物理</td>
  31. 			</tr>
  32. 		</table>
  33. 	</body>
  34. </html>

网页效果：

 

 

五、表单；

规则：

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

 

例一：文本域（Text Fields）

  1. <html>
  2. 	<head>
  3. 		<title>文本域</title>
  4. 	</head>
  5. 	<body>
  6. 		<form>
  7.     		姓名：<input type="text" name="Name"><br>
  8.     		学号：<input type="text" name="Student ID">
  9. 		</form>
  10. 	</body>
  11. </html>

网页效果：

 

例二：密码字段（Password）

  1. <html>
  2. 	<head>
  3. 		<title>密码字段</title>
  4. 	</head>
  5. 	<body>
  6. 		<form>
  7.     		账号：<input type="text" name="Accound"><br>
  8.     		密码：<input type="password" name="Password">		<!-- 默认隐藏输入的内容 -->
  9. 		</form>
  10. 	</body>
  11. </html>

网页效果：

 

例三：单选按钮（Radio Buttons）

  1. <html>
  2. 	<head>
  3. 		<title>表单</title>
  4. 	</head>
  5. 	<body>
  6. 		<form>
  7.     		<input type="radio" name="Sex" value="man">男<br>	<!-- 选择此项后提交的值即为value的值 -->
  8.     		<input type="radio" name="Sex" value="woman">女
  9. 		</form>
  10. 	</body>
  11. </html>

网页效果：

 

例四：复选框（Checkboxes）

  1. <html>
  2. 	<head>
  3. 		<title>表单</title>
  4. 	</head>
  5. 	<body>
  6. 		<form>
  7.     		<input type="checkbox" name="Career" value="programmer">我是程序员<br>
  8.     		<input type="checkbox" name="Career" value="Superheroes">我是超级英雄
  9. 		</form>
  10. 	</body>
  11. </html>

网页效果：

 

例五：提交按钮(Submit)

  1. <html>
  2. 	<head>
  3. 		<title>表单</title>
  4. 	</head>
  5. 	<body>
  6. 		<form>
  7. 			<input type="text" name="Name" placeholder="姓名"><br>				<!-- 与例一的区别就是通过 placeholder 设置了提示信息 -->
  8.     		<input type="text" name="Student ID" placeholder="学号"><br>
  9.     		<input type="submit" value="提交">
  10. 		</form>
  11. 	</body>
  12. </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. ssh-免密钥登陆

    实现openssh免密钥登陆(公私钥验证) 在主机A上,通过root用户,使用ssh-keygen生成的两个密钥:id_rsa和id_rsa.pub 私钥(id_rsa)保存在本地主机,公钥(id_r ...

  2. 20行python代码，轻松获取各路小说，非常简单

    哔哔两句 作为现代青年,我相信应该没几个没看过小说的吧,嘿嘿~ 一般来说咱们书荒的时候怎么办?自然是去起某点排行榜先找到小说名字,然后再找度娘一搜,哎 ,笔趣阁就出来答案了,美滋滋~但是那多麻烦,咱们 ...

  3. Java 向数组中添加元素

    一般数组是不能添加元素的,因为他们在初始化时就已定好长度了,不能改变长度. 向数组中添加元素思路 第一步:把数组转化为集合 list = Arrays.asList(array); 第二步:向集合中添 ...

  4. Golang并发编程——goroutine、channel、sync

    并发与并行 并发和并行是有区别的,并发不等于并行. 并发 两个或多个事件在同一时间不同时间间隔发生.对应在Go中,就是指多个 goroutine 在单个CPU上的交替运行. 并行 两个或者多个事件在同 ...

  5. halcon变量窗口的图像变量不显示，重启软件和电脑都没用

    有幸遇到halcon变量窗口的图像变量不显示,重启软件和电脑都没用这个沙雕问题,也是找了蛮久才发现解决办法特意记录一下. 这是正常情况下的窗口(左边)和图像变量不显示的窗口(右边): 解决方法: 鼠标 ...

  6. Linux查看内网服务器的出口IP

    查看内网服务器的出口IPcurl ifconfig.me [root@vpnserver ~]# curl ifconfig.me111.10.100.100 [root@vpnserver ~]#

  7. AMS1117降压电路

    AMS1117芯片为正向低压差稳压器,内部集成过热保护和限流电路,其固定输出版本电压可为1.5V.1.8V.2.5V.2.85V.3.0V.3.3V.5.0V,设计采用3.3V输出即ASM1117-3 ...

  8. JUC源码学习笔记1——AQS和ReentrantLock

    笔记主要参考<Java并发编程的艺术>并且基于JDK1.8的源码进行的刨析,此篇只分析独占模式,后续在ReentrantReadWriteLock和 CountDownLatch中 会重点 ...

  9. 【Unity学习笔记】掌握MoneBehavior中的重要属性、方法

    一.重要属性 1-1.获取自己依附的GameObject using System.Collections; using System.Collections.Generic; using Unity ...

  10. 以十字链表为存储结构实现矩阵相加（严5.27）--------西工大noj

    #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> typedef int ElemT ...