HTML基础教程

news2024/9/24 1:22:52

1 什么是HTML

HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

在这里插入图片描述# 2 入门实例
新建一个test.html文件，内容如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
 
</body>
</html>

其中：

  • 声明为 HTML5 文档
  • 元素是 HTML 页面的根元素
  • 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8（由于在大部分浏览器中直接输出中文会出现乱码，所以要在头部将字符声明为UTF-8）
  • 元素描述了文档的标题
  • 元素包含了可见的页面内容

  • 元素定义一个大标题

  • 元素定义一个段落

保存后运行，即可在浏览器中打开如下界面

3 各部分详解

3.1 标题

HTML 标题（Heading）是通过

-

标签来定义的.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
 
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
 
</body>
</html>

3.2 段落

HTML 段落是通过标签

来定义的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
 
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
 
</body>
</html>

3.3 链接

HTML 链接是通过标签 来定义的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
 
<a href="https://blog.csdn.net/zong596568821xp">这是一个链接使用了 href 属性</a>
 
</body>
</html>

3.4 图像

HTML 图像是通过标签 来定义的。注意： 图像的名称和尺寸是以属性的形式提供的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
 
<img src="zongxp.jpg" width="640" height="640" />
 
</body>
</html>

3.5 表格

表格由

标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由
标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 标签进行定义。如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格：

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

4 速查列表

4.1 基本文档

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

4.2 基本标签

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
 
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->

4.3 文本格式化

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

4.4 链接

普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

4.5 图片

<img src="URL" alt="替换文本" height="42" width="42">

4.6 样式/区块

<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

4.7 无序列表

<ul>
    <li>项目</li>
    <li>项目</li>
</ul>

4.8 有序列表

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

4.9 定义列表

<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

4.10 表格

<table border="1">
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

4.11 框架

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

4.12 表单

<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
 
</form>

4.13 实体

&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于 ©

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/758633.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

复用cmake代码的其他方法

复用cmake代码的其他方法

复用cmake代码的其他方法 函数和宏是代码复用的方法,在cmake3.18版本开始,cmake添加了cmake_language()命令,通过这个命令我们可以直接调用任意的cmake代码,无需将这些可复用的代码使用函数或者宏包起来. 当然cmake_language()命令不是为了代替函数和宏而设计的,而是希望通过…
阅读更多...
ROS话题通信自定义msg

ROS话题通信自定义msg

从21年至今写过不下10个ROS话题通信的工程&#xff0c;今天系统地记录下自定义msg的过程&#xff0c;让后来者少走弯路。 1、自定义msg简介 在 ROS 通信协议中&#xff0c;数据载体是一个较为重要组成部分&#xff0c;ROS 中通过 std_msgs 封装了一些原生的数据类型,比如:Stri…
阅读更多...
redis7单节点、主从、哨兵、集群的安装和配置

redis7单节点、主从、哨兵、集群的安装和配置

redis7安装和配置 2022年4月份正式发布的redis 7.0&#xff0c;是目前历史上变化最大的版本&#xff0c;有超过50个以上的新增命令 官网&#xff1a; https://redis.io中文镜像 http://redis.cn中文学习网&#xff1a; https://redis.com.cn/redis版本&#xff0c;建议升级…
阅读更多...
Spring初识(一)

Spring初识(一)

一.Spring 是什么&#xff1f; 首先我们来看看官网的解释 Spring 使每个人都可以更快、更轻松、更安全地进行 Java 编程。Spring 对速度、简单性和生产力的关注使其成为 世界上最受欢迎的 Java框架。 这里我简单的说明一下什么是spring? 我们通常所说的 Spring 指的是 Sprin…
阅读更多...
纯CSS实现的卡片切换效果

纯CSS实现的卡片切换效果

纯CSS实现的卡片切换效果 无需JS就可以实现限于纯静态页面产品展示不需要轮播,自动切换 示例代码 <template><div class"example-css-tab"><div class"container dwo"><div class"card"><input type"radio"…
阅读更多...
(续2)选择屏幕

(续2)选择屏幕

