HTML入门

已于 2024-06-22 19:32:01 修改
阅读量838 收藏 20
点赞数 23
文章标签： html 前端
于 2024-02-07 16:57:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79742908/article/details/136065012
版权
本文详细介绍了HTML5的基础知识，包括DOCTYPE声明、HTML5的基本结构（如html、head、body、title、meta等）、标题标签、段落、换行、水平线、图片、超链接、文本格式、列表（有序和无序）、表格、表单以及HTML5新增的header、nav等元素。
摘要由CSDN通过智能技术生成

1.HTML5简介与基础骨架

1.1 HTML介绍

HTML5是用来描述网页的一种语言。别称为超文本标记语言。用HTML5编写的文件后缀以.html结尾。

HTML是一种标记语言，标记语言是一套标记标签。标签是有尖括号包围的关键字，如<html>。

标签的两种表现形式：

  1. 单标签，如<img>
  2. 双标签，如<html> </html>

1.2 HTML5的DOCTYPE声明

DOCTYPE是 document type（文档类型）的缩写。<!DOCTYPE html>是HTML5的声明位于文档的最前面，处于标签之前。他是网页必备的组成部分，避免浏览器的怪异模式。

 1.3 HTML5的基本骨架

HTML5的基本骨架由<html>标签，<head>标签，<meta>标签，<title>标签，<body>标签组成。

1.3.1 html标签

用于定义HTML文档，其他的元素要包裹html标签之中，HTML标签限定了文档的开始和结束。

1.3.2 head标签

head标签用于定义文档的头部。描述文档的各种属性和信息，包括文档的标题，在Web中的位置和其他文档的关系等。

1.3.3 body标签 

 body标签用于定义文档的主体，包含文档的所有内容（如文本，图像，表格，列表，超链接等等。）标签中的内容会直接在页面上显示出来。

 1.3.4 title标签

用于定义文档标题，他显示在浏览器窗口的标题栏或状态栏上，<title>标签是<head>标签中唯一必须要求包含的东西。<title>的增加有利于对网站内容调整，满足搜索引擎的排名需求。

1.3.5 meta标签

meta标签用于描述一个HTML网页的属性，关键词等，例如charset="UTF-8"，是说当前使用UTF-8的编码格式。

 

 2. 标签

2.1 标题

2.1.1 标签的定义

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

<h1>定义最大的标签，<h6>定义最小的标题。

生成h1~h6快捷键：h$*6

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
</head>
<body>
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
</body>
</html>

 2.1.2 标题标签位置摆放

标题默认位置为居左，可以通过在标签中添加属性：align="left/center/right"改变标题位置。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
</head>
<body>
<h1 align="left">标题一</h1>
<h2 align="center">标题二</h2>
<h3 align="right">标题三</h3>
</body>
</html>

2.2  段落，换行，水平线

2.2.1 段落

段落用<p>标签定义

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
</head>
<body>
<p>哈哈哈，你算是踢到棉花了！</p>
</body>
</html>

 2.2.2 换行

在不产生新段落的情况下进行换行，用<br>标签。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
</head>
<body>
<p>哈哈哈<br>你算是踢到棉花了！</p>
</body>
</html>

 

2.2.3 水平线

<hr/>标签在HTML页面中创建水平线。

<hr color="" size="" width="" align=""/>

 属性：

  • color：设置水平线的颜色
  • size：设置水平线高度
  • width：设置水平线的长度
  • align：设置水平线的对齐方式（默认居中），可取值left/right
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
</head>
<body>
<p>哈哈哈<br>你算是踢到棉花了！</p>
<hr color="blue" size="5px" width="500px" align="left"/>
</body>
</html>

2.3 图片

<img>标签用于定义HTML页面中的图片。

<img src="" alt="" width="" height="" title="">

属性：

  • src：路径（图片地址与名字）
  • alt：规定图像的代替文本（当图片无法显示时）
  • width：规定图像的宽度
  • height：规定图像的高度
  • title：鼠标悬停在图片上给予提示

