HTML基础知识（一）

最新推荐文章于 2024-06-06 23:10:38 发布
最新推荐文章于 2024-06-06 23:10:38 发布
阅读量3.1k 收藏 17
点赞数 6
分类专栏： HTML CSS 文章标签： html 前端 css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53414724/article/details/127651897
版权

目录

HTML基础框架代码：

HTML基本框架属性：

HTML的文本格式化属性： 

HTML 文本格式化标签

 HTML "计算机输出" 标签

 HTML 引文, 引用, 及标签定义

HTML链接属性 

HTML链接

HTML 链接 - target 属性

HTML 链接- id 属性

HTML head属性介绍 

HTML 图像属性img

HTML 图像- Alt属性

HTML 图像- 设置图像的高度与宽度

HTML 图像标签

图像映射三种代码；

HTML 表格标签属性

HTML 列表标签

HTML无序列表

HTML 有序列表

HTML 自定义列表

HTML区块属性div ，span

HTML表单属性

HTML 表单标签

 表单基本示例：

表单内置属性：

文本域（Text Fields）

密码字段（password）

单选按钮（Radio Buttons）

复选框（Checkboxes）

提交按钮(Submit)

HTML框架

iframe语法:

iframe - 设置高度与宽度

iframe - 移除边框

使用 iframe 来显示目标链接页面

HTML iframe 标签

HTML基础框架代码：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
<!--这是一个注释
<meta> 标签- 使用实例
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者:
<meta name="author" content="Runoob">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
}-->
        <title>标题</title>
            <base href="基本链接地址" target="_blank">
                <link rel="stylesheet" type="text/css" href="mystyle.css">定义了文档与外界资源之间的联系，通常用于连接样式表
<style type="text/css">
body {
    background-color:yellow;
}
p {
    color:blue
}
</style>定义了HTML文档的样式文件引用地址，也可以直接渲染样式
        <script>用于加载脚本文件</script>
    </head>
<body>
<h1>标题</h1>
<p>段落</p>
<font size="字体号">设置字体大小文本</font>
<a href=""></a>这是一个链接
<img src="" width="" height=""/>HTML图像引用
<br>换行
<hr>水平分割线
<!--这是一个注释-->
</body>
</html>

HTML基本框架属性：

  1. class    为html元素定义一个或多个类名（classname）(类名从样式文件引入)，class 属性可以多用 class=" " （引号里面可以填入多个class属性）
  2. id    定义元素的唯一id，id 属性只能单独设置 id=" "（只能填写一个，多个无效）
  3. style    规定元素的行内样式（inline style）
  4. title    描述了元素的额外信息 (作为工具条使用)

HTML的文本格式化属性： 

HTML 文本格式化标签

  1. <b>    定义粗体文本
  2. <em>    定义着重文字
  3. <i>    定义斜体字
  4. <small>    定义小号字
  5. <strong>    定义加重语气
  6. <sub>    定义下标字
  7. <sup>    定义上标字
  8. <ins>    定义插入字
  9. <del>    定义删除字

 HTML "计算机输出" 标签

  1. <code>    定义计算机代码
  2. <kbd>    定义键盘码
  3. <samp>    定义计算机代码样本
  4. <var>    定义变量
  5. <pre>    定义预格式文本

 HTML 引文, 引用, 及标签定义

  1. <abbr>    定义缩写
  2. <address>    定义地址
  3. <bdo>    定义文字方向
  4. <blockquote>    定义长的引用
  5. <q>    定义短的引用语
  6. <cite>    定义引用、引证
  7. <dfn>    定义一个定义项
     

HTML链接属性 

HTML链接

<a href="url">链接文本</a>


HTML 链接 - target 属性


使用 target 属性，你可以定义被链接的文档在何处显示，下面的这行会在新窗口打开文档：
 

<a href="链接" target="_blank" rel="显示地址">target属性</a>

HTML 链接- id 属性


id 属性可用于创建一个 HTML 文档书签，书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的，在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

