HTML基础

最新推荐文章于 2024-11-08 10:30:00 发布
最新推荐文章于 2024-11-08 10:30:00 发布
阅读量48 收藏
点赞数
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56534351/article/details/133686542
版权

1.HTML框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2.标题标签

h1~h6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
</body>
</html>

3.标签属性

HTML标签属性是指HTML元素中的特性，这些特性用于描述标签的行为、外观和内容。每个HTML标签都有一组不同的属性

  1. <body>标签属性：

    • bgcolor：设置页面的背景颜色。
    • background：设置页面的背景图片。
    • text：设置页面文本的颜色。
    • link：设置超链接的颜色。
    • vlink：设置访问过的超链接的颜色。
    • alink：设置活动的超链接的颜色。
    • leftmargin、rightmargin、topmargin、bottomargin：设置页面内容与浏览器边界的边距。

  2. <h1>到<h6>标签属性：

    • align：设置标题的对齐方式，有left、right、center、justify可选。

  3. <p>标签属性：

    • align：设置段落的的对齐方式，有left、right、center可选。

  4. <hr>标签属性：

    • width：设置水平线的宽度。
    • size：设置水平线的粗细。
    • color：设置水平线的颜色。
    • align：设置水平线的对齐方式。

  5. <ol>和<ul>标签属性：

    • type：设置列表类型的属性，有1、A、a、I、i可选。
    • reversed：如果设置为true，则列表是反向的。
    • start：设置列表的起始数值。

  6. <a>标签属性：

    • href：设置链接的URL地址。

4. 文本标签

粗体标签 <b></ b>

< strong></ strong>

<b><h1>你好</h1></b>

斜体标签 <i></ i>

< em></ em>

<i>你好</i>

下划线标签 <u></ u>

<ins></ins>

<u>你好</u>

删除线标签 <del></ del>

<del>你好</del>

上标标签 <sup></ sup>

5.段落标签

<p>你好</p>

6.换行标签

<br>

7.水平线标签

<hr>

8. 文本标签

字体标签 <font color="" face="" size="1~7" ></ font>

粗体标签 <b></ b>< strong></ strong> 斜体标签 <i></ i>< em></ em>

下划线标签 <u></ u><ins></ins>

删除线标签 <del></ del>

上标标签 <sup></ sup>

下标标签 <sub></ sub>

9.空格标签

&nbsp;

10.超链接

<a href=""></a>

href表示跳转到的位置，><中填写点击的内容 

11.锚点

HTML 中的锚点使用 <a> 标签来创建。在 <a> 标签中，您可以指定链接的目标（称为“锚点”），用户点击链接后，浏览器将自动跳转到锚点所在的位置。

<a href="#top">回到顶部</a>

在上面的代码中，<a> 标签的 href 属性指定了链接的目标，这里是"#top"。"#" 符号表示锚点的名称，top 是锚点的名称。

要创建锚点，可以在页面的特定部分使用 <a> 标签，并将 id 属性设置为锚点的名称。例如，以下代码创建了一个名为 "top" 的锚点 

<a id="top">顶部</a>

12.图片标签 

图片标签是 <img>

 例如：

<img src="image.jpg" alt="Image description">
  • src 属性指定图片的来源，即图片的文件路径或 URL。
  • alt 属性提供了一段文本，当图片无法加载或用户使用纯文本浏览器时，这段文本将被显示。
  • width 和 height 属性：用于指定图片的宽度和高度，以像素为单位。
  • align 属性：用于指定图片相对于其周围元素的对齐方式，可取值为 left, right, top, bottom, 或 middle。
  • border 属性：用于指定图片周围的边框宽度，以像素为单位。
  • hspace 和 vspace 属性：用于指定图片与周围元素之间的水平和垂直边距，以像素为单位。

13.热点地图 

 一种常见的方法是使用 <map> 标签和 <area> 标签来创建热点地图。<map> 标签用于定义一个图像映射，其中每个 <area> 标签定义了一个热点区域，并指定了该区域在图像上的坐标和链接。 

<img src="image.jpg" usemap="#image-map">

<map name="image-map">
  <area shape="rect" coords="0,0,100,100" href="www.example.com">
  <area shape="rect" coords="100,0,200,100" href="www.example.net">
</map>

 在上面的代码中，<img> 标签指定了热点地图所基于的图像，<map> 标签定义了图像映射，<area> 标签定义了热点区域。每个热点区域使用 shape 属性指定形状（例如 "rect" 表示矩形），使用 coords 属性指定区域在图像上的坐标，使用 href 属性指定链接目标。

14.视频标签

HTML中，视频标签为<video>，用于在网页上嵌入视频文件，并指定视频的来源、尺寸和其他属性。

