《网页设计基础——HTML常用标签》
网页设计基础——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>此处空了 半格</p>
<p>此处空了 一格</p>
四、表格；
规则：
- table：表示整个表格。
- caption：定义表格的标题
- tr：表示表格的一行。
- td：表示行中的一个列,需要嵌套在
<tr>标签内。 - 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>
网页效果：
五、表单；
规则：
<form>：定义供用户输入的表单标签。<input>：输入标签。type：定义输入类型，如文本域text、密码字段password、提交按钮submit。name：定义表单的名称，用于在表单提交之后引用表单数据，或者在 JavaScript 中引用元素。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常用标签》的更多相关文章
- 简单物联网：外网访问内网路由器下树莓派Flask服务器
最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...
- 利用ssh反向代理以及autossh实现从外网连接内网服务器
前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...
- 外网访问内网Docker容器
外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...
- 外网访问内网SpringBoot
外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...
- 外网访问内网Elasticsearch WEB
外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...
- 怎样从外网访问内网Rails
外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...
- 怎样从外网访问内网Memcached数据库
外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...
- 怎样从外网访问内网CouchDB数据库
外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...
- 怎样从外网访问内网DB2数据库
外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...
- 怎样从外网访问内网OpenLDAP数据库
外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...
随机推荐
- C#生成putty格式的ppk文件（支持passphrase）
背景 2022国家级护网行动即将开启,根据阿里云给出的安全建议,需要将登陆Linux的方式改为密钥对方式.我这里使用的远程工具是自己开发的,能够同时管理Windows和Linux,但是以前不支持密钥对 ...
- NC50999 表达式计算4
NC50999 表达式计算4 题目 题目描述 给出一个表达式,其中运算符仅包含+,-,*,/,^(加 减 乘 整除 乘方)要求求出表达式的最终值 数据可能会出现括号情况,还有可能出现多余括号情况 数据 ...
- 手写一个模拟的ReentrantLock
package cn.daheww.demo.juc.reentrylock; import sun.misc.Unsafe; import java.lang.reflect.Field; impo ...
- Tapdata 肖贝贝：实时数据引擎系列(四)-关于 Oracle 与 Oracle CDC
摘要:想实现 Oracle 的 CDC,排除掉一些通用的比如全量比对, 标记字段获取之外, 真正的增量形式获取变更, 有三种办法: Logminer .XStream .裸日志解析,但不管哪种方法 ...
- 基于.NetCore开发博客项目 StarBlog - (15) 生成随机尺寸图片
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
- 小米社区APP深度体验
小米社区APP深度体验 版本:3.0.210928 BUG 1,在暗黑模式下,会员一栏中的成就等级小字未作深色模式调整,从而造成文字难于识别. 2,在暗黑模式下,会员页中底部的会员产品首页视觉没有完美 ...
- 网络通讯之Socket-Tcp（二）
网络通讯之Socket-Tcp 分成2部分讲解: 网络通讯之Socket-Tcp(一): 1.如何理解Socket 2.Socket通信重要函数 3.Socket Tcp 调用的基本流程图 4.简单 ...
- HashMap设计原理与实现（下篇）200行带你写自己的HashMap！！！
HashMap设计原理与实现(下篇)200行带你写自己的HashMap!!! 我们在上篇文章哈希表的设计原理当中已经大体说明了哈希表的实现原理,在这篇文章当中我们将自己动手实现我们自己的HashMap ...
- 集合-新特性foreach循环遍历集合或项目
1.增强for循环对集合的遍历 点击查看代码 @Test //集合遍历 public void test3(){ Collection coll = new ArrayList(); coll.add ...
- 本机通过IP地址连接Ubuntu18.04+ on Vmware
一.Vmware-顶部菜单栏-编辑-虚拟网络编辑器: 点一下 添加一个NAT模式的网络:要记住名称,比如这里我的是VMnet8 子网ip可以自己写,建议全程就都按我这个写,后续方便校对. 点一下 NA ...