《网页设计基础——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 安装并启动 ...
随机推荐
- NC15163 逆序数
NC15163 逆序数 题目 题目描述 在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么它们就称为一个逆序.一个排列中逆序的总数就称为这个排列的逆序数.比如一个序列为 \ ...
- 数据访问 - EntityFramework集成
前言 Masa提供了基于EntityFramework的数据集成,并提供了数据过滤与软删除的功能,下面我们将介绍如何使用它? MasaDbContext入门 安装.Net 6.0 新建ASP.NET ...
- Tapdata 携手精诚瑞宝，共拓 Real Time DaaS 蓝海市场
2021年10月22日,深圳钛铂数据有限公司「Tapdata」 与精诚瑞宝计算机系统有限公司「精诚瑞宝」战略合作签约仪式在深圳举行,Tapdata 创始人唐建法先生与精诚瑞宝副总经理余灿雄先生签署 ...
- 树莓派实战：微信机器人（itchat实现）
背景 楼主有一台树莓派4B开发板(8G内存版),是目前的顶配机型.这一年来的业余时间,除了写Java.架构方面的文章,也陆续折腾了不少树莓派上的好玩小项目,在此新开一个树莓派实战的文章系列,分享给粉丝 ...
- 5-5 SpringGateway 网关
SpringGateway 网关 奈非框架简介 早期(2020年前)奈非提供的微服务组件和框架受到了很多开发者的欢迎 这些框架和Spring Cloud Alibaba的对应关系我们要知道 Nacos ...
- 年中盘点 | 2022年，PaaS 再升级
作者丨刘世民(Sammy Liu)全文共7741个字,预计阅读需要15分钟 过去十五年,是云计算从无到有突飞猛进的十五年.PaaS作为云计算的重要组成部分,在伴随着云计算高速发展的同时,在云计算产业链 ...
- Linux 启动流程及相关知识
基础知识 linux系统的组成 内核(kerner) 根文件系统(rootfs) 内核提供操作系统的功能,根文件系统包含常用的一些工具,这些工具.这些工具的运行离不开glibc库文件. 程序:二进制程 ...
- github访问较慢问题初步解决方案
简介 众所周知,github在国内向来都是访问的非常坎坷,不挂代理访问起来非常困难,本文将介绍一种不依赖代理的加快访问的方式,但不一定可行哦,只能说是优化 步骤 1.在搜索框中输入记事本或者notep ...
- Vue 路由的简单使用(命名路由、query路由传参、params路由传参)
1 # Vue 路由 2 # 1.理解:一个路由(toute)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理 3 # 2.前端路由:key是路径,value是组件 ...
- 典型相关分析CCA计算过程
本文介绍了CCA解决的问题,CCA原理的推导过程,以及对计算结果物理意义的解释.并且通过SPSS和R操作演示了一个关于CCA的例子.数据文件下载参考[8],SPSS输出结果文件下载参考[9],R代 ...