<video src="video.mp4" controls></video>
  • src 属性指定视频的来源，即视频的文件路径或 URL。
  • controls 属性启用浏览器内置的视频播放控件，如播放/暂停按钮、音量调节等。

<video>标签还支持其他属性，例如：

  • width 和 height 属性：用于指定视频的宽度和高度，以像素为单位。
  • autoplay 属性：用于指定视频是否自动播放，当用户打开网页时视频自动播放。
  • loop 属性：用于指定视频是否循环播放，当视频播放完毕后自动重新开始播放。
  • muted 属性：用于指定视频是否静音播放，用户无法通过浏览器调节音量。

15.列表标签 

列表标签分为有序列表、无序列表、自定义列表 

无序列表：

<ul>
  <li>苹果
  <li>香蕉
  <li>橙子
</ul>

有序列表：

<ol>
  <li>第一项
  <li>第二项
  <li>第三项
</ol>

 自定义列表：

<dl>
  <dt>定义标题 1</dt>
  <dd>定义内容 1</dd>
  <dt>定义标题 2</dt>
  <dd>定义内容 2</dd>
</dl>

16.表格标签 

  1. <table>：用于创建表格，是表格的根元素。
<table>
  <!-- 添加表格行和单元格 -->
</table>

2.<tr>（表格行）：用于创建表格行，一个表格由多行组成。

<table>
  <tr>
    <!-- 添加表格单元格 -->
  </tr>
</table>

3.<th>（表格标题单元格）和 <td>（表格数据单元格）：用于创建表格中的单元格。

<table>
  <tr>
    <th>列 1 标题</th>
    <th>列 2 标题</th>
    <th>列 3 标题</th>
  </tr>
  <tr>
    <td>单元格 1, 行 1</td>
    <td>单元格 2, 行 1</td>
    <td>单元格 3, 行 1</td>
  </tr>
  <!-- 添加更多行和单元格 -->
</table>

4. 行合并，使用 <rolspan> 属性：该属性允许您将一个或多个单元格合并为一个单元格。

<td rolspan="2"></td>

5.列合并，使用 <colspan> 标签：该标签用于定义一列，您可以在其中设置列的属性，例如对齐方式、宽度等。您可以使用该标签将多列合并为一列。

<td colspan="2"></td>

border：用于设置表格边框的宽度，以像素为单位。

cellspacing 和 cellpadding：分别用于设置表格单元格之间的边距和单元格内容与边框之间的边距，以像素为单位。

width 和 height：分别用于设置表格的宽度和高度，以像素或百分比为单位。

align 和 valign：分别用于设置表格内容在单元格中的对齐方式和垂直对齐方式。

bgcolor：用于设置表格的背景颜色。

bordercolor：用于设置表格边框的颜色。

  例：银行汇款表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<table  border="1" cellspacing="0" height="250" width="800">
<caption><h1>工商银行电子汇款单</h1></caption>
<tr>
<td colspan="2"><b>回单类型</b></td>
<td>网上转账类型</td>
<td colspan="2"><b>指令序号</b></td>
<td>HQH0000000000000000013878172</td>
</tr>
<tr>
<td rowspan="4"><b>收款人</b></td>
<td>户名</td>
<td>老牟</td>
<td rowspan="4">付款人</td>
<td>户名</td>
<td>老刘</td>
</tr>
<tr>
<td><b>卡号</b></td>
<td>000000000001</td>
<td>卡号</td>
<td>000000000002</td>
</tr>
<tr>
<td>地区</td>
<td>南京</td>
<td>地区</td>
<td>杭州</td>
</tr>
<tr>
<td>网点</td>
<td>工商江苏南京业务处理中心</td>
<td>网点</td>
<td>江苏徐州业务中心</td>
</tr>
<tr>
<td colspan="2"><b>币种</b></td>
<td>人民币</td>
<td colspan="2"><b>钞汇标志</b></td>
<td>钞票</td>
</tr>
<tr>
<td colspan="2"><b>金额</b></td>
<td>1.00元</td>
<td colspan="2"><b>手续费</b></td>
<td>0.57元</td>
</tr>
<tr>
<td colspan="2"><b>合计</b></td>
<td colspan="4">人民币（大写）：壹元整</td>
</tr>
<tr>
<td colspan="2"><b>交易时间</b></td>
<td>2017年6月1日</td>
<td colspan="2"><b>时间戳</b></td>
<td>2017-06-01-13.00.0.&nbsp;&nbsp;&nbsp;00000</td>
</tr>
</table>
<p>票据打印时间：2017-06-01&nbsp;&nbsp;&nbsp;15：00：12</p>
<del>票据打印单位：汪苏徐州业务中心</del>
<p>操作员：大曾</p>    
</body>
</html>

