《HTML简单入门》

news2024/11/19 20:16:30

目录

前言

HTML基本知识

简单示例

HTML标签

单标签

HTML元素

HTML属性

HTML入门知识

HTML头部

title

style

meta

link

script

noscript

base

HTML标题

h 

HTML段落

p 

HTML文本格式化

加粗

加重

倾斜

强调

下划线

删除线

小号字体

下标

上标

水平线

换行

HTML链接

target属性：在新窗口打开链接

id属性：书签作用 

HTML图像

img

HTML表格

table

HTML列表

有序列表 ol

无序列表 ul

定义列表 dl

前言

本人学的是HTML5，使用的开发环境是JetBrains的Webstorm。 

什么是HTML？

HTML指的是一种超文本标记语言，全称是HyperText Makeup Language。

HTML不是一种编程语言，而是一种标记语言，用来描述网页，是前端三剑客之一（HTML、CSS、Javascript）。

HTML基本知识

简单示例

就像学编程语言经典的hello world一样，先看看简单的长什么样。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>小白学前端</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落</p>
<h2>二级标题</h2>
<p>段落</p>
</body>
</html>

浏览器展示。

<!DOCTYPE html> 

声明为 HTML5 文档，HTML5的比较简单，而HTML的声明代码比较复杂。

<html lang="zh"> 

是 HTML 页面的根元素，lang="zh"表示为中文显示。

<head>

包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8，即中文编码。

<title> 

描述了文档的标题。

<body> 

包含了浏览器可见的页面内容。

<h1> 

定义一个一级标题。

<h2> 

定义一个二级标题。

<p> 

元素定义一个段落。

HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)，是由尖括号包围的关键词，比如 <html>，通常是成对出现的，比如 <html> 和 </html>，第一个标签是开始标签，第二个标签是结束标签，也被称为开放标签和闭合标签。

<tag> 

 HTML标签对大小写不敏感，即大小写都可，习惯小写。 

单标签

 HTML的单标签在开始标签中关闭。 

HTML元素

一个HTML元素包括一对标签对，即开始标签和结束标签。

<tag>...</tag> 

元素的内容是开始标签和结束标签之间的内容。

空元素在开始标签中关闭。

元素之间大部分可以嵌套，即一个元素可以作为另一个元素的内容，各种元素嵌套形成HTML文档。

body元素是HTML文档的主体。

HTML属性

 HTML属性是HTML元素提供的附加信息，用于描述开始标签，以值对出现。

如：

<html lang="zh"> 

中的lang=“zh” 就是属性，以空格隔开，而不是逗号。

属性对大小写不敏感，习惯小写。

属性值可以用单引号包裹，也可以用双引号包裹，某些情况下只能用单引号或者双引号，当属性值本身含有单引号或者双引号的时候。

HTML入门知识

HTML头部

HTML头部<head>包括<title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>元素标签。

title

网页的标题。

<title>网页标题</title>

style

用来定义html文档的样式信息，为文档添加样式，规定浏览器怎样显示html文档内容。

<style type="text/css">

type

style属性，是必须属性，用来规定样式表的MIME类型，唯一的值为：text/css。

media

style属性，规定文档将显示在什么设备上，默认是计算机屏幕。

meta

用来定义页面编码语言、优化搜索引擎、自动刷新并指向新的页面、控制页面缓冲、响应式视窗、增加网站的曝光度等等等等。

charset

meta属性，定义文档的字符编码。

<meta charset="UTF-8">:世界通用的语言编码
<meta charset="GB2312">:简体中文
<meta charset="BIG5">:繁体中文
<meta charset="ISO-8859-1">:英文
<meta charset="iso-2022-jp">:日文

name

meta属性，用于描述网页，与之对应的属性值为content。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

用于优化屏幕的缩放：

height – viewport 的高度 （范围从 223 到 10,000 ）   

user-scalable [yes | no]是否允许缩放   

