【全栈开发】①HTML入门

zhiyog

已于 2024-09-21 14:01:46 修改

阅读量708

点赞数 23

分类专栏： java全栈文章标签： html 前端

于 2024-08-20 18:21:16 首次发布

本文链接：https://blog.youkuaiyun.com/2201_75317009/article/details/140764314

版权

前言

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

HTML只是一种标签，准确来说不是编程语言，内容比较简单。推荐使用vscode，Fitten Code 免费且支持 80 多种语言：Python、C++、Javascript、Typescript、Java、HTML等。

目前对于 HTML 语言，Fitten Code 支持在多种文本编辑器或 IDE 上使用。

一、HTML简介

HTML文档的后缀名 `.html `和` .htm`以上两种后缀名没有区别，都可以使用。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

简单入门：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello html</title>
</head>
<body>

<h1>标题</h1>
<p>段落</p>

</body>
</html>

基本标签：

<!DOCTYPE html> 声明为 HTML5 文档

<html> 元素是 HTML 页面的根元素

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

<title> 元素描述了文档的标题

<body> 元素包含了可见的页面内容

<h1> 元素定义一个大标题

<p> 元素定义一个段落

二、HTML基础

1. HTML 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

实例
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

2. HTML 段落

HTML 段落是通过标签 <p> 来定义的。

实例
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

3. HTML 链接

HTML 链接是通过标签 <a> 来定义的。

实例
<a href="https://www.runoob.com">这是一个链接</a>
在 href 属性中指定链接的地址

4. HTML 图像

HTML 图像是通过标签来定义的.

实例
<img src="/images/logo.png" width="258" height="39" />

5. 换行

<br>	换行，无结束标签

6. 属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。

<a href="http://www.runoob.com">这是一个链接</a>

class	 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	     定义元素的唯一id
style	 规定元素的行内样式（inline style）
title	 描述了元素的额外信息 (作为工具条使用)

7. 标题


标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。


<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。

<!-- 这是一个注释 -->

8. 段落

<p>	     定义一个段落
<br>	 插入单个折行（换行）

实例：
<p>这个<br>段落<br>演示了分行的效果</p>

9. 文本格式化

<b>这个文本是加粗的</b>
<strong>这个文本是加粗的</strong>
<big>这个文本字体放大</big>
<em>这个文本是斜体的</em>
<i>这个文本是斜体的</i>
<small>这个文本是缩小的</small>
这个文本包含<sub>下标</sub>
这个文本包含<sup>上标</sup>

这个文本是加粗的
这个文本是加粗的
这个文本字体放大
这个文本是斜体的
这个文本是斜体的
这个文本是缩小的
这个文本包含_下标
这个文本包含^上标

<pre>
此例演示如何使用 pre 标签
对空行和    空格
进行控制
</pre>

此例演示如何使用 pre 标签 
对空行和    空格
进行控制

<code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />

最低0.47元/天解锁文章