玄子HTML笔记

最新推荐文章于 2024-09-30 17:25:49 发布
最新推荐文章于 2024-09-30 17:25:49 发布
阅读量159 收藏
点赞数 1
分类专栏： # HTML+ CSS 文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62283694/article/details/128227549
版权

本文档为玄子复习HTML所记笔记，知识点不会描述过多，主要以注释为主。后期会专门出一篇文章详细讲解HTML和CSS知识。

一、HTML简介

1.1超文本标记语言

超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

中文名：超文本标记语言

英文名：HyperText Markup Language

二、HTML标签

2.1网页基本标签

<!DOCTYPE html>
<!--告诉浏览器使用规范-->
<html lang="en">
<head>
    <!--    网页头部-->
    <meta charset="UTF-8">
    <!--    描述性标签一般用来做seo-->
    <title>网页基本标签</title>
    <!--    网页标题-->
</head>
<body>
<!--网页主体-->
Change The Word!
</body>
</html>

2.2基础标签

<!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>
<!--段落标签-->
<hr>
<p>山园小梅·其一 <br>
    [ 宋 ] 林逋<br>
    原文 译文对照<br>
    众芳摇落独暄妍，占尽风情向小园。<br>

    疏影横斜水清浅，暗香浮动月黄昏。<br>

    霜禽欲下先偷眼，粉蝶如知合断魂。<br>

    幸有微吟可相狎，不须檀板共金尊。</p>
<!--换行标签-->
<hr>
<p>山园小梅·其一</p>
<p> [ 宋 ] 林逋</p>
<p> 原文 译文对照</p>
<p> 众芳摇落独暄妍，占尽风情向小园。</p>

<p> 疏影横斜水清浅，暗香浮动月黄昏。</p>

<p> 霜禽欲下先偷眼，粉蝶如知合断魂。</p>

<p> 幸有微吟可相狎，不须檀板共金尊。</p>
<hr>
<strong>粗体</strong>
<!--粗体标签-->
<br>
<em>斜体</em>
<!--斜体标签-->
<br>
<strong><em>加粗斜体</em></strong>
<!--样式标签可以嵌套使用-->
<hr>
<p>空 格</p>
<p>空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</p>
<!--特殊标签：空格要熟记-->
<p>大于号：> &gt;</p>
<p>小于号：< &lt;</p>
<p>分号："" &quot;&quot;</p>
<p>版权符号：&copy;</p>
<!--特殊符号不需要死记，用到百度即可-->
</body>
</html>

2.3图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<img alt="替换文本" height="500px" src="../../resources/image/玄子头像.png" title="标题" width="500px">
<img alt="替换文本" height="500" src="../resources/玄子头像.png" title="标题" width="500">
<!--
    src：图像索引路径，可以写相对路径或绝对路径
    ../：表示回退到上级目录，回退上两级目录就写两遍，然后指定路径下的文件
    alt：图片无法显示时的替换文字
    title：鼠标悬浮到图像时显示文字
    width：图像宽度默认像素px
    height：图像高度默认像素px
-->
</body>
</html>

2.4链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<a href="" name="xz">顶部</a>
<br>
<a href="03_图像标签.html" target="_blank" title="标题">点击在新窗口打开03</a>
<br>
<a href="03_图像标签.html" target="_self" title="标题">点击在本窗口打开03</a>
<!--
        href：跳转页面索引
        target：跳转方式
                _blank：新页面打开链接
                _self：此页面打开链接
        title：鼠标悬浮到图像时显示文字
-->
<hr>
<a href="03_图像标签.html" target="_blank" title="标题"><img alt="替换文本" height="500px"
                                                             src="../../resources/image/玄子头像.png" title="标题"
                                                             width="500px"></a>
<br>
<a href="03_图像标签.html" target="_blank" title="标题"><img alt="替换文本" height="500px"
                                                             src="../../resources/image/玄子头像.png" title="标题"
                                                             width="500px"></a>
<br>
<a href="03_图像标签.html" target="_blank" title="标题"><img alt="替换文本" height="500px"
                                                             src="../../resources/image/玄子头像.png" title="标题"
                                                             width="500px"></a>
<!--
        图像超链接直接在a标签中包含一个图像标签即可
-->
<br>
<hr>
<a href="#xz">点击跳转到顶部</a>
<!--
    锚链接：
            需要一个标记点和跳转点
            标记点声明：name 属性并赋值
            跳转点：href 属性 跳转 name 声明的标记点，name 值前面要加上 #