initial-scale  初始化比例（范围从 > 0 到 10）   

minimum-scale 允许缩放的最小比例   

maximum-scale 允许缩放的最大比例 

<meta name="description" content="xxx">：告诉搜索引擎，当前页面的主要内容是xxx。
<meta name="keywords" content="xxx">：告诉搜索引擎，当前页面的关键字是xxx。
<meta name="author" content="xxx">：告诉搜索引擎,网站作者是xxx。
<meta name="copyright" content="xxx">：标注网站的版权信息。

http-equiv

 meta属性，用来精确控制网页。

<meta http-equiv="expries" expires="Friday,12-Jan-2024 08:18:18 GMT">:网页定时过期，必须使用GMT的时间格式。
<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/">:如果网页过期，那么存盘的cookie将被删除。必须使用GMT的时间格式。
<meta http-equiv="Refresh" content="5;URL">:告诉浏览器在5秒后跳转到URL网页
<meta http-equiv="Pragma" content="no-cache">:禁止浏览器从本地计算机的缓存中访问页面内容。访问者将无法脱机浏览。
<meta http-equiv="Window-target" content="_top">:强制页面在当前窗口以独立页面显示，可以用来防止别人在框架里调用你的页面。
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>:强制浏览器按照特定的版本标准进行渲染。但不支持IE7及以下版本。如果是ie浏览器就用最新的ie渲染，如果是双核浏览器就用chrome内核。

link

单标签，空元素，用来链接HTML文档和外部资源，常用来链接CSS文件，即样式表。

<link rel="stylesheet" type="text/css" href="mystyle.css">

herf

link属性，被链接的文件地址。 

ref

link属性，规定HTML文档和被链接的文件的关系。

type

link属性，规定被链接文档的 MIME 类型。

media

link属性，规定被链接文档将显示在什么设备上，默认是计算机屏幕。

script

用于加载脚本文件，像JavaScript。

noscript

用于当浏览器不支持 JavaScript 的时候在页面上显示一些提示内容。

base

 这个是指定默认的链接地址的，当很多链接具有相同的源时，可以使用。

    <base href="https://blog.csdn.net/weixin_62264287?type=blog/">

HTML标题

h 

heading，headline，header，可以有六个级别的标题，通过<h1>...</h1>到<h6>...</h6>来实现。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>叶子的小白网页</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>

浏览器展示。

HTML段落

p 

 paragraphs，通过标签<p>...</p>来实现。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>叶子的小白网页</title>
</head>
<body>
<h6>2023年愿望</h6>
<p>这个寒假学点前端知识，希望大二暑假能够找个实习</p>
</body>
</html>

浏览器展示。

HTML文本格式化

加粗

<b>内容</b>

加重

<strong>内容</strong>

实际效果一般和加粗差不多。

倾斜

<i>内容</i>

强调

<em>内容</em>

实际效果一般和倾斜差不多。

下划线

<ins>内容</ins>

删除线

<del>内容</del>

小号字体

<small>内容</small>

下标

<sub>内容</sub>

上标

<sup>内容</sup>

水平线

<hr/>

换行

<br/>

HTML链接

创建一个链接：

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

链接到我的主页：

<a href="https://blog.csdn.net/weixin_62264287?type=blog/">我的主页</a>

这样默认在原窗口打开。

target属性：在新窗口打开链接

<a href="https://blog.csdn.net/weixin_62264287?type=blog/" target="_blank">我的主页</a>

target="_blank"实现在新窗口打开链接。 

id属性：书签作用 

链接不仅可以跳到别的网页，还可以跳到本网页的某个部分。

给跳转的部分编上号，即id：

<a id="01">第一章</a>

然后设置跳转的点击地方：

<a href="#01">跳转到第一章</a>

HTML图像

img

空标签，只有属性。

src

<img>属性，source，值是图像的网址URL。

<img src="URL">

alt

