HTML基础笔记笔记

最新推荐文章于 2024-10-16 20:49:18 发布
最新推荐文章于 2024-10-16 20:49:18 发布
阅读量190 收藏
点赞数
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42664306/article/details/123435856
版权

HTML语法

基本构成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keyword" content="我也不知道这是什么">
    <meta name="bug" content="如你所见">
    <title>这是个网页</title>
</head>
<body>

</body>
</html>

基本标签

<!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>

<!--水平线标签-->
<hr/>

<!--段落标签-->
<p>轻轻的我走了，</p>
<p>正如我轻轻的来；</p>
<p>我轻轻的招手，</p>
<p>作别西天的云彩。</p>
<!--换行标签-->
<br>
<p>那河畔的金柳，</p>
<p>是夕阳中的新娘；</p>
<p>波光里的艳影，</p>
<p>在我的心头荡漾。</p>
<br>
<p>软泥上的青荇，</p>
<p>油油的在水底招摇；</p>
<p>在康河的柔波里，</p>
<p>我甘心做一条水草！</p>
<br>

<p>
    那榆荫下的一潭，<br/>
    不是清泉，是天上虹；<br/>
    揉碎在浮藻间，<br/>
    沉淀着彩虹似的梦。<br/>
</p>
<p>
    寻梦？撑一支长篙，<br/>
    向青草更青处漫溯；<br/>
    满载一船星辉，<br/>
    在星辉斑斓里放歌。<br/>

</p>
    但我不能放歌，<br/>
    悄悄是别离的笙箫；<br/>
    夏虫也为我沉默，<br/>
    沉默是今晚的康桥！<br/>
</p>
<p>
    悄悄的我走了，<br/>
    正如我悄悄的来；<br/>
    我挥一挥衣袖，<br/>
    不带走一片云彩。<br/>
</p>

<!--粗体,斜体-->
<h1>字体样式标签</h1>
<p>粗体: <strong>I LOVE YOU</strong></p>
<p>斜体: <em>I LOVE YOU</em>  </p>

<!--特殊符号-->
<h1>特殊符号</h1>

空    格
<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>

&gt;
<!--大于号>-->
<br/>
&lt;
<!--小于号>-->
<br/>

&qint;
<br/>



</body>
</html>

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
    
</head>
<body>
<!--
    图像标签
    src     -- 图片地址
    ../     --上一层目录
    alt     --加载失败返回
    title   --鼠标悬停显示文本

-->
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2759603483,1319363293&fm=26&gp=0.jpg" alt="嘿嘿嘿" title="这是个图片??"  >
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2759603483,1319363293&fm=26&gp=0.jpg" alt="嘿嘿嘿" title="这是个图片??"  >
<br/>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2759603483,1319363293&fm=26&gp=0.jpg" alt="嘿嘿嘿" title="这是个图片??"  >
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2759603483,1319363293&fm=26&gp=0.jpg" alt="嘿嘿嘿" title="这是个图片??"  >

</body>
</html>

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>

<a href="top"></a>

<!--
    href        --必填,跳转链接
    target      --窗口在哪里打开
        _blank      --在新标签页打开
        _self       --在自己页面打开
-->
<a href="3.图像标签.html" target="_self">点击这里去看兔子</a>
<a href="https://www.bilibili.com" target="_blank">点击这里去bilibili</a>
<a href="3.图像标签.html">
    <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2759603483,1319363293&fm=26&gp=0.jpg" alt="嘿嘿嘿" title="这是个图片??"  >
</a>

<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2759603483,1319363293&fm=26&gp=0.jpg" alt="嘿嘿嘿" title="这是个图片??"  >
<br/>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2759603483,1319363293&fm=26&gp=0.jpg" alt="嘿嘿嘿" title="这是个图片??"  >
<br/>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2759603483,1319363293&fm=26&gp=0.jpg" alt="嘿嘿嘿" title="这是个图片??"  >
<br/>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2759603483,1319363293&fm=26&gp=0.jpg" alt="嘿嘿嘿" title="这是个图片??"  >
<br/>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2759603483,1319363293&fm=26&gp=0.jpg" alt="嘿嘿嘿" title="这是个图片??"  >
<br/>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2759603483,1319363293&fm=26&gp=0.jpg" alt="嘿嘿嘿" title="这是个图片??"  >
<br/>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2759603483,1319363293&fm=26&gp=0.jpg" alt="嘿嘿嘿" title="这是个图片??"  >
<br/>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2759603483,1319363293&fm=26&gp=0.jpg" alt="嘿嘿嘿" title="这是个图片??"  >
<br/>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2759603483,1319363293&fm=26&gp=0.jpg" alt="嘿嘿嘿" title="这是个图片??"  >
<br/>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2759603483,1319363293&fm=26&gp=0.jpg" alt="嘿嘿嘿" title="这是个图片??"  >
<br/>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2759603483,1319363293&fm=26&gp=0.jpg" alt="嘿嘿嘿" title="这是个图片??"  >
<br/>






<!--锚链接-->
<p>
    <a href="#top">回到顶部</a>
</p>
<p>
    <a href="3.图像标签.html#top">回到4页面顶部</a>
</p>




<!--功能性连接-->
<!--
    mailto:
    qq推广
