《网页设计基础——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常用标签》 的相关文章

随机推荐

  • 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