HTML基本学习笔记

最新推荐文章于 2024-08-12 16:23:07 发布
最新推荐文章于 2024-08-12 16:23:07 发布
阅读量39 收藏
点赞数 1
文章标签： dreamweaver html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71641098/article/details/129562841
版权
本文介绍了HTML的基本结构，包括DOCTYPE声明、HTML、HEAD和BODY标签。讨论了常用的HTML标签，如标题、段落、换行、字体样式、特殊符号以及图像和链接的嵌入方法。还提到了行内元素、块元素、列表、表格、视频和音频元素在构建网页中的应用，并概述了网站页面结构的组成部分。
摘要由CSDN通过智能技术生成

1. HTML

  • Hyper Text Markup Language（超文本标记语言）

2. W3C

  • www（World Wide Web Consortium） 万维网联盟

  • 标准包括

    • 结构化标准语言（HTML，XML）

    • 表现标准语言（CSS）

    • 行为标准（DOM，ECMAScript）

3. IDE

  • Dreamweaver

  • IDEA

  • WebStorm

  • ......

4. HTML的基本结构

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>喋喋的第一个网页</title>
</head>
<body>
Hello,World!
</body>
</html>

  • <body>、</body>等成对的标签

5. 网页的基本信息

<!--DOCTYPE:告诉浏览器，我们要使用的规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!-- meta描述性标签，用于描述我们的网站的一些信息 -->
    <meta charset="UTF-8">
    <meta name=" keywords" content="喋喋，网页">
    <meta name="description" content="小白一个，试试看啦">
    <!--title标签代表网页题目名称-->
    <title>喋喋的第一个网页</title>
</head>
<!--body标签代表网页主体-->
<body>
Hello，World！
</body>
</html>

  • HTML网页注释快捷键（IDEA）ctrl+/

6. 网页的基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
​
<!--段落标签-->
<p>我如果爱你——</p>
<p>绝不像攀援的凌霄花，</p>
<p>借你的高枝炫耀自己；</p>
<p>我如果爱你——</p>
<p>绝不学痴情的鸟儿，</p>
<p>为绿荫重复单调的歌曲；</p>
<p>也不止像泉源，</p>
<p>常年送来清凉的慰藉；</p>
<p>也不止像险峰，</p>
<p>增加你的高度，衬托你的威仪。</p>
<p>甚至日光，</p>
<p>甚至春雨。</p>
​
<!--水平线标签-->
<hr/>
​
<!--换行标签-->
我如果爱你——<br/>
绝不像攀援的凌霄花，<br/>
借你的高枝炫耀自己；<br/>
我如果爱你——<br/>
绝不学痴情的鸟儿，<br/>
为绿荫重复单调的歌曲；<br/>
也不止像泉源，<br/>
常年送来清凉的慰藉；<br/>
也不止像险峰，<br/>
增加你的高度，衬托你的威仪。<br/>
甚至日光，<br/>
甚至春雨。<br/>
​
<!--粗体，斜体-->
<h1>字体样式标签</h1>
<p>粗体： <strong>I Love You</strong></p>
<p>斜体： <em>I Love You</em></p>
​
<!--特殊符号-->
​
<p>空   格</p>
<p>空&nbsp&nbsp&nbsp&nbsp格</p>
​
<p>大于号：&gt;</p>
<p>小于号：&lt;</p>
<p>版权符号：&copy;</p>
​
<!--
特殊符号记忆方式
​
&   ；
​
查百度
​
-->
​
</body>
</html>

  • 网页基本标签

    • 标题标签：h（1~6）+tab键-----><h1><h1/>

    • 段落标签：p+tab键-----><p><p/>

    • 换行标签：br+tab键----->

    • 水平线标签：hr+tab键-----><hr/>

    • 字体样式和标签：

      • 粗体：strong+tab键-----><strong><strong/>

      • 斜体：em+tab键-----><em><em/>

    • 注释

      • ctrl+/-----><!---->

    • 特殊符号

      • 空格：&nbsp；

      • 大于号：&gt；

      • 小于号：&lt；

      • 版权符号：&copy；

7. 图像标签

7.1 常见图像格式

  • jpg；

  • gif；

  • png；

  • bmp（位图）；

7.2 图片嵌入方式

7.3 示例代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--image标签学习
src：图片地址
    相对地址，绝对地址
    ../ --上一级目录
alt:图片名字（must填）
​
-->
<img src="../resource/image/1.png" alt="英语课件截图" title="悬停文字" width="700" height="500">
​
</body>
</html>

8. 链接标签

8.1 链接格式

8.2 示例代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签学习</title>
</head>
<body>
​
<!--用name作为标记-->
<a id="top">顶部</a>
​
​
​
<!--a标签
href：必填，表示要跳转到哪个页面
target：表示窗口在哪里打开
    _blank  在新页面中打开
    _self   在当前页面打开