<!--在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"-->

<a href="#tips">访问有用的提示部分</a>

<!--或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"-->

<a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>

HTML head属性介绍 

标签描述
<head>定义了文档的信息
<title>定义了文档的标题
<base>定义了页面链接标签的默认链接地址
<link>定义了一个文档和外部资源之间的关系
<meta>定义了HTML文档中的元数据
<script>定义了客户端的脚本文件
<style>定义了HTML文档的样式文件

HTML 图像属性img

HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本，替换文本属性的值是用户定义的。

<img src="image.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML 图像- 设置图像的高度与宽度

height（高度） 与 width（宽度）属性用于设置图像的高度与宽度,属性值默认单位为像素:

<img src="image.jpg" alt="Pulpit rock" width="1000" height="1000">

提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

HTML 图像标签

<img>定义图像
<map>定义图像地图
<area>定义图像地图中的可点击区域

图像映射三种代码；

1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))

<area shape="rect" coords="x1,y1,x2,y2" href=url>

2、圆形：(圆心坐标为(X1,y1)，半径为r)

<area shape="circle" coords="x1,y1,r" href=url>

3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)

<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>

HTML 表格标签属性

<table>定义表格
<th>定义表格的表头
<tr>定义表格的行
<td>定义表格单元
<caption>定义表格标题
<colgroup>定义表格列的组
<col>定义用于表格列的属性
<thead>定义表格的页眉
<tbody>定义表格的主体
<tfoot>定义表格的页脚

HTML 列表标签

<ol>定义有序列表
<ul>定义无序列表
<li>定义列表项
<dl>定义列表
<dt>自定义列表项目
<dd>定义自定列表项的描述

 注释：

  1. ul是unordered lists的缩写 (无序列表)
  2. li是list item的缩写 （列表项目）
  3. ol是ordered lists的缩写（有序列表）
  4. dl是definition lists的英文缩写 (自定义列表)
  5. dt是definition term的缩写 (自定义列表组)
  6. dd是definition description的缩写（自定义列表描述）
  7. nl是navigation lists的英文缩写 （导航列表）
  8. tr是table row的缩写 （表格中的一行）
  9. th是table header cell的缩写 （表格中的表头）
  10. td是table data cell的缩写 （表格中的一个单元格）

HTML无序列表

无序列表使用 <ul> 标签

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>测试(runoob.com)</title> 
</head> 
<body>

<h4>无序列表:</h4>
<ul>
  <li>141</li>
  <li>141</li>
  <li>141</li>
</ul>

</body>
</html>

浏览器显示如下：

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>测试(runoob.com)</title> 
</head>
<body>

<ol>
  <li>12</li>
  <li>21</li>
  <li>121</li>
</ol>

<ol start="50">
  <li>212</li>
  <li>121</li>
  <li>211</li>
</ol>

</body>
</html>

HTML 自定义列表

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML区块属性div ，span

<div>定义了文档的区域，块级 (block-level)
<span>用来组合文档中的行内元素， 内联元素(inline)

HTML表单属性

HTML 表单标签

<form>定义供用户输入的表单
<input>定义输入域
<textarea>定义文本域 (一个多行的输入控件)
<label>定义了 <input> 元素的标签，一般为输入标题
<fieldset>定义了一组相关的表单元素，并使用外框包含起来
<legend>定义了 <fieldset> 元素的标题
<select>定义了下拉选项列表
<optgroup>定义选项组
<option>定义下拉列表中的选项
<button>定义一个点击按钮
<datalist>New指定一个预先定义的输入控件选项列表
<keygen>New定义了表单的密钥对生成器字段
<output>New定义一个计算结果

 表单基本示例：

<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

表单内置属性：

文本域（Text Fields）

文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密码字段（password）

密码字段通过标签 <input type="password"> 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

注意：密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代。

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单的单选框选项:
<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框。复选框可以选取一个或多个选项：
<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>

提交按钮(Submit)

<input type="submit"> 定义了提交按钮。