意巷浓
关注
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 4884
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
HTML基础填空题
weixin_45031351
06-05 3678
1.用户列表标签中，添加__target_________属性可以让用户列表文字点击时打开一个新的窗口，使用____锚标记/锚点_______跳转到本页面的指定位置 2.Html的全称_____Hypertext Markup Language______________. 3.在网页上使用___display:none____属性值隐藏HTML标签 4.在网页上使用__标签在网页中添加下划线 5...
HTML基础知识总结
qq_40046544的博客
11-14 4322
HTML 是用来描述网页地一种语言。HTML 指的是超文本标记语言（Hyper Text Markup Language）HTML 不是一种编程语言，而是一种标记语言（markup language）标记语言是一套标记标签（markup tag）HTML 使用标记标签来描述网页声明必须是 HTML 文档的第一行，位于 html 标签之前。声明不是 HTML 标签；它是指示 web 浏览器使用哪个 HTML 版本进行编写的指令。
头歌-HTML基础
somewon的博客
03-06 1万+
四川师范大学 头歌 web应用开发
HTML基础 - HTML表格
qq_45383769的博客
04-07 1万+
HTML基础 - HTML表格 1.无表头的表格 <table> <tr> <td> <table>标签代表的是表 <tr>标签代表的是行 <td>标签代表的是列 在html页面中的表格来着，就和excl的表格不一样喽，咱自己有自己的规则： 这就是没有表头，也就是最简单的一个表格。（设置了边框为1 ：border= “1”） 2.有表头的表格 <th> <th>表示就是表头了哦，字体是加粗居中显示的
【HTML基础】HTML的基本结构
ebb29bbe的博客
09-13 6716
HTML基本结构包含html标记，head标记，body标记...
web前端面试-10大经典题（HTML基础）
厚积薄发.
11-21 4515
web前端面试-10大经典题（HTML基础） ✨个人笔记博客✨星月前端博客✨原创不易，还希望各位大佬支持一下✏️评论，你的意见是我进步的财富！
HTML基础内容
qq_45794962的博客
10-05 1万+
HTML 段落 HTML 段落是通过标签 <p> 来定义的。 实例 <p>这是一个段落。</p> <p>这是另外一个段落。</p> HTML 链接 HTML 链接是通过标签 <a> 来定义的。 实例 <a href="https://www.runoob.com">这是一个链接</a> 提示:在 href 属性中指定链接的地址。 (您将在本教程稍后的章节中学习更多有关属性的知识)。 HT.
HTML基础——HTML
热门推荐
weixin_45651821的博客
08-10 9万+
一、基础语法 1. 什么HTML HTML（Hypertext Markup Language） - 超文本标记语言 标记语言 - 在不同的文本中加不同的标记让文本的意义和功能不同, 例如：markdown、html HTML大小不敏感： html == Html == HTML == hTMl (小写和大写功能一样) 2. 标签 - 就是标记， 标签是HTML的基本结构，不同的标签功能不一样 语法： 双标签(标准标签): <标签名 属性1=属性值1 属性2=属性值2 …>标签内容&lt
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 2517
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
HTML基础模板
qq_61690596的博客
07-18 2154
HTML基本模板，每个基础元素的内容和作用
HTML基础练习题
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
DevExpress中文教程 - 如何使用AI模型检查HTML编辑中的语法？
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
11-04 800
本文将主要展示如何将AI相关功能添加到HTML编辑控件并调整其UI获得最佳用户体验，欢迎下载最新版组件体验！
一七五、HTML 不同类型的事件及其说明和示例
梅某某
11-07 745
HTML 事件处理程序是通过 JavaScript 来捕获和响应不同的用户操作、系统事件或浏览器事件。下面是不同类型的事件及其说明和示例。
前端八股文(一)HTML 持续更新中。。。
DogEgg_001的博客
11-06 579
src：用于js脚本，img、iframe、script等标签加载时会阻塞主线程，将资源内容嵌入到当前标签所在的位置，将其指向的资源下载应用到文档内href：用于链接a、link等标签href指向外部资源所在的位置，和当前元素位置建立链接，将其下载的时候不会阻止其他资源的加载解析。
【Pikachu靶场：XSS系列】xss之过滤，xss之htmlspecialchars，xss之herf输出，xss之js输出通关啦
m0_47484034的博客
11-05 371
【Pikachu靶场：XSS系列】xss之过滤，xss之htmlspecialchars，xss之herf输出，xss之js输出通关啦
常见前端代码分析面试题Javascript|html
最新发布
警警的博客
11-08 435
html\CSS\Javascript
HTML基础知识速览：文档结构与常用标签
"该文档是关于HTML基础知识点的总结，主要涵盖了HTML文档的基本结构、标题标签、文字属性、特殊符号、行控制、图片插入以及文字布局等方面的内容。适合初学者学习和参考。" HTML（HyperText Markup Language）是...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值