《网页设计基础——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 安装并启动 ...
随机推荐
- SpringBoot开发 - 什么是热部署和热加载？devtool的原理是什么？
在SpringBoot开发调试中,如果我每行代码的修改都需要重启启动再调试,可能比较费时间:SpringBoot团队针对此问题提供了spring-boot-devtools(简称devtools)插件 ...
- Springboot 启动初始化bin，InitializingBean
import org.springframework.beans.factory.InitializingBean; @Componentpublic class TestInitializingBe ...
- Solution -「2020.12.26」 模拟赛
0x00 前言 一些吐槽. 考得很变态诶,看每道题平均两秒的时限就知道了... T1 降智了想到后缀懒得打. T2 口胡了假优化,结果和暴力分一样?? T3 黑题还绑点?? \(50 + 80 + 0 ...
- jdbc 01: 连接mysql，并实现数据插入
jdbc连接mysql,并实现数据插入 package com.examples.jdbc.o1_连接与插入; import java.sql.*; /* jdbc数据库连接六步 */ public ...
- 【新人福利】使用CSDN 官方插件，赠永久免站内广告特权 ＞＞电脑端访问：https://t.csdnimg.cn/PVqS
[新人福利]使用CSDN 官方插件,赠永久免站内广告特权 >>电脑端访问:CSDN开发助手 [新人福利]使用CSDN 官方插件,赠永久免站内广告特权 >>电脑端访问:https ...
- The Art of Code
目录 1. Polyglot 2. Palin 3. Others 1. Polyglot 2. Palin 3. Others
- qbxt五一数学Day2
目录 1. 判断素数(素性测试) 1. \(O(\sqrt n)\) 试除 2. Miller-Rabin 素性测试 * 欧拉函数 2. 逆元 3. exgcd(扩展欧几里得) 4. 离散对数(BSG ...
- Kafka与Spark案例实践
1.概述 Kafka系统的灵活多变,让它拥有丰富的拓展性,可以与第三方套件很方便的对接.例如,实时计算引擎Spark.接下来通过一个完整案例,运用Kafka和Spark来合理完成. 2.内容 2.1 ...
- 关于微信小程序生产环境体验版获取不到openId的问题(大坑)
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_119 我们知道openid是微信用户验证的重要标识,支付功能严重依赖这个东西,之前我们做微信支付的时候是通过在微信客户端直接调用官 ...
- 【原创】Auto.js get和post 案例
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! Auto.js get和post 案例 ...