图片路径详解

1. 绝对路径

绝对路径时电脑的盘符储存与访问的具体地址

如：C:\Users\admin\Pictures\Saved Pictures\1.jpg

<img src="C:\Users\admin\Pictures\Saved Pictures\1.jpg">

2. 相对路径

两者相对关系，两者在同一路径下可以直接访问

  • 子级关系：/
  • 父级关系：../
  • 同级关系：./
3.网络路径

具体的网络地址：https://img.zcool.cn/community/0192835a93865aa8012045b3279df3.jpg@2o.jpg

<img src="https://img.zcool.cn/community/0192835a93865aa8012045b3279df3.jpg@2o.jpg">

https://img.zcool.cn/community/0192835a93865aa8012045b3279df3.jpg@2o.jpg">

2.4 超文本连接

HTML中使用<a>标签来设置超文本连接

超链接可以是一个字，一个词，或者一组词，也可以是图像，点击这些内容跳转到新的文档或者当前文档中的某个部分。

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

属性：

在标签<a>中使用了href属性来描述链接的地址

默认情况下，链接将以一下形式出现在浏览器中：

  • 一个未访问过的链接显示未蓝色字体并带有下划线。
  • 访问过的链接显示为紫色。
  • 点击链接时，链接显示为红色并带有下划线。

2.5 文本

常用文本标签：

  • <em>：定义着重文字
  • <b>：定义粗体文本
  • <i>：定义斜体文字
  • <strong>：定义加重语气
  • <del>：定义删除字
  • <span>：元素没有特定含义
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
</head>
<body>
<em>em</em>
<b>b</b>
<i>i</i>
<strong>strong</strong>
<del>del</del>
<span>span</span>
</body>
</html>

2.6 列表标签

2.6.1 有序列表

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
</head>
<body>
<ol>
    <li>百度</li>
    <li>阿里巴巴</li>
    <li>网易</li>
</ol>
</body>
</html>

有序列表的type属性

<ol>的type属性拥有的选项

  • "1"  表示列表用的数字标号（1，2，3...）
  • "a"  表示列表项目用小写字母标号（a，b，c...）
  • "A"  表示列表项目用大写字母标号（A，B，C...）
  • "i"   表示列表项目用小写罗马数字标号（i，ii，iii...）
  • "l"   表示列表项目用大写罗马数字标号（l，ll，lll...)
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
</head>
<body>
<ol type="1">
    <li>百度</li>
</ol>
<ol type="a">
    <li>阿里巴巴</li>
</ol>
<ol type="A">
    <li>网易</li>
</ol>
<ol type="i">
    <li>字符跳动</li>
</ol>
<ol type="I">
    <li>哔哩哔哩</li>
</ol>

</body>
</html>

 有序列表镶嵌
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
</head>
<body>
<ol>
    <li>蔬菜</li>
    <li>水果
        <ol>
            <li>苹果</li>
            <li>香蕉</li>
        </ol>
    </li>
</ol>
</body>
</html>

2.6.2 无序列表

列中项使用粗体原点（典型小黑圆圈）进行标记，无序列表始于<ul>标签，每个列表项始于<li>标签。

快捷键：ul>li*3（数字根据自己需要的<li>的数量修改）

<ul>
    <li>蔬菜</li>
    <li>水果</li>
</ul>
无序列表的type属性

<ul>的type属性拥有的选项

  • "disc"  默认实心圆
  • "circle"  空心圆
  • "square"  小方块
  • "none"  不显示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
</head>
<body>
<ul type="disc">
    <li>百度</li>
</ul>
<ul type="circle">
    <li>阿里</li>
</ul>
<ul type="square">
    <li>网易</li>
</ul>
<ul type="none">
    <li>腾讯</li>
</ul>
</body>
</html>

无序列表嵌套
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
</head>
<body>
<ul>
    <li>蔬菜</li>
    <li>水果
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
        </ul>
    </li>
</ul>
</body>
</html>