分页签组件 表单控件 双击空白处----出现右侧编辑框 其中 fixed的意思是固定几列。 可修改 回车会自动复原 回车会自动复原 原因 在pai中检查字段却没有做任何操作。 打算新建一个表单 表单中指定选择行. 按钮扩展. 执行后 修改列名. 创建一个moudle 修改后不会复原. …
阅读更多...
前端卷算法系列(七）

前端卷算法系列(七）

前端卷算法系列&#xff08;六&#xff09; 删除有序数组中的重复项 给你一个 升序排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯…
阅读更多...
用 pesq 给 soundfile 读取的录音数据打分

用 pesq 给 soundfile 读取的录音数据打分

音频文件来源 NOIZEUS: Noisy speech corpus - Univ. Texas-Dallas 很多python库都能计算pesq分数&#xff0c;如pypesq跟pesq两个库&#xff0c;这里讲的的是pesq的库 import soundfile as sf from pesq import pesq# 读取音频文件 audio_clean, src sf.read(./audio/NOIZE…
阅读更多...
[南京大学]-[软件分析]课程学习笔记(三)-数据流分析

[南京大学]-[软件分析]课程学习笔记(三)-数据流分析

Data Flow Analysis Overview of Data Flow Analysis may analysis: outputs information that may be true(over-approximation) 可能正确&#xff0c;超出近似over-approximationmust analysis: outputs information that must be true (under-approximation) 必须正确&…
阅读更多...
WPF RadioButton单选失效

WPF RadioButton单选失效

文章目录 前言解决方案 前言 我最近在照着教程敲代码&#xff0c;WPF深入讲解第8集。发现RadioButton按钮点击触发器不是单选的。WPF中单选和复选通过RadioButton和CheckButton来进行区分。我点击另一个RadioButton之后&#xff0c;之前的Radiobutton没有取消选择。 解决方案 …
阅读更多...
文件上传下载概述

文件上传下载概述

So Easy系列之文件上传下载教程 文件上传下载概述 什么是文件上传下载 所谓文件上传下载就是将本地文件上传到服务器端&#xff0c;从服务器端下载文件到本地的过程。例如目前网站需要上传头像、上传下载图片或网盘等功能都是利用文件上传下载功能实现的。 文件上传下载实际上…
阅读更多...
Shell运行原理以及Linux中的权限问题

Shell运行原理以及Linux中的权限问题

目录 一、shell的运行原理 二、Linux权限的概念 2.1 用户账号切换 2.2 仅提升当前指令的权限 2.3 将普通用户添加到信任列表 三、Linux权限管理 3.1 文件访问者的分类 3.2 文件类型和访问权限 3.3 字符权限值的表示方法 3.3.1 字符表示方法 3.3.2 八进制表示法 3.4…
阅读更多...
CSS学习04

CSS学习04

文章目录 1.精灵图1.1 为什么需要精灵图1.2 精灵图&#xff08;sprites&#xff09;的使用 2.字体图标2.1 字体图标的产生2.2 字体图标的优点**2.3** **字体图标的下载****2.4** **字体图标的引入**2.5 字体图标的追加 3.CSS 三角3.1 介绍 4.CSS 用户界面样式4.1 鼠标样式 curs…
阅读更多...
openGauss学习笔记-11 openGauss 简单数据管理-INSERT INTO语句

openGauss学习笔记-11 openGauss 简单数据管理-INSERT INTO语句

文章目录 openGauss学习笔记-11 openGauss 简单数据管理-INSERT INTO语句11.1 语法格式11.2 参数说明11.3 示例 openGauss学习笔记-11 openGauss 简单数据管理-INSERT INTO语句 在创建一个表后&#xff0c;表中并没有数据&#xff0c;使用这个表之前&#xff0c;需要向表中插入…
阅读更多...
【Go|第8期】Lorca读取HTML的三种方式

【Go|第8期】Lorca读取HTML的三种方式

日期&#xff1a;2023年7月16日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xf…
阅读更多...
【云原生】K8S单节点搭建

【云原生】K8S单节点搭建

Kubernetes Kubernetes基础概念架构1、基础环境2、安装kubelet、kubeadm、kubectl 2、使用kubeadm引导集群1、下载各个机器需要的镜像2、初始化主节点 Kubernetes核心实战Pod Kubernetes基础概念 kubernetes具有以下特性&#xff1a; ● 服务发现和负载均衡 Kubernetes 可以使…
阅读更多...
leetcode 669. 修剪二叉搜索树

leetcode 669. 修剪二叉搜索树

2023.7.15 知道了如何删除二叉树节点的逻辑之后&#xff0c;这题就不难了。 可以参考删除二叉搜索树中的节点这篇文章。 下面直接上代码&#xff1a; class Solution { public:TreeNode* trimBST(TreeNode* root, int low, int high) {if(root nullptr) return root;root->…
阅读更多...
MacOS使用USB接口与IPhone进行Socket通信

MacOS使用USB接口与IPhone进行Socket通信

演示效果如下: 开源地址: GitHub - rsms/peertalk: iOS and Mac Cocoa library for communicating over USB 克隆源码: git clone https://github.com/rsms/peertalk.git 克隆后打开peertalk然后启动xcode工程 先启动MacOS服务端工程,再启动iOS客户端工程 客户端 服务端
阅读更多...
[java安全]URLDNS

[java安全]URLDNS

文章目录 [java安全]URLDNS前言HashMapURLURLStreamHandler调用过程调用链流程图POC [java安全]URLDNS 前言 URLDNS利用链是一条很简单的链子&#xff0c;可以用来查看java反序列化是否存在反序列化漏洞&#xff0c;如果存在&#xff0c;就会触发dns查询请求 它有如下优点&a…
阅读更多...
spring复习：（35）在getBean时，在哪里根据普通bean和工厂bean进行区分处理来返回的?

spring复习：（35）在getBean时，在哪里根据普通bean和工厂bean进行区分处理来返回的?

在AbstractBeanFactory的doGetBean方法&#xff1a; 调用的getObjectForBeanInstance方法部分代码如下&#xff1a; 如果不是工厂bean,则直接将实例返回&#xff0c;否则调用getObjectFromFactoryBean方法获取工厂bean的getObject方法返回的对象 protected Object getObjectF…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023