-->
<br>
<a href="mailto:y766706944@163.com">点击邮箱联系</a>
<!--功能链接-->
</body>
</html>

2.5行内元素&块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内元素&块元素</title>
</head>
<body>
<!--行内元素-->
<a href="#">a标签</a>
<a href="#">a标签</a>
<img alt="" height="20px" src="../../resources/image/玄子头像.png" width="20px">
<img alt="" height="20px" src="../../resources/image/玄子头像.png" width="20px">

<hr>
<!--块元素-->
<h3>标题标签</h3>
<h4>标题标签</h4>
<p>p标签</p>
<p>p标签</p>
</body>
</html>

2.6列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
<!--有序列表-->
<!--应用范围：试卷，排序-->
<ol>
    <li>JAVA</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>SQL</li>
</ol>
<hr>
<!--无序列表-->
<!--应用范围：导航，侧边栏-->
<ul>
    <li>JAVA</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>SQL</li>
</ul>
<hr>
<!--定义列表-->
<!--应用范围：网站底部导航栏-->
<dl>
    <dt>开发</dt>
    <dd>JAVA</dd>
    <dd>HTML</dd>
    <dd>CSS</dd>
    <dd>SQL</dd>
</dl>
</body>
</html>

2.7表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<table border="1px">
    <!--    border：边框尺寸-->
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
<!--
    table:表格标签
    tr：行标签
    td：列标签
-->
<hr>
<table border="1px">
    <tr>
        <td colspan="3">学生成绩</td>
        <!--        跨列-->
    </tr>
    <tr>
        <td rowspan="2">玄子</td>
        <!--        跨行-->
        <td>JAVA</td>
        <td>100</td>
    </tr>
    <tr>
        <td>HTML</td>
        <td>99</td>

    </tr>
    <tr>
        <td rowspan="2">玉玉诏</td>
        <!--        跨行-->
        <td>JAVA</td>
        <td>90</td>
    </tr>
    <tr>

        <td>HTML</td>
        <td>80</td>
    </tr>
</table>
</body>
</html>

2.8音视频标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音视频标签</title>
</head>
<body>
<!--视频标签-->
<video autoplay controls src="../../resources/video/G.E.M.邓紫棋-GLORIA.mp4"></video>
<!--音频标签-->
<audio autoplay controls src="../../resources/audio/G.E.M.邓紫棋-天空没有极限.flac"></audio>
<!--
    autoplay:自动播放
    controls：音视频控件
-->
</body>
</html>

2.9网页基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页基本结构</title>
</head>
<body>
<header>
    <h1>网页头部</h1>
</header>
<section>
    <h1>网页主体</h1>
</section>
<footer>
    <h1>网页底部</h1>
</footer>
<!--
    header：标题头部区域的内容（用于页面或页面中的一块区域）
    footer：标记脚部区域的内容（用于整个页面或页面的一块区域）
    section：Web页面中的一块独立区域
    article：独立的文章内容
    aside：相关内容或应用（常用于侧边栏）
    nav：导航类辅助内容
-->
</body>
</html>

2.10内联标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联标签</title>
</head>
<body>
<iframe frameborder="1" height="500px" name="xz" src="01_网页基本标签.html" width="500px"></iframe>
<!--
    frame border：内联框架边框尺寸
    name：标记名称
-->
<br>
<a href="02_基础标签.html" target="xz">点击跳转02</a>
<!--可以配合 a 标签的 target 属性改变内联框架跳转网页-->
<br>
<a href="03_图像标签.html" target="xz">点击跳转03</a>
</body>
</html>