-->
​
<p><a href="1.我的第一个网页.html" target="_blank">点击我，跳转到页面</a></p>
<p><a href="https://start.firefoxchina.cn/" target="_self">点击我，跳转到火狐页面</a></p>
​
​
<!--图像超链接-->
<a href="1.我的第一个网页.html">
    <img src="../resource/image/1.png" alt="英语课件截图" title="悬停文字" width="700" height="500">
</a>
​
​
​
<!--锚链接
1. 需要一个标记
2. 跳转到一个标记
​
-->
​
<a href="#top">回到顶部</a>
​
<a id="down">直达底部</a>
​
​
<!--功能性链接
邮件链接：mailto：
-->
<br/>
<a href="mailto:2969646037@qq.com">点击联系我</a>
​
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--image标签学习
src：图片地址
    相对地址，绝对地址
    ../ --上一级目录
alt:图片名字（must）
​
-->
<img src="../resource/image/1.png" alt="英语课件截图" title="悬停文字" width="700" height="500">
<br/>
    <!--页面间的跳转，到底部-->
<a href="4.超链接标签.html#down">跳转</a>
</body>
</html>

9. 行内元素和块元素

9.1 块元素

  • p；h1~h6;...

9.2 行内元素

  • a；strong；em；...

10. 列表

10.1 示例代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签的学习</title>
</head>
<body>
<!--有序列表
应用范围：试卷，问答...
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
</ol>
​
​
<!--无序列表
应用范围：导航，侧边栏...
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
</ul>
​
​
<!--自定义列表
dl：标签
dt：列表名称
公司网站底部
-->
<dl>
    <dt>学科</dt>
​
    <dd>java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C</dd>
​
</dl>
</body>
</html>

11. 表格标签

11.1 基本结构

  • 行列

  • 跨行（colsespan）

  • 跨列（rowspan）

11.2 示例代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
​
​
<!--表格Table
行 tr
列 td
​
-->
​
<table border="1px">
    <tr>
<!--跨列
colspan
-->
        <td colspan="4">1-1</td>
<!--        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>-->
    </tr>
    <tr>
<!--        rowsapn跨列-->
        <td rowspan="4">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td></tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
       </tr>
    <tr>
        <td>4-1</td>
        <td>4-2</td>
        <td>4-3</td>
​
    </tr>
    <tr>
        <td>5-1</td>
        <td>5-2</td>
        <td>5-3</td>
​
    </tr>
</table>
​
​
</body>
</html>

12. 视频和音频

  • 视频元素（video）

  • 音频元素（audio）

12.1 示例代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
src：资源路径
controls：控制条
autoplay：自动播放
​
-->
​
<video src="../resource/video/拜日式.mp4" controls autoplay></video>
<br/>
​
<audio src="../resource/audio/想见你_Someday_or_one_day（翻自_八三夭）-徐薇_赵晨霖-140505035.mp3" controls autoplay></audio>
</body>
</html>

13. 网站页面结构

13.1 页面结构分析

元素名描述
header标题头部区域的内容
footer标记脚部区域的内容
sectionWeb中独立区域
article独立文章内容
aside相关内容或应用（常用于侧边栏）
nav导航辅助类内容

13.2 页面模仿例图

13.3 示例代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构的学习</title>
</head>
<body>
<header><h2>网页头部</h2></header>
​
<section><h2>网页主体</h2></section>
​
<footer><h2>网页底部</h2></footer>
</body>
</html>

