HTML笔记

最新推荐文章于 2024-07-08 22:40:20 发布
最新推荐文章于 2024-07-08 22:40:20 发布
阅读量70 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43643183/article/details/115413104
版权

HTML笔记

1、什么是HTML

HTML：Hyper Text Markup Language（超文本标记语言）
超文本：包括视频、文字、图片等

1.1 W3C标准

World Wide Web Consortium(万维网联盟)

  1. 结构化标准语言（HTML、XML）
  2. 表现标准语言(CSS)
  3. 行为标准(DOM、ECMAScript)

1.2 HTML的基本结构

<!DOCTYPE html>

<html lang="en">

<!--head标签代表网页头部-->
<head>
    <!-- meta 描述性标签，用来描述我们网站的一些信息  -->
    <meta charset="UTF-8">
    <meta name="keywords" content="狂神说Java">
    <meta name="description" content="欢迎学习">
    <!--title标签代表网页标题    -->
    <title>Title</title>
</head>

<!--body标签代表网页主体-->
<body>
Hello,World!
</body>
</html>

在这里插入图片描述

2、网页标签

2.1网页基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>

<!--段落标签-->
<p>两只老虎，两只老虎,</p>
<p>跑得快，跑得快，</p>
<p>真奇怪！真奇怪！</p>

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

<!--换行标签-->
两只老虎，两只老虎,<br/>
跑得快，跑得快，<br/>
真奇怪！真奇怪！<br/>

<!--粗体  斜体-->
<h1>字体样式标签</h1>
粗体： <strong>i love you</strong>
斜体:  <em>i love you</em>

<br>
<!--特殊符号-->
空格
空 &nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
&gt;
<br/>
&lt;
<br/>
&copy;

</body>
</html>

2.2 图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--img学习
src：图片地址（必填）
     相对地址(推荐使用)，绝对地址
    ../   --上一级目录
 alt：图片名字（必填）
-->
<img src="../resource/image/1.jpg" alt="微信头像" title="悬停文字" height="300" width="300">
</body>
</html>

2.3 链接标签

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

<!--使用name作为标记-->
<a name="top">顶部</a>
<a name="down">底部</a>

<!--a标签
herf：必填，表示要跳转到那个界面
target :表示窗口在哪里打开
    _blank:在新标签中打开
    _self:在自己的网页中打开
-->
<a href="1、我的第一个网页.html" target="_blank">点击我跳转到页面</a>
<a href="https://www.baidu.com/ " target="_self">点击我跳转到百度</a>

<br>
<a href="1、我的第一个网页.html">
    <img src="../resource/image/1.jpg" alt="微信头像" title="悬停文字" height="300" width="300">
</a>

<!--锚链接
1、需要一个锚标记
2、跳转到标记-->
<a href="#top">回到顶部</a>

<!--功能性链接
邮件链接：mailto:
QQ链接：-->
<a href="mailto：3037601735@qq.com">请点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="你好，加我学习" title="你好，加我学习"/></a>

</body>
</html>

2.4 列表标签

<!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>
    <li>c/c++</li>
</ol>
<hr>
<!--无序列表-->
<ul>
    <li>Java</li>
    <li>python</li>
    <li>运维</li>
    <li>前端</li>
    <li>c/c++</li>
</ul>
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容-->
<hr>
<dl>
    <dt>学科</dt>

    <dd>java</dd>
    <dd>python</dd>
    <dd>linux</dd>
    <dd>c</dd>
</dl>

</body>
</html>

2.5 表格标签

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

2.6 媒体元素

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

<audio src="../resource/audio/萤火虫和你.mp3" controls autoplay></audio>
</body>
</html>

2.7 页面结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构学习</title>
</head>
<body>
<header>
    <h1>网页头部</h1>
</header>

<section>
    <h1>网页主体</h1>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>
</body>
</html>

3、iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>

<!--iframe 内联框架
src： 地址
w-h ：宽度，高度
-->
<!--<iframe src="https://www.baidu.com/" frameborder="0" width="1000px" height="800px"></iframe>-->
<iframe src="" name="hello" frameborder="0"></iframe>
<a href="1、我的第一个网页.html " target="hello">点击跳转</a>

<!--<iframe="//player.bilibili.com/player.html?aid=81109044&bvid=BV1YJ411a7dy&cid=138807880&page=1"
    scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">-->
<!--</iframe>-->
</body>
</html>

4、表单

4.1 表单基本元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单要提交的位置，可以input type="password"是网页，也可以是一个请求处理的地址
method :get ,post提交方式
        get方式提交:我们可以在url上看到我们提交的信息，不安全，但是高效
        post方式提交：比较安全，传输大文件