2.11表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<form action="11_表单标签.html" method="get">
    <!--
          action：数据提交位置
          method：数据提交方式
                  get：提交数据url栏可见
                  post：提交数据url栏不可见
     -->
    <p>用户名：<input name="admin" type="text"></p>
    <!--    text：文本框 想要传递值需要设置 name 属性-->
    <p>密&nbsp;&nbsp;码：<input name="pwd" type="password"></p>
    <!--  password：密码框-->
    <p>按钮：
        <input type="button" value="按钮">
        <!--  可通过设置value属性改变提示文字-->
        <input height="40px" name="img" src="../../resources/image/玄子头像.png" type="image" width="40px">
        <input type="submit">
        <input type="reset">
        <!--
                input type="button"   普通按钮
                input type="image"    图像按钮
                input type="submit"   提交按钮
                input type="reset"    重置按钮
        -->
    </p>
    <p>性别：
        <input checked id="1" name="sex" type="radio" value="boy">男
        <!--        checked：默认选中-->
        <!--        name值要保持一致才能单选-->
        <label for="0"><input id="0" name="sex" type="radio" value="girl">女</label>
        <!--
             label：标签
                    提高鼠标交互性
        -->

    </p>
    <p>
        爱好：
        <input name="hobby" type="checkbox" value="Java">Java
        <input checked name="hobby" type="checkbox" value="HTMl">HTMl
        <!--        checked：默认选中-->
        <input name="hobby" type="checkbox" value="CSS">CSS
        <input name="hobby" type="checkbox" value="SQL">SQL
        <!--        name值要保持一致-->
    </p>
    <p>
        提交文件：
        <input name="fill" type="file">
    </p>
    <p>
        邮箱：
        <input name="email" type="email">
    </p>
    <p>
        URL：
        <input name="url" type="url">
    </p>
    <p>
        数字：
        <input max="100" min="0" name="num" step="5" type="number" value="0">
    </p>
    <p>
        滑块：
        <input max="100" min="0" name="range" step="10" type="range" value="50">
    </p>
    <!--
      max：允许最大值
      min：允许最小值
      step：步进长度
      value：默认初始值
-->
    <p>
        搜索：
        <input name="search" type="search">
    </p>
    <p>
        地区：
        <select name="select">
            <option value="hn">河南</option>
            <option value="hb">河北</option>
            <option selected value="hn">湖南</option>
            <!--           selected：默认选中 -->
            <option value="hb">湖北</option>
        </select>
    </p>
    <p>
        反馈：
        <textarea cols="20" name="txt" rows="4"></textarea>
        <!--
                cols：单宽
                rows：行高
                单位字符
        -->
    </p>
    <hr>
    <p>表单应用</p>
    <p>
        只读：
        <input name="readonly" readonly type="text" value="你好！">
        <!--        只能看，不能修改内容-->
    </p>
    <p>
        禁用：
        <input disabled name="disabled" type="reset" value="按钮">
        <!--        禁用此标签，不可使用-->
    </p>
    <p>
        隐藏：
        <input hidden name="hidden" type="text" value="你好！">
        <!--        隐藏标签但是可以设置默认值提交，用户看不到-->
    </p>
    <hr>
    <p>表单初级验证</p>
    <p>
        必填：
        <input name="required" required type="text">
        <!--        文本必填，否则无法提交-->
    </p>
    <p>
        提示：
        <input name="placeholder" placeholder="请输入账号！" type="text">
        <!--        文本框内的浅色提示文字，提醒用户输入内容-->
    </p>
    <p>
        正则：
        <input name="pattern" pattern="/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/" type="text">
        <!--       pattern：正则表达式，用到百度 -->
    </p>
</form>

</body>
</html>

2.12HTML总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML总结</title>
</head>
<body>
<a href="">点击跳转CSDN博客</a>
</body>
</html>

玄子2022年12月7日