<img>属性，alternative，当图像无法显示时显示的文本。

<img src="beach.jpg" alt="beach">

height

<img>属性，设定图像的高度，像素值，默认是原图像的高度。

<img src="URL" width="400" height="300">

width

<img>属性，设定图像的宽度，像素值，默认是原图像的宽度。

<img src="URL" width="400" height="300">

HTML表格

table

默认情况下，即单单使用HTML，表格是没有边框的，需要用上CSS才能显示边框。

<table>
    <caption>碎碎念念</caption>
    <tr>
        <th>见过最好的</th><th>且不以物喜</th>
    </tr>
    <tr>
        <td>知晓最坏的</td><td>且不以己悲</td>
    </tr>
    <tr>
        <td>乱花渐欲</td><td>不坠青云志</td>
    </tr>
    <tr>
        <td>腹有诗书</td><td>不夸夸其谈</td>
    </tr>
</table>

HTML<caption>

表格标题。

<table>
    <caption>碎碎念念</caption>
</table>

HTML<tr>

表格行，tr即table row。

<table>
    <tr>
        <td>腹有诗书</td><td>不夸夸其谈</td>
    </tr>
</table>

HTML<td>

表格单元格，td即table data cell。

<table>
    <tr>
        <td>腹有诗书</td><td>不夸夸其谈</td>
    </tr>
</table>

HTML<th>

表头单元格，th即table header cell。

<table>
    <tr>
        <th>见过最好的</th><th>且不以物喜</th>
    </tr>
</table>

HTML列表

有序列表 ol

ol，即ordered list，有序列表，列表项是有顺序的。

HTML<li>

li，即list item，列表项。

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

 tpye

属性，改变列表项符号。

数字 type="1"

<ol type="1">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

 

 小写英文字母 type="a"

<ol type="a">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

 大写英文字母 type="A"

<ol type="A">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

 小写罗马字母 type="i"

<ol type="i">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

 大写罗马字母 type="I"

<ol type="I">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

无序列表 ul

ul，即unordered list，无序列表，没有顺序。

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

 type 

改变列表项符号。

HTML已弃用。

定义列表 dl

 dl，即definition list，定义列表。

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，实现网页结构。</dd>
    <dt>CSS</dt>
    <dd>层叠样式表，实现网页外观。</dd>
    <dt>JavaScript</dt>
    <dd>脚本语言，实现网页行为。</dd>
</dl>

 <dt>

dt，即definition term，定义名称。

 <dd>

dd，即definition description，定义描述。

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

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

相关文章

Android组件——Service

Android组件——Service

一、多任务实现的基本原理 默认情况下&#xff0c;同一个应用程序的所有组件都运行在同一个进程中&#xff0c;大部分应用程序是按这种方式运行的在具体应用中需要通过设置mainifest文件中组件的android:process属性&#xff0c;是该组件运行在不同的进程中元素也支持android:…
阅读更多...
strapi系列-如何创建一个定时任务-Cron Jobs

strapi系列-如何创建一个定时任务-Cron Jobs

Cron 是什么&#xff1f; Cron 有多种用途。 Cron Jobs 用于安排服务器上的任务运行。它们最常用于自动化系统管理或维护。然而,它们也与 Web 应用程序的构建相关。 Web 应用程序可能需要在各种情况下定期执行特定操作。 为什么使用 Cron &#xff1f; 定期进行的计划活动,C…
阅读更多...
【SpringMVC】异常处理

【SpringMVC】异常处理

目录 一、基本介绍 二、局部异常 三、全局异常 四、自定义异常 五、统一处理异常 六、异常处理流程 相关文章&#xff08;可以关注我的SpringMVC专栏&#xff09; SpingMVC专栏SpingMVC专栏一、基本介绍如果我们对异常不做任何处理的话&#xff0c;那么他就会返回500错误&…
阅读更多...
list底层实现

list底层实现