当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。action 属性会对接收到的用户输入数据进行相关的处理:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
  1. 假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 html_form_action.php 文件，该页面将显示出输入的结果。
  2. 以上实例中有一个 method 属性，它用于定义表单数据的提交方式，可以是以下值：

  3. post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。

  4. get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。

HTML框架

iframe语法:

<iframe src="URL"></iframe>

该URL指向不同的网页。

iframe - 设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度，属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。

<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>

iframe - 移除边框

frameborder 属性用于定义iframe表示是否显示边框，设置属性值为 "0" 移除iframe的边框:

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

使用 iframe 来显示目标链接页面

iframe 可以显示一个目标链接的页面，目标链接的属性必须使用 iframe 的属性，如下实例:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe> 
<p>
<a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a>
</p>

HTML iframe 标签

<iframe>定义一个内联的iframe

 

~夏秋～
关注
  • 6
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML基础网页布局代码写法
m0_51826406的博客
03-07 8712
W3C标准 W3C World Wide Web Consortium 万维网联盟 中立性技术标准机构 W3C标准包括 结构化标准语言（HTML XML） 表现标准语言（CSS） 行为标准（DOM ECMAScript） 在idea创建一个工程 开始学习HTML基础 <!--注释 DOCTYPE：告诉浏览器我们使用什么规范 --> <!DOCTYPE html> <html lang="en"> <!-- head代表网页头部 --> <hea
Html基础知识点.docx
07-23
Html 基础知识点 Html 是一种标记语言，用于创建网页的结构和内容。以下是 Html 基础知识点： 一、Html5 文档类型和字符集 * Html5 文档类型：<!doctype html> * Html5 字符集： 二、Html5 Canvas 元素 * ...
【HTML基础】HTML的基本结构
ebb29bbe的博客
09-13 6434
HTML基本结构包含html标记，head标记，body标记...
HTML开发的最主要的三种框架及Python实现
最新发布
qq_53529450的博客
06-06 632
HTML开发的最主要的三种框架:Bootstrap、Foundation、Bulma及Python实现
【Web前端】HTML基础知识详解
将冲破艾迪i的博客
10-23 3367
本文系统的讲述了HTML所有常用标签，并对常用标签进行了示例。
HTML 框架简介
Free雅轩的博客
09-26 1521
height 和 width 属性用来定义iframe标签的高度与宽度。属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。frameborder 属性用于定义iframe表示是否显示边框。通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。iframe 可以显示一个目标链接的页面。该URL指向不同的网页。
HTML入门教程：快速了解HTML ，适合零基础（有基础的勿入）
qq_63389054的博客
04-27 2652
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 文章目录 前言 一、HTML基本框架及快捷键生成基础框架 1.HTML基本框架介绍 2.快捷键生成基础框架 二、内联元素和块级元素 1.内联元素 2.块级元素 三...
HTML基础知识点学习一
06-30
前端入门基础知识点,HTML知识点整理,用Typora写的
HTML基础知识讲解！
03-26
HTML 基础知识讲解 HTML 基础知识是网页开发的基础，了解 HTML 基础知识是学习网页开发的必备条件。本文将详细讲解 HTML 基础知识，包括 HTML 标题、HTML 段落、HTML 链接和 HTML 图像等。 HTML 标题 -------- ...
HTML:HTML 基础知识
05-13
1990 年，由于对 未来发展的远见，Tim Berners-Lee 提出了 的概念，并在第二年在 的基础上将其正式定义为一个标记语言。 于 1993 年正式开始制定 HTML 规范，并在经历了几个版本的草案后于 1995 年发布了 HTML 2.0 ...
HTML基础知识点总结 .doc
11-21
本篇总结涵盖了HTML的基础知识点，主要分为三个章节，分别是HTML文档结构、元素标签及样式控制、以及表单处理。 **一、HTML文档结构** HTML文档通常由`<!DOCTYPE>`声明开始，用来指定文档使用的HTML版本。接着是`...
html+css网页设计源码(简洁)
12-25
html+css网页设计源码(简洁)，前端基础代码，拿来就用 评分: ⭐⭐⭐⭐⭐
网站设计代码HTML+JS+CSS架构
05-02
该网站是由 html+js+css架构设计，里面部门功能介绍： 图片滚动（HTML技术实现） ；多图片自动滚动，可自行设计图片数量（js+hmtl实现）；多图片内容左右滚动，可自行设计图片张数，显示图片张数（js+hmtl实现）；透明度设计(支持IE\GOOGLE,可以使某个标签内容透明化，鼠标放置可改变透明状态）；等多功能实现。网站正在建设ing，代码优化ing
如何创建一个简易的HTML网页框架
热门推荐
DdLlCcc的博客
05-28 1万+
背景： 在我们初步学习了web前端开发的一些知识时，我们可能会考虑构建一个简单的html网站，但是，如何着手去开始我们的网站，对于新手来说可能是个问题。 在这篇文章中，我将介绍我在构建一个简易的网页时，首先去做的事情。 当然，我本身也并非专业的前端设计师，写此文章主要为了分享我的一些学习过程中的经验，所写内容可能也会存在思想局限以及纰漏，也希望大家批评指出。` 第一步：画出草图 在开始我们的编程之前，我觉得更关键的是设计出我们的网页效果，即使是最简单的框架图，也能够降低我们在编写代码过程中的难度。 首先，
html网页布局代码
weixin_35750747的博客
02-10 766
HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。它使用标记来描述网页上的内容，包括文本、图像、链接和其他内容。 下面是一个简单的HTML网页布局代码示例： <!DOCTYPE html> <html> <head> <title>我的网页</title> </head> &l...
2021-05-18
weixin_46076864的博客
05-19 170
改变层级关系：z-index：正数，负数也可以，值越大，越在上面显示，默认值：auto（等效于0） 1.z-index只能在定位使用（relative absolute fixed) 2.z-index取整数 锚点： 1.a href=“跳转元素对应的id(#idname)” 2.<标签名 id=“idname”> 行内元素直接设置大小的方式：（转换元素类型和脱离文档流） 1.display:block/inline-block; 2.float:left/right; 3.position:
HTML基础
qiqi6634的博客
05-11 251
表现：网页元素的外观和页面样式等（如：颜色,大小）：CSS.行为：网页模型的定义与页面交互：JavaScript。使用方法：直接使用albel标签把内容（如：文本）和表单标签一起包裹起来；注：只有同一个结构标签中的单元格才能合并，不能跨结构合并（不能跨：thead，tbody，tfoot）；1.标签由，/，英文单词和字母组成。特点：内部可以包裹内容，如果需要a标签点击之后去指定页面，需要设置a标签的href属性。二.表格的结构标签（让浏览器和别人知道你的结构）（了解就行）表格的结构标签可以省略。
HTML框架代码全集
我的世界我的梦
12-21 4044
导读： 　　网页框架代码 　　特点是无论使用何种分辨率，它的大小和位置都是不变的。 　　我所收集的: 　　1. 　　 　　 　　 　　 　　2.右边框架 　　 　　 　　 　　 　　3.上下框架 　　 　　 　　 　　 　　4.网页内嵌框架 　　 　　~~~~~ 　　也可以自己修在框架大小： 　　 　　　　marginWidth=0 frameSpacing=0 marginHeight=
HTML基础-框架
ucanvic的博客
07-16 859
普通框架1、框架的概念框架技术：将一个浏览器窗口划分成若干个小窗口，每个小窗口显示一个独立的网页。2、框架集和框架页框架集&lt;frameset&gt;：主要用来划分窗口。框架页&lt;frame&gt;：主要用来指定窗口默认显示的网页地址。3、划分一个左右型的框架的代码（cols属性：左右型，rows属性：上下型）首先将网页DTD设成框架DTD。&lt;frameset cols="200,*...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值