喋喋丫
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5学习笔记
m0_61721166的博客
03-08 8943
一、网页 1.什么是网页 网站是指在因特网上根据一定的规则，使用 HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页” ，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html 后缀结尾的文件，因此将其俗称为HTML文件。 2.什么是HTML HTML指的是超文本标记语言(HyperTextMarkupLanguage)，它是用来描述网页的一种语言。HTML不
黑马程序员html基本笔记
weixin_57140106的博客
06-25 2252
黑马程序员html个人笔记
黑马程序员 HTML5 学习笔记
susu的博客
07-14 2077
1.html语法规范2.html基本结构标签3.开发工具4.html常用标签5.html中注释和特殊字符
【HTML】HTML学习笔记（全）
热门推荐
Bitdancing的专栏
12-09 1万+
前端HTML学习笔记大全
前端之HTML学习笔记一
m0_53211178的博客
02-28 8178
目录 1.网页 1.1网页的概念 1.2HTML的概念 1.3网页的形成 2.常用的浏览器 3.web标准 3.1为什么需要web标准 3.2web标准的构成（重点） 1.网页 1.网页 1.1网页的概念 网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一"页"，通常是HTML格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成，通常我们看到的网页，常见以.htm或.
HTML学习笔记
m0_58761900的博客
09-16 2502
6.表格标签：table 可以给table加属性： border：加边框 th：加表头 width/height：控制高度宽度 cellspcing：去掉单元格空隙 cellpadding：内容距边框的距离，默认是1像素 align：表格相对于周围元素的对齐方式，比如align=“center” 7.列表标签： （1）无序列表：ul li （2）有序列表：ol li （3）自定义列表：dl（总标签）、dt（小标题）、dd（围绕标题来说明） 8.表单标签：form
HTML学习笔记(全)
weixin_63676550的博客
01-12 5667
HTML学习笔记 视频教程：https://b23.tv/LbTHmRE
Html 语法学习笔记二
勿忘初心
07-12 3406
1、图像标签（）和源属性（Src）        在 HTML 中，图像由 标签定义。         是空标签，意思是说，它只包含属性，并且没有闭合标签。        要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。        定义图像的语法是：        URL 指存储图像的位置。如果名为 "boat.gif" 的图像
HTML入门学习笔记+详细案例
Biteht的博客
04-22 1万+
✨HTML入门学习笔记+详细案例 作者介绍: 🎓作者:偷偷敲代码的青花瓷🐱‍🚀 👀作者的Gitee:代码仓库 ✨✨我和大家一样都是热爱编程✨,很高兴能在此和大家分享知识,希望在分享知识的同时,能和大家一起共同进步,取得好成绩🤳,今天和大家分享的章节是HTML基础,如果有错误❌,欢迎指正哟😋,咋们废话不多说,跟紧步伐,开始学习吧~😊 文章目录1.什么是HTML2.入门实例3.HTML标签详解3.1 标题标签3.2 段落标签3.3 换行标签3.4 格式化标签3.5 链接标签外部链接内部
Web前端学习笔记
jusw123456的博客
10-19 2353
html css分别是指：1、超文本标记语言，html是一种标记语言，它包括一系列标签；2、层叠样式表，css是一种用来表现HTML或XML等文件样式的计算机语言，CSS能够对网页中元素位置的排版进行像素级精确控制。即为浏览器把代码解析后的样子就是我们看到的网站。HTML：结构CSS：样式一个网站是由N多个网页组成的。
HTML学习笔记pdf版
07-19
### HTML学习笔记知识点详解 #### 一、HTML概述 **HTML**（HyperText Markup Language，超文本标记语言）是一种标准的编程语言，主要用于创建和结构化网页内容。它定义了网页上的各种元素及其布局方式，例如文本、...
html学习笔记
06-22
### HTML学习笔记 #### 一、属性 **1. `contenteditable` 属性** - **定义**: `contenteditable` 属性用于指定一个元素的内容是否可以被用户编辑。 - **值**: - `true`: 表示元素内容可编辑。 - `false`: 表示...
学习HTML5过程笔记
03-19
本笔记涵盖了HTML5的基础知识点，包括HTML的基本概念、标签的使用、浏览器的渲染引擎、Web标准、HTML标签的构成、页面结构、列表标签、表格标签、表单标签、选择器、样式、布局案例等，为学习HTML5提供了系统的知识...
html经典学习笔记.zip
11-01
"HTML经典学习笔记"是一个压缩包文件，包含了深入理解和学习HTML的重要资料。这个压缩包可能包含了一系列的章节、实例和练习，旨在帮助学习者掌握HTML的基本语法、元素以及如何创建动态和交互式的网页。 在HTML的...
html和css学习笔记
03-16
### HTML与CSS学习笔记 #### 一、基础知识概述 HTML（HyperText Markup Language）与CSS（Cascading Style Sheets）是构建网页的基础技术。通过学习HTML与CSS，我们可以创建结构化且美观的网页。 - **WWW (World ...
雪花算法（Snowflake Algorithm）
m0_63651681的博客
08-04 495
（Snowflake Algorithm）是一种分布式唯一ID生成算法，主要用于生成全球唯一的ID，广泛应用于分布式系统中，例如在数据库中作为主键。数据中心 ID 和工作机器 ID 的管理：需要合理分配和管理数据中心 ID 和工作机器 ID，以避免冲突。工作机器ID（Worker ID）： 用于标识同一数据中心下的不同工作机器，确保同一数据中心内的不同机器生成的ID也不会冲突。数据中心ID（Data Center ID）： 用于标识不同的数据中心，确保在不同的数据中心生成的ID不会冲突。
html--前端
m0_60274660的博客
08-07 368
只有body中的标签的内容才会输出到中断；如果要看script标签中的javascript代码的输出，需要按F12,点击Console查看。
html复习
m0_73280507的博客
08-12 631
Jsonp是前端程序员为了解决跨域问题，提出的一种解决拌饭，只支持get请求，不支持post请求，jnonsp是实现定义一个用于获取跨域响应数据的回调函数，通过没有同源策略限制的script标签发起的一个请求，将回调函数的名称放到这个请求的query参数中，然后服务端返回这个回调函数的执行，并将需要响应的数据放到回调函数的参数里，前端的script标签请求到这个执行的回到函数中立马执行，于是就拿到了执行的响应数据。控制首页链接数量， 网站首页不能有太多的链接，也不能有太少的链接。外链选择，友站友情链接。
htmlToPdf
最新发布
weixin_46087919的博客
08-12 257
htmlToPdf
HTML学习笔记：常见错误与修复
“html学习笔记，包括html，javascript，css的学习与工作经验总结，更新至2013-6-15。” 在HTML、JavaScript和CSS的学习过程中，了解并掌握常见的问题和解决方案是至关重要的。这份学习笔记主要涵盖了这些方面，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值