目录 引言 结构形式 整体框架 插入删除接口实现 析构函数、拷贝构造、赋值重载 const迭代器实现 取得链表长度的方式 迭代器前置\后置operator -- 以及operator-> 引言 list是非常常用的一个容器&#xff0c;数据结构是链表&#xff0c;数据空间是以链式结构存储的…
阅读更多...
QT中控件不满足要求那么为你的控件做“提升”吧

QT中控件不满足要求那么为你的控件做“提升”吧

我们在VisualStudio中例如VC或者C#中写一些个性化比较强的项目都会对控件有更高的要求&#xff0c;那么当我们的要求得不到满足时就需要考虑用到自定义控件了&#xff0c;其中自定义控件有两种方式&#xff0c;一种是完全重写&#xff0c;另一种简单的方法是继承自现有的控件。…
阅读更多...
指针深度解剖，从内存详细了解指针

指针深度解剖，从内存详细了解指针

目录 &#x1f695;第一组&#xff1a;一维数组 &#x1f68c;第二组&#xff1a;字符数组 &#x1f690;字符数组1.0 &#x1f68e;字符数组1.1 &#x1f691;字符数组2 &#x1f69a;字符数组3 &#x1f69c;第三组&#xff1a;二维数组 &#x1f697;在上次的博客之中我们…
阅读更多...
INVS里的DanglingWire的自动化清理实战

INVS里的DanglingWire的自动化清理实战

在上一讲中一起了解了INVS里的DanglingWire&#xff08;innovus中的DanglingWire&#xff08;悬垂线&#xff09;的理解和处理&#xff09;&#xff0c;常言道理论联系实际&#xff0c;在理解原理的基础上&#xff0c;那一定是要服务项目的&#xff0c;这篇后续火速跟进&#x…
阅读更多...
中国第一个 Apache 顶级开源项目的突围之路！

中国第一个 Apache 顶级开源项目的突围之路！

【CSDN 编者按】近些年开源大热&#xff0c;开源创业之风随之四起。作为近两年特别火的商业方向&#xff0c;开源创业者如何才能在一片红海中乘风破浪&#xff0c;在行业中占据一席之地&#xff1f;第一个由中国人主导贡献到 ASF 的顶级开源项目 Apache Kylin 做出了有效探索&a…
阅读更多...
字节序，主机字节序与网络字节序

字节序，主机字节序与网络字节序

&#x1f4cc;————本章重点————&#x1f4cc; &#x1f517;了解字节序的概念; &#x1f517;了解大小端的概念;&#x1f517;了解主机字节序和网络字节序的区别;&#x1f517;学习主机字节序和网络字节序相机转化的接口; ✨————————————✨字节序 概念&am…
阅读更多...
人工智能助力古彝文识别，推动传统文化传承

人工智能助力古彝文识别，推动传统文化传承

人工智能助力古彝文识别&#xff0c;推动传统文化传承0. 前言1. 古彝文1.1 古彝文介绍1.2 古彝文识别的重要意义1.3 古彝文识别的挑战2. 古彝文识别国内外研究进展3. 基于深度学习的古彝文识别3.1 深度学习简介3.2 基于深度学习的古彝文识别模型架构4. 古彝文识别进展与展望小结…
阅读更多...
HTML小游戏19 —— html5版开心斗地主小游戏（附完整源码）

HTML小游戏19 —— html5版开心斗地主小游戏（附完整源码）

&#x1f482; 网站推荐:【神级源码资源网】【摸鱼小游戏】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】本节教程我会带大家使用 HTML…
阅读更多...
【练习】Day05

【练习】Day05

努力经营当下&#xff0c;直至未来明朗&#xff01; 文章目录一、选择二、编程1. 跳跃游戏[贪心算法]2. 寻找重复数[注意思路&#xff01;]答案1. 选择2. 编程普通小孩也要热爱生活&#xff01; 一、选择 HASH 函数冲突处理方式不包括以下哪一项&#xff1a;&#xff08;&…
阅读更多...
YOLOv5源码详解——项目目录