-->




</body>
</html>

行内元素和块元素

  • 块元素

    • 无论内容多少,该元素独占一行
    • (p、h1-h6…)

  • 行内元素

    • 内容撑开宽度,左右都是行内元素的可以在排在一行
    • (a、strong、em….)

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>

<!--有序列表-->
<ol>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ol>

<!--无序列表-->

<ul>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容-->

<dl>
    <dt>姓名</dt>
    <dd>张三</dd>
    <dd>李四</dd>
    <dd>王五</dd>
</dl>


</body>
</html>
Miotsuki
关注
html如何定义mime类型的作用,HTML_MIME类型简介，MIME，多功能Internet 邮件扩充服 - phpStudy...
weixin_32048835的博客
06-21 642
MIME类型简介MIME，多功能Internet 邮件扩充服务，是Multipurpose Internet Email Extension的简写，它最初只被用于电子邮件系统，目的是为了在发送电子邮件时附加多媒体数据，让邮件客户程序能根据其类型进行处理。 后来MIME被应用于HTTP协议中，使得HTTP传输的不仅是普通的HTML文本，而且可以说多媒体数据类型。MIME类型是用来指定采用某种扩展名的...
python基础笔记html.rar
10-14
"python基础笔记html"这个压缩包文件显然是一个关于Python基础知识的学习资料，包含了HTML格式的笔记，可能涵盖了变量、数据类型、控制结构、函数、模块等核心概念。 1. **Python简介**：Python是由Guido van ...
语义化标签理解
weixin_30535843的博客
11-24 352
什么是语义化标签？ 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫更好地解析。 使用语义化标签有诸多好处： 因为像部分标签自带样式如h1系列，p等，使用语义化的标签可以在样式加载不出的时候有基本样式，而不显混乱 语义化标签也有利于SEO，语义化标签可以有利于爬虫抓取到网页，因为爬虫依赖于标签来确定上下文和各个关键字的权重。 语义化...
前端HTML基础笔记
Coder-thinking的博客
09-07 1078
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它通过一系列的元素（或称为标签）来定义网页的结构和内容。
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 2403
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
html5——前端笔记
qq_48721706的博客
09-02 2726
html笔记
HTML+CSS基础笔记
sq91fra的博客
01-13 1044
快速拾起HTML+CSS
HTML基础知识学习笔记
qq_57736391的博客
03-13 1394
HTML 元素以开始标签起始HTML 元素以结束标签终止元素的内容是开始标签与结束标签之间的内容某些 HTML 元素具有空内容（empty content）空元素在开始标签中进行关闭（以开始标签的结束而结束）大多数 HTML 元素可拥有属性。
HTML笔记（完结）
热门推荐
weixin_43872169的博客
07-24 1万+
HTML基础部分 基础元素（代码注释方法：ctrl+/ 文字注释方法：ctrl+shift+/） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body&...
＜电子幽灵＞前端第一件：HTML基础笔记下
2301_78388387的博客
07-15 2254
最基础的一部分HTML标签和已经以表格的形式呈现出来了；接下来，将是对一些重要的标签进行详细叙述，并简单介绍头部和CSS。
VUE3.0基础入门笔记
执笔写JAVA
06-01 2027
Vue 3 是一个流行的开源JavaScript框架，用于构建用户界面和单页面应用。 它带来了许多新特性和改进，包括更好的性能、更小的打包大小、更好的TypeScript支持、全新的组合式 API，以及一些新的内置组件。
2020html基础笔记
12-31
这份“2020html基础笔记”涵盖了HTML5的最新标准，旨在帮助初学者理解并掌握HTML的基本概念和语法。 1. HTML结构： HTML文档通常由<!DOCTYPE>声明、<html>元素、元素和元素组成。<!DOCTYPE>声明定义了文档类型，...
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
python基础笔记html_python教程_PyCharm_
09-30
**Python基础笔记HTML** 在学习Python编程语言的过程中，掌握基础知识是非常关键的。Python以其简洁、易读的语法和广泛的应用范围吸引了众多初学者。本笔记将带你走进Python的世界，了解其基本概念和常用操作。 ...
HTML基础笔记.md
08-13
HTML基础笔记
1、HTML笔记
最新发布
weixin_45871977的博客
10-16 518
前端学习笔记1-HTML笔记
《常见 HTML 标签和属性全解析》
一名资深Java工程师的技术分享
10-10 1207
在网页开发的世界里，HTML（超文本标记语言）就像是构建数字大厦的基石。它通过各种标签和属性来定义网页的结构、内容和样式。下面，让我们深入了解一些常见的 HTML 标签和属性。
position定位静态定位/绝对定位/相对定位
qq_74861982的博客
10-13 361
position定位静态定位/绝对定位/相对定位
HTML快速入门--第一节--五个基本标签
PangQinghua的博客
10-13 381
html，图片标签；超链接标签；列表标签；表格标签；表单标签
HTML与CSS基础学习笔记
“html和css笔记，包括HTML基础、XHTML注意事项、常用标签等内容，结合了书籍、网站和知名专家的资源，以及各种网页调试工具的介绍。” HTML与CSS是构建网页设计的基础，它们分别负责网页的结构和样式。HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值