玄子Share
关注
专栏目录
经典回合单机 - DOS版鹿鼎记
08-28
【大擒拿手】：在与康熙（小玄子）切磋后，海大富会传授给韦小宝这门擒拿技法。 【大悲千叶手】：这是海大富在得知小玄子身份后传授给韦小宝的高级武功。 【撒石灰】：在红玉庙外的小女孩处可以学到的特殊技能，用于...
html学习笔记
m0_65092564的博客
08-04 269
html的学习笔记
HTML学习笔记
weixin_48373085的博客
01-22 537
HTML标签
HTML笔记（详细）
weixin_43732485的博客
10-16 4484
HTML的标签分类 双标签：如<strong>标签的内容</strong> 语法：<开始标签> 标签内容 </结束标签> <strong>我要变粗</strong> <head></head>...... 单标签：<br/>单标签都是功能性的标签，例如换行等功能里面不需要添加内容 语法：<标签名 /> <br> <hr> ..
【HTML并不简单】笔记1-常用rel总结：nofollow、noopener、opener、noreferrer，relList
karshey的博客
09-30 506
在移动端开发中，页面左上角往往会有一个“返回”按钮，但如果用户是通过点击某个分享链接进入的，那么这个返回的逻辑就不对，因为并没有上一页，此时这个“返回”按钮显示为“主页”按钮更合适。在某列表页面，点击任意列表会进入详情页，然后希望再次返回（通过页面内链接，而非浏览器的“后退”按钮）到列表页的时候，页面依然定位在之前的滚动位置，但如果是从其他页面进入的，则滚动置顶。SEO中有个策略，如果一个权重很高的网站，直接外链一个权重不高的中小网站，同时没有设置rel=“nofollow”，那么这个中小网站的权重。
html空单元格的占位
最新发布
qq_17328759的博客
09-30 177
通过指定不为空的单元格所占表格宽度比例，实现空单元格的占位
第十四章：html和css做一个心在跳动，为你而动的表白动画
Json的知识梦工厂
09-22 879
在这个浪漫的季节，让我们一同感受爱的律动！无论你是在表白的前夜，还是想给心爱的他/她一个惊喜，这个跳动的爱心将是你最好的伴侣。它不仅仅是一个动画，而是你对TA深情款款的表达，是你心中那份执着与坚定。无论是初次相遇的心动，还是陪伴多年的默契，我们的心总在为彼此跳动。就像这颗炙热的爱心，随着每一次的跳动，传递着满满的温暖与期待。用这颗充满爱意的心，向TA传达你的心声，让爱在跳动中回响！20%：在动画的 20% 时，爱心扩大，并改变颜色。在这个特别的时刻，让爱在跳动中绽放！文档的主体，包含实际显示的内容。
【HTML|第1期】HTML5视频（Video）元素详解：从起源到应用
Commas的博客
09-27 1205
在当今的互联网世界，视频内容占据了极大的比重。无论是教育、娱乐还是信息传播，视频都是一个不可或缺的部分。而 HTML5 的 元素，就像一把万能钥匙，让开发者能够轻松地在网页上嵌入和播放视频。今天，我们就来一起探索 元素的奥秘。
HTML开发指南
邓邓子的博客
09-26 1560
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。作为万维网的核心语言之一，HTML定义了网页内容的结构和布局。自1991年首次发布以来，HTML已经经历了多次更新和改进，目前最新的版本是HTML5。HTML5引入了自定义数据属性，允许我们在元素上存储额外的信息，这些信息不用于页面显示，但可以通过JavaScript访问。自定义数据属性以data-开头，后面跟上一个或多个小写字母名称。
HTML粉色烟花秀
兔子王
09-21 8169
HTML语言实现的粉红色跨年烟花秀的完整代码。
HTML【知识改变命运】01基础介绍
2402_84062064的博客
09-26 487
HTML（HyperText Mark-up Language）即超文本标签语言(可以展示的内容类型很多)HTML 文本是由 HTML 标签组成的文本，可以包括文字、图形、动画、声音、表格、链接等HTML 的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
前端编程艺术（1）---HTML
lys20221113242的博客
09-30 709
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它描述了一个网站的结构骨架，使得浏览器能够展示具有特定格式的文本、链接、图片和其他内容。：主体元素，包含可见的页面内容，如文本、图片、视频、游戏、可播放的音频等。：头部元素，包含元信息，如字符集、页面标题、样式表链接、脚本链接等。标签：HTML标签用于标记文本，以便浏览器知道如何渲染它们。属性：提供关于元素的额外信息，通常在开始标签中规定。：根元素，包裹所有其他HTML元素。
Python 解析 html
matrixlzp的博客
09-24 741
假设有如下 html 文档：写一段 python 脚本，解析出里面的数据，包括经度维度。
HTML·第三章课后练习题
MortalTom的博客
09-26 471
【代码】HTML·第三章课后练习题。
CSS选择器的全面解析与实战应用
会思想的苇草i的博客
09-27 919
本文全面介绍了CSS选择器的种类与应用技巧，从基本的选择器如类型、类和ID选择器，到复合选择器如后代、相邻及通用兄弟选择器等，再到伪类和伪元素的选择器使用方法。通过详细的示例和最佳实践，帮助读者理解和掌握如何精确地定位页面元素，从而更高效地管理和优化CSS样式表，实现复杂的设计布局需求。
DOM Comment: Understanding the Power of HTML Comments in Web Development
wjs2024的博客
09-30 483
【代码】DOM Comment: Understanding the Power of HTML Comments in Web Development。
登录功能开发 P167重点
2303_81204446的博客
09-30 111
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 1578
Webpack 打包后文件过大，如何优化？
玄子springboot配置tomcat
05-10
玄子Spring Boot可以配置内嵌的Tomcat，也可以配置外部的Tomcat，以下是配置步骤： 1. 内嵌Tomcat配置 在pom.xml文件中添加Tomcat依赖： ``` <groupId>org.springframework.boot <artifactId>spring-boot-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值