YOLOv5源码详解——项目目录

YOLOv5 目录 .github .github相关&#xff0c;不重要 datasets 存放数据集,刚下载下来的源码是不包含这个文件夹的 classify 图像分类模块&#xff0c;包含以下4个文件 predict.py —— 图像分类预测脚本train.py ——图像分类训练脚本val.py —— 图像分类验证脚本tutorial.…
阅读更多...
Java开发学习(四十一)----MyBatisPlus标准数据层（增删查改分页）开发

Java开发学习(四十一)----MyBatisPlus标准数据层（增删查改分页）开发

一、标准CRUD使用 对于标准的CRUD功能都有哪些以及MyBatisPlus都提供了哪些方法可以使用呢? 我们先来看张图: 1.1 环境准备 这里用的环境就是Java开发学习(四十)----MyBatisPlus入门案例与简介中使用的环境 二、新增 在进行新增之前&#xff0c;我们可以分析下新增的方法…
阅读更多...
马蹄集 公式计算

马蹄集 公式计算

公式计算 难度&#xff1a;青铜 01 时间限制&#xff1a;1秒巴占用内存&#xff1a;64M 计算公式 (1/2)*(a*xc(ac)/(4*a)》 格式 输入格式&#xff1a;输入为整型x,a,空格分隔 #include <bits/stdc.h> using namespace std; int main() {int x, a;cin >> x >&g…
阅读更多...
1、JDK17安装

1、JDK17安装

目录 一、简介 二、安装步骤 三、在Windows 10系统中配置环境变量 四、运行jdk 一、简介 JDK全称Java SE Development kit(JDK)&#xff0c;即java标准版开发包&#xff0c;是Oracle提供的一套用于开发java应用程序的开发包&#xff0c;它提供编译&#xff0c;运行java程…
阅读更多...
二叉树【数据结构】【超详细，一学就会！！！】

二叉树【数据结构】【超详细，一学就会！！！】

目录 &#x1f4d6;1.什么是二叉树&#xff1f; &#x1f334;2.满二叉树和完全二叉树 ⛳2.二叉树的性质 &#x1f525;3.二叉树的创建与遍历 3.1 创建二叉树 3.2 前中后序遍历——递归和非递归 &#x1f3f9;4.二叉树的实现 1️⃣获取树中节点的个数 2️⃣获取叶子节点…
阅读更多...
MATLAB-三维插值运算

MATLAB-三维插值运算

MATLAB中是支持三维及三维以上的高维插值的。三维插值的基本原理与一维插值和二维插值是一样的&#xff0c;但三维插值是对三维函数进行的插值。在MATLAB中&#xff0c;使用interp3函数实现插值&#xff0c;其调用格式如下。vi interp3(x,y,z,v,xi,yi,zi) %返回值 vi是三维插值…
阅读更多...
2022ICPC杭州站

2022ICPC杭州站

A. Modulo Ruins the Legend 题目链接&#xff1a;Problem - A - Codeforces 样例1输入&#xff1a; 6 24 1 1 4 5 1 4样例1输出&#xff1a; 1 0 5样例2输入&#xff1a; 7 29 1 9 1 9 8 1 0样例2输出&#xff1a; 0 0 0题意&#xff1a;给你一个长度为n的数组a[]&#x…
阅读更多...
【NI Multisim 14.0原理图的设计——原理图分类】

【NI Multisim 14.0原理图的设计——原理图分类】

目录 序言 一、原理图的设计 &#x1f34a;知识点&#xff1a; 二、原理图分类 &#x1f349;1.平坦式电路 &#x1f349; 2.层次式电路图 序言 NI Multisim最突出的特点之一就是用户界面友好。它可以使电路设计者方便、快捷地使用虚拟元器件和仪器、仪表进行电路设计和…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023