-->
<form action="1、我的第一个网页.html" method="get">
<!--文本输入框：<input type="text"
  value="学习使我快乐"   默认初始值
  maxlength="8"        最长能写几个字符
   size="30"           文本框的长度
-->
<p>名字：<input type="text" name="username" ></p>
<!--密码框：input type="password"-->
<p>密码：<input type="password" name="pwd"></p>

<!-- 单选框标签
  input type="radio"
  value：单选框的值
  name：表示组
   -->
    <p>性别
        <input type="radio" value="girl" name="sex">女
        <input type="radio" value="boy" name="sex">男

    </p>

<!--    多选框
input type="checkbox"
-->
<p>爱好:
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="code" name="hobby">代码
    <input type="checkbox" value="chat" name="hobby">聊天
</p>

    <!--    按钮
    input type="button"    普通按钮
    input type="image"     图像按钮
    input type="submit"    提交按钮
    input type="reset"     重置
    -->
    <p>按钮：
        <input type="button" name="btn1" value="点击变长">
        <input type="image" src="../resource/image/1.jpg">
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>

<!--下拉框，列表框-->
    <p>国家：
        <select name="列表名称" >
            <option value="选项的值">中国</option>
            <option value="选项的值">美国</option>
            <option value="选项的值" selected>印度				</option>
            <option value="选项的值">英国</option>
        </select>
    </p>
    
<!--文本域-->
    <p>反馈：
        <textarea name="textarea"  cols="10" rows="10">文本内容</textarea>
    </p>

<!-- 文件域
input type="file" name="files"
-->
    <input type="file" name="files" >
    <input type="button" value="上传" name="uplode">

<!--邮件验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>
    
<!--url-->
    <p>URL:
        <input type="url" name="url">
    </p>
    
<!-- 数字 -->
    <p>数字：
        <input type="number" max="100" min="0" step="2">
    </p>

<!-- 滑块-->
    <p>音量：
        <input type="range" min="0" max="100" step="2">
    </p>
    
<!--搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>

</form>

</body>
</html>

4.2 表单的应用

只读：readonly

禁用：disabled

隐藏域：hidden

<p>名字：<input type="text" name="username" value="admin" readonly ></p>
<input type="radio" value="boy" name="sex" disabled>男
<p>密码：<input type="password" name="pwd" hidden></p>

4.3 表单的初级验证

常用方式：

  1. placeholder 提示信息
  2. required 非空判断
