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

2023-11-02

网页设计基础——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>此处空了&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>

网页效果:

PPG9U6M$)ZN9FQ1PK9_3833.png

        

五、表单;


规则:

  1. <form>:定义供用户输入的表单标签。
  2. <input>:输入标签。
  3. action属性:规定当提交表单时,向何处发送表单数据——用于动态网页,了解即可。
  4. method属性:规定发送表单数据的方式 【URL 变量(method="get")或者 HTTP post (method="post")】——用于动态网页,了解即可。
  5. type属性:定义输入类型,如文本域text、密码字段password、提交按钮submit
  6. name属性:定义表单的名称,用于在表单提交之后引用表单数据,或者在 JavaScript 中引用元素——用于动态网页,了解即可。
  7. placeholder属性:定义输入框中的提示信息。

        

格式:

<form>
    <input type="~~~" name="~~~" placeholder="~~~">
</form>

例如:

<html>
    <head>
    	<title>表单</title>
    </head>
    <body>
       <form>
            账号:<input type="text" name="user_acount" placeholder="请输入学号"><br>
            密码:<input type="password" name="user_password"><br>	    <!-- 默认隐藏输入的内容 -->
            <input type="submit" value="提交">						<!-- 此处的value用于定义按钮上的文字 -->
        </form>
    </body>
</html>

网页效果:

WQO1F{5%KHWB)0_KTTRUY.png

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

《网页设计基础——HTML常用标签》 的相关文章

  • 图像之间的垂直间距

    我将一张图像剪切为三张相同的图像 现在我将其放入 html 代码中 如下所示 img src images disclosure2 01 jpg alt Disclosure img src images disclosure2 02 gi
  • 从 Angular 6 服务中绑定图像

    我有一个端点 它根据某些参数为我提供图像 这不是一个图像网址 而是一个普通图像 因此 当我到达邮递员中的端点时 作为响应 我收到一张图像 JPG 我是否可以在变量中接收该图像并将其绑定到 HTML 标签中 所有问题都有将图像 url 映射到
  • 将字符串编码为 HTML 字符串 Swift 3

    如何快速编码字符串以删除所有特殊字符并将其替换为其匹配的 html 编号 假设我有以下字符串 var mystring This is my String That s it 然后用它的html编号替换特殊字符 38 39 gt 62 但我
  • 使用 Vim 作为 HTML 编辑器

    您知道 Notepad 如何具有此功能 当您单击标签 例如 时 它也会自动突出显示结束标签 它叫什么 如何调整 Vim 使其也具有此功能 还有其他方法可以将 Vim 变成强大且高效的 HTML 编辑器吗 我在 vim 中完成所有 HTML
  • 表单提交不起作用

    我有一张桌子 可以打印出所有可用的相机 它使用表单来更改这些设置 问题在于该表单仅更新条目中的最后一个摄像机 换句话说 如果我更改表单并为列表中的最后一个摄像机点击 应用 它将起作用 如果我更改此列表中任何其他摄像机的表单 它会将其更改为与
  • 检测 JavaScript 中的焦点丢失

    我希望能够检测 JavaScript 中任意元素何时失去焦点 因此我可以构建一个类似于 jEdit 的内联编辑工具 我不能依赖 jQuery 来实现这个库 所以我需要一个本机方法来完成它 我查看了 onblur 这似乎是正确的事情 但 MD
  • jQuery 面板滑块通过单击按钮打开但不会关闭

    我的页面上有一个按钮 可以使用 jquery 和 Modernizr 框架打开右侧面板 按钮位于屏幕最右侧 单击时 它会向左滑动并打开打开的面板 问题是 再次单击时它不会滑回到原来的位置 HTML div class cd panel fr
  • Django 1.7:如何使用 html/css 文件作为模板发送电子邮件

    从 Django 1 7 开始 可以send email 使用新参数 html message 不幸的是 没有关于如何使用它的全面指南 新手友好 或者至少我找不到它 我需要使发送的电子邮件变得漂亮 因此 我试图弄清楚如何将我的消息包含到 h
  • 当元素具有多个类时如何在 switch 语句中检查 className

    在下面的示例中 我只想单击该选项以在警报中显示 我正在尝试使用 switch 语句来确定单击了哪个类 如果我的 div 不包含多个类 则我的示例将有效 我尝试使用classList contains在我的 switch 语句中无济于事 有没
  • Javascript 替换为正则表达式无法正常工作

    我正在尝试使用正则表达式验证名称 正则表达式阻止用户连续输入 2 个空格或点 这是我的代码 function test input var regex A Za z 0 1 s 0 1 input value input value rep
  • ☺ 不在移动版本中呈现

    我如何获得特殊角色 笑脸在移动浏览器中正确呈现 li a href http goo gl GjxlI title target blank span style font size 20px span a li 它在大多数浏览器上显示为
  • Ie11 不应用媒体查询样式

    IE11 忽略我的媒体查询并始终使用移动 CSS 奇怪的是 如果我改变浏览器宽度 即使只是 1 2 像素 浏览器也会自行渲染并显示媒体查询 我尝试了 css lint 我的 css 中没有错误 我的CSS没有什么特别的 只是简单的 css
  • 跳过解析 CODE 标签内的 BBCode

    我正在使用以下方法解析 BBCoderegex以便将其替换为 HTML 我现在被困住了 因为 code 标签解析 基本上 当你这样做时 code b this is bb b u code in u i code i code 它不应该取代
  • python中的编码检测库[重复]

    这个问题在这里已经有答案了 这在某种程度上与我的问题有关here https stackoverflow com questions 2305997 unicodedecodeerror problem with mechanize 我处理
  • 为什么我必须将所有脚本放入 jquery mobile 中的index.html

    我在我的phonegap jquerymobile 项目中使用 mobile changepage 进行重定向 然而让我困惑的是我需要将所有页面的脚本放在同一个文件index html中 如果不是 则重定向页面无法执行其标头中的函数 例如
  • 关闭 选择文件对话框和 onchange 事件之间存在大量延迟。浏览器有点冻结

    有时我会遇到浏览器本机选择文件对话框的非常奇怪的行为 我有一个
  • #文档是什么意思?

    这是我的 HTML 文件 我正在尝试使用Selenium Webdriver API随着Chrome驱动程序 to send keys to an input归档内 但我无法访问其中的任何内容 document 我不明白为什么 有人可以告诉
  • 一个输入字段,多个名称

    在 HTML 表单中 如何从一个输入字段获取两个姓名 是否可以通过隐藏的输入字段 如何 我试图使隐藏字段值动态等于非隐藏字段值 这样无论用户写什么 它们都相等 但我确信它不起作用 而不是像这样的东西是否会起作用工作 Here http ww
  • 在 wkwebview 中启用摄像头和麦克风访问

    我有一个针对移动设备优化的网络应用程序 它利用getUserMedia访问网络摄像头和麦克风资源 我正在将这个应用程序包装在WKWebView因为我想提供原生应用程序体验 我知道 iOS 不允许通过浏览器访问相机 但是有什么方法可以使用本机
  • 如何实现 chromecast 对 html5 播放器的支持

    我使用js和html5设计了一个具有一些自定义功能的html5播放器 现在我需要在html5播放器上添加chromecast选项 例如https raw githubusercontent com kim company videojs c