2.7 表格

表格标签

  • 表格：<table>
  • 行：<tr>
  • 单元格（列）：<td>

快捷键：table>tr*2>td

    <table>
        <tr>
            <td>网易</td>
            <td>腾讯</td>
        </tr>
        <tr>
            <td>百度</td>
            <td>阿里</td>
        </tr>

    </table>

 

表格属性

  • border：设置表格的边框
  • width：设置表格的宽度
  • height：设置表格的高度
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
</head>

<body>
    <table border="1" height="100px" width="100px">
        <tr>
            <td>网易</td>
            <td>腾讯</td>
        </tr>
        <tr>
            <td>百度</td>
            <td>阿里</td>
        </tr>

    </table>
</body>

</html>

单元格合并 

属性：

  • 水平合并：colspan
  • 垂直合并：rowspan
水平合并

colspan="2"为水平合并两个单元格

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
</head>

<body>
    <table border="1" height="100px" width="300px">
        <tr>
            <td>单元格</td>
            <td colspan="2">单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>

    </table>
</body>

</html>

垂直合并
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
</head>

<body>
    <table border="1" height="100px" width="300px">
        <tr>
            <td>单元格</td>
            <td rowspan="2">单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>

    </table>
</body>

</html>

2.8 Form表单

 表单在Web网页中用来给用户填写信息，从来采取用户信息，使网页具有交互的功能。所有的用户输入的内容的地方都是用表单来写，如登录，注册，搜索框...

表单是由容器和控件组成的，一个表单一般应该包含用户填写信息的输入框，按钮等，这些输入框，按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。

<form action="url" method="get/post" name="myform"></form>

 属性：

  • action：服务器地址
  • name：表单名称
  • method中get和post的区别
  1. 数据提交方式，get把提交的数据url可以看到，post看不到
  2. get一般用于提交少量数据，post用于提交大量数据

表单元素

一个完整的表单包含三个基本组成部分：

  • 表单标签
  • 表单域
  • 表单按钮
   <form>
    <input type="text">
    <button>提交</button>
   </form>
文本框
<form>
    <input type="text">
</form>
密码框
<form>
    <input type="password">
</form>
提交按钮
  <form>
    账号：<input type="text">
    <br>
    密码：<input type="password">
    <br>
    <input type="submit" value="登录">
  </form>

 2.9 块元素与行内元素（内联元素）

块级元素内联元素
块元素会在页面上独占一行（自上向下垂直排列）行内元素不会单独占页面中的一行，只占自身大小
可以设置width，height属性行内元素设置width，height属性无效
一般块级元素可以包含行内元素和其他元素一般内联元素包含内联元素不包含块级元素

常见的块级元素

div，form，h1~h6，hr，p，table，ul等

常见的内敛元素

a，b，em，i，span，strong等

行内块级元素（特点：不换行，能识别宽高）

button，img，input等

3.HTML5新增标签

  • <header></header>头部
  • <nav></nav>导航
  • <section></section>定义文档中的节，如章节，页眉，页脚
  • <aside></aside>侧边栏
  • <footer></footer>脚部
  • <article></article>代表一个独立的，完整的相关内容块，例如一篇完整的论坛帖子