<p>名字：<input type="text" name="username"  placeholder="请输入用户名"></p> 
<p>邮箱：<input type="email" name="email" required></p>
一朵无名花！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html笔记（完整版）
kaluomeng的博客
06-07 3579
标记 类型 译名或意义 作 用 备注 文件标记 ● 文件声明 让浏览器知道这是HTML文件 ● 开头 提供文件整体信息 ● 标题 定义文件标题，将显示于窗口标题 ● 本文 设计文件格式及内文所在 段落标记 ○ 说明标记 为文件加上说明，但不被显示 ○ 段落标记 为文字、图片、表格等之间留一空白行 ○ 换行标记 令文字、图片、表格等显示于下一行 ○ 水平线 插入一条水平线 ● 居中 令文字、图片、表格等显示...
印象笔记导入html笔记,Evernote Importer｜印象笔记导入
weixin_33978722的博客
06-17 1490
Evernote Importer｜印象笔记导入0.87MB. Updated 2020-08-01. Only supports Anki 2.1.x.DescriptionEvernote Importer 是一款将印象笔记导入自动化的 Anki 2.1 插件。用户文档和开发者文档参见本项目的 GitHub 主页。如您在使用中遇到问题或对插件功能有好的建议，欢迎通过以下两种方式之一与我联系：...
HTML笔记整理（个人笔记）
w3535222的博客
03-07 3599
个人笔记
html笔记
一个帅气潇洒的豆子
03-03 1万+
html笔记一、html简介 1、html是什么 Html是用来描述网页的一种语言。 (1)HTML 指的是超文本标记语言 (Hyper Text Markup Language) (2)HTML 不是一种编程语言，而是一种标记语言(markup language,标记语言是一套标记标签(markup tag));
html笔记pdf文件,罗剑锋的C++实战笔记(PDF+MP3+HTML完结)
weixin_29313547的博客
06-24 2098
课前导读 (2讲)开篇词 | 把C++从“神坛”上拉下来，这次咱这么学课前准备 | 搭建实验环境概论 (5讲)7 Z% B1 r) ?9 k01 | 重新认识C++：生命周期和编程范式02 | 编码阶段能做什么：秀出好的code style03 | 预处理阶段能做什么：宏定义和条件编译04 | 编译阶段能做什么：属性和静态断言&05 | 面向对象编程：怎样才能写出一个“好”的类？语言特性 ...
使用onenote记HTML笔记,如何在Windows 10中使用OneNote做笔记
weixin_33502772的博客
06-15 1091
Microsoft OneNote与Windows 10捆绑在一起。这意味着您不必购买Office套件的零售副本或支付Office 365订阅费用就可以使用OneNote记笔记。OneNote是一种数字笔记本，可在您工作时自动保存和同步您的笔记。使用OneNote，您可以执行以下操作：1.在笔记本中输入信息或从其他应用程序和网页中插入信息。2..做手写笔记或画出您的想法。3.使用突出显示和标签可以...
【HTML】HTML学习笔记（全）
Bitdancing的专栏
12-09 1万+
前端HTML学习笔记大全
kindle中html笔记,如何将kindle阅读器中的笔记、标注导出。，这几步你要了解
weixin_39671405的博客
06-23 1729
在Kindle上读过书后，却不知道怎么将阅读过程中做的笔记、标注导出？下面向大家介绍一种将kindle阅读器中的笔记导出的方法。工具/材料kindle数据线一条可上网电脑一台印象笔记账号(可选)方法/步骤 连接kindle01第一步，将kindle用数据线和电脑连接，并处于该模式，备用。如图好了，以上就是大致内容了，(END)方法/步骤2 进入网站01进入下图网站，因为经验无法加载外链02进入页面...
学习篇 html笔记
热门推荐
qq_46134337的博客
08-06 2万+
html笔记，仅限个人学习，如有雷同纯属巧合，如有不对的地方，还请留言矫正，谢谢
HTML5学习笔记
m0_61721166的博客
03-08 8910
一、网页 1.什么是网页 网站是指在因特网上根据一定的规则，使用 HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页” ，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html 后缀结尾的文件，因此将其俗称为HTML文件。 2.什么是HTML HTML指的是超文本标记语言(HyperTextMarkupLanguage)，它是用来描述网页的一种语言。HTML不
HTML笔记.pdf
07-14
"HTML笔记.pdf" HTML笔记.pdf是一个详细的HTML笔记，涵盖了HTML的基础知识、标签、属性、事件、表单、超链接、图像、表格、列表等内容。下面是从文件中提取的相关知识点： 1. HTML基础知识： * DOCTYPE html是...
HTML 笔记.zip
02-06
这个“HTML笔记.zip”文件显然包含了关于HTML的学习资料，可能包括了基础概念、语法、元素、属性、标签等内容，帮助初学者或进阶者巩固和理解HTML的核心知识。 在HTML中，我们通过一系列的标签来构建网页结构。例如...
前端html笔记
05-17
html笔记html笔记html笔记html笔记html笔记html笔记html笔记html笔记html笔记html笔记html笔记
HTML笔记.txt
02-25
自己总结的html笔记标签 非常适合初学者参考大牛复习 每个标签都标注了用途 需要的可以下载。
HTML实现图片查看与隐藏
你羡慕的生活都是你没熬过的苦。
07-08 494
你好呀，我是小邹。在网页设计中，提供一个直观且用户友好的图片查看功能是提升用户体验的重要一环。本文将详细介绍如何使用HTML、CSS和JavaScript来实现图片的查看与隐藏功能。通过本教程，你将学会如何让页面上的图片在点击时放大显示，以及如何通过再次点击或点击背景来关闭放大的图片。
[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式
qq_45831414的博客
07-08 364
【代码】[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式。
一文清晰了解HTML——简单实例
最新发布
weixin_73074505的博客
07-08 260
1.img中src有绝对路径、相对路径及网络路径之分。其中相对路径有../上一目录 ./当前目录 （./可省略） 命令。 【上述为网络路径】 2. img还有width与heigh，单位可为px（像素）一般屏幕分辨率为1024*768；可为百分比，意为占body长或高的百分之多少。
第一章节：HTML 基础
Toasten
07-08 879
Web（World Wide Web）即全球广域网，也称为万维网。我们常说的 Web端 就是网页端。网页 是构成网站的基本元素。网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。我们在浏览器上输入网址后，打开的任何一个页面，都是属于网页。浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera 等。
前端开发html笔记
05-30
前端开发中，HTML是一门用来制作网页的语言，它由标签组成，比如图片标签、链接标签、视频标签等。HTML文件是网页的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。前端人员通过书写HTML文件来制作网页...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值