随机推荐

  • scrapy的注意点的问题

    1 以豆瓣网为例分享一下scrapy使用中需要注意的地方 2 注意点 response xpath方法的返回结果是一个类似list的类型 其中包含的是selector对象 操作和列表一样 但是有一些额外的方法 extract 返回一个包含有
  • 项目中添加水印

    1 在libs文件夹下新建watermark js文件 watermark js文件下代码 let watermark let setWatermark str gt let id 1 23452384164 123412415 if do
  • Spring Boot 大型线上商城项目实战教程

    小册介绍 小册将从开发基础阶段讲解 之后介绍技术选型 系统设计 实际开发等过程 给你最真实的项目体验 让你少走弯路快速成长 小册将围绕 Spring Boot 技术栈 使用的其它技术框架也会兼顾最新技术动向 对知识进行拓展 由浅入深 步步为
  • spring源码解析之AOP原理

    一 准备工作 在这里我先简单记录下如何实现一个aop AOP 动态代理 指在程序运行期间动态的将某段代码切入到指定方法指定位置进行运行的编程方式 1 导入aop模块 Spring AOP spring aspects 2 定义一个业务逻辑类
  • 机器人视觉抓取论文及代码资源

    Vision based Robotic Grasping Papers and Codes According to the kinds of grasp the methods of vision based robotic grasp
  • 【Python】初识类与对象

    面向对象的编程思想 OOP 面向对象的编程思想与之前面向过程的编程思想不同 面向对象的编程思想着重强调要细分职责和工作 例如有加减乘除四个运算方法 我们需要处理的数据有实数和虚数 我们需要将这两种数据独立进行运算 那么此时我们就将这些四则运
  • 微信小程序服务器响应404,解决小程序wx.request无法触发fail回调。

    今天在写一个需求如下 1 用户发送token到服务器认证 2 服务器返回banner图片数据 3 如果失败 就显示默认占位图 按照我用jq写ajax的理解 那就是error 时 显示占位图 在wx小程序里是fail 方法 我在服务器上关闭了
  • 七、vue项目使用高德地图自定义marker图标

    效果如图 主要代码 data return marker markers position 118 791545 31 9624 id 1 icon require assets xc ren png position 118 798832
  • 公司规定所有接口都用POST请求

    前言 经研发部商议 后续接口都统一使用post请求了 不过这个主要也和我们的具体业务有关 所有接口的参数都做了加 解密 加 验签处理 包括查询 下面是公司架构分享的一篇文章 觉得挺有意思 转载一下 转载内容 小二刚去一家公司实习俩月 就收到
  • Anaconda创建环境、删除环境、激活环境、退出环境

    学习前端的可以掘金 新博客地址 安装scipy conda install scipy conda会从从远程搜索scipy的相关信息和依赖项目 对于python 3 4 conda会同时安装numpy和mkl 运算加速的库 查看已经安装的p
  • Visual Studio 硬盘版制作教程 转

    提示 文章写完后 目录可以自动生成 如何生成可参考右边的帮助文档 文章目录 前言 一 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 总结 前言 提示 这里可以添加本文要记录的大概内容 例如 以下是官方博客例子浅析 先加入相关的
  • 电子英汉词典附带背单词功能C语言程序设计,附录完整代码

    电子英汉词典附带背单词功能C语言程序设计 附录完整代码 系统需求分析 本程模拟面对英语单词有背诵和查询需求的用户 用户在实际学习过程中可能会遇到学习单词时实体单词书体积大不方便的情况 这时就可以使用便携PC设备来运行此程序方便学习 在本程序
  • ERNIE3.0多分类任务应用详细教程代码

    小样本学习简介 二分类 多分类任务在商品分类 网页分类 新闻分类 医疗文本分类等现实场景中有着广泛应用 现有的主流解决方案是在大规模预训练语言模型进行微调 因为下游任务和预训练任务训练目标不同 想要取得较好的分类效果往往需要大量标注数据 因
  • java监听窗口关闭事件_JavaFX 监听窗口关闭事件实例详解

    1 写在前面 在JavaFX的程序开发的时候 在使用多线程的时候 默认情况下在程序退出的时候 新开的线程依然在后台运行 在这种情况下 可以监听窗口关闭事件 在里面关闭子线程 2 具体实现的样例 package sample import j
  • 教程:将数据从Excel导出到C#中的数据表

    MS Excel电子表格被广泛用于保留小型 中型或大型数据 在各种情况下 电子表格都充当存储应用程序数据的数据库 在这种情况下 可能需要从Web或桌面应用程序中读取存储在Excel文件中的数据 对于这种情况 本文介绍如何将数据从Excel工
  • Ext4文件系统介绍 - 理论篇

    Overview ext4文件系统分割成多个block groups 为了解决碎片化问题 block allocator尽量将一个文件的block放在一个group中 block groups的size通过sb s blocks per g
  • Vue父子组件通信之子组件主动获取父组件的数据和方法(三)

    子组件主动获取父组件的数据和方法 实现方式 this parent 属性 this parent 方法 代码示例 父组件
  • 简单教会你如何使用视频ID获取视频详情

    前往注册开通测试 onebound douyin item get video 公共参数 名称 类型 必须 描述 key String 是 调用key 必须以GET方式拼接在URL中 secret String 是 调用密钥 api nam
  • 基于Yolov5的交通标志检测识别设计

    项目介绍 上一篇文章介绍了基于卷积神经网络的交通标志分类识别Python交通标志识别基于卷积神经网络的保姆级教程 Tensorflow 并且最后实现了一个pyqt5的GUI界面 并且还制作了一个简单的Falsk前端网页实现了前后端的一个简单
  • 《网页设计基础——HTML常用标签》

    网页设计基础 HTML常用标签 一 HTML网页框架 格式 二 块级标签 1 标题标签 h1 一级标题 h1 h2 二级标题 h2 h3 三级标题 h3 h4 四级标题 h5 五级标题 h6 六级标题 h6 h5 h4