沼泽里的森林
关注
  • 23
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
HTML入门（详细）
qq_63525426的博客
05-03 2万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 22万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
HTML入门标签
10-11
比较详细的HTML标签，常用到的标签都包括在内了。新手可以看看
html入门学习.zip
01-01
html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习 html入门学习html...
HTML 入门资料Demo
01-23
HTML 入门手册(一)：https://shuaici.blog.csdn.net/article/details/135680716 HTML 入门手册(二)：https://shuaici.blog.csdn.net/article/details/135698613 HTML 英文全称 " HyperText Mark-up Language " , ...
HTML入门学习及笔记.zip
01-01
HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记 HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记 HTML入门学习及笔记HTML入门学习及笔记HTML入门学习及笔记...
HTML入门学习的源代码.zip
01-01
HTML入门学习的源代码HTML入门学习的源代码HTML入门学习的源代码 HTML入门学习的源代码HTML入门学习的源代码HTML入门学习的源代码 HTML入门学习的源代码HTML入门学习的源代码HTML入门学习的源代码 HTML入门学习的源...
HTML2048小游戏（最新版）
最新发布
w11111xxxl的博客
07-17 405
比上一篇文章的2048小游戏更好一点。
高频面试题-HTML
CSDN20221005的博客
07-15 906
离线存储是基于 .appcache ⽂件的缓存机制(不是存储技术)实现的，通过这个⽂件上的解析清单离线存储资源，这些资源就会像 cookie ⼀样被存储了下 来。块级元素有： div p 列表标签(ul ol li dl dt dd) 标题标签(h1 h2 h3 h4) 表格标签(table)空元素： <br> <hr> <img> <input> <link> <meta>->新增了语义化标签(header/footer/nav/asid)->新增了表单增强控件(data/time/email/url)
HTML-VUE页面调用android 客户端网络请求并返回数据
weixin_42504805的博客
07-15 201
确保WebView的设置允许JavaScript接口，并且WebView加载的页面有权限调用这些接口。这样，当用户在Vue页面中点击按钮时，会通过WebView调用Android客户端的网络请求方法，然后将结果回调到Vue页面中显示。在Html-- Vue页面调用Android客户端网络请求并返回数据，通常需要通过WebView与Android客户端的JavaScript接口进行交互。2.在WebView中设置该接口。
JavaWeb---HTML
mmmmazhiyuan的博客
07-14 798
HTML是Hyper Text Markup Language的缩写。意思是超文本标记语言。它的作用是搭建网页结构，在网页上展示内容HTML5 是HyperText Markup Language 5 的缩写，HTML5技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。与传统的技术相比，HTML5 的语法特征更加明显，并且结合了SVG的内容。
HTML2048小游戏
w11111xxxl的博客
07-17 924
游戏控制方向四个按钮，我就不写样式了 源代码在效果图片后面 是可以正常玩的。
Html_Css问答集(8)
白话魔法师
07-16 815
html与css学习中的一些疑问，问答中轻松获取知识。
如何理解HTML语义化以及它的重要性体现在哪里
2402_84885073的博客
07-14 726
综上所述，HTML语义化对于提升网页的SEO、无障碍访问性、代码可读性可维护性、减少CSS和JavaScript依赖、支持多终端设备的浏览器渲染以及提高网站的专业性和可信度等方面都具有重要意义。因为通过合理的标签选择和结构安排，可以使得网页在没有或较少CSS和JavaScript的情况下也能够呈现出清晰的结构和基本的布局效果。HTML语义化是指使用具有明确含义的HTML标签来构建网页内容的过程，这些标签不仅描述了内容的结构，还传达了内容的含义。这有助于提高网页在搜索引擎中的排名，增加网页的曝光度和流量。
前端开发体系+html文件详解
m0_63432840的博客
07-14 542
target：指定超文本资源路径打开方式 _self(本窗口内打开) _blank(新窗口内打开) _parent(跳出父级窗口) _top（跳出顶级窗口)controls="true"手动控制音频播放，也可换为autoplay（进入网页自动播放）或loop（循环播放）width="500px" height="300px"可改变视频窗口大小但不会改变原视频外框的形状。此时的a标签为为锚点，如果要跳到另一个同目录页面的一个指定位置，在href后加其他页面路径。优先级：行内样式>内部样式=外部样式。
html（抽奖设计）
2301_81704123的博客
07-13 476
可以根据自己的喜好设计抽奖内容，或者修改颜色。
HTML入门：设置页面属性与背景
在HTML入门学习中，设置页面属性是网页设计的基础环节。页面属性主要涉及背景颜色和背景图像的设定，这可以通过标记符的属性来实现。例如，使用`颜色名称">`可以设置网页的背景颜色，颜色名称可以是预定义的颜色名或...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值