HTML笔记整理

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

网页基本信息

<!--DOCTYPE: 告诉浏览器，我们要用什么规范-->
<!DOCTYPE html>

<html lang="en">

<!-- head标签代表网页头部-->
<head>
<!--    meta描述性标签，它是用来描述我们网站的一些信息-->
<!--    meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="java">
    <meta name="description" content="java学习">

<!--    title网页标题-->
    <title>第一个标题</title>
</head>

<!-- body标签代表网页主体-->
<body>

</body>
</html>

网页基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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>

<!--换行标签-->
明月几时有，把酒问青天。<br>
不知天上宫阙，今夕是何年？<br>
我欲乘风归去，又恐琼楼玉宇，<br>
高处不胜寒。<br>
起舞弄清影，何似在人间！<br>

转朱阁，低绮户，照无眠。<br>
不应有恨，何事长向别时圆？<br>
人有悲欢离合，月有阴晴圆缺，<br>
此事古难全。<br>
但愿人长久，千里共婵娟<br>

<!--粗体 斜体-->
<h1>字体标签样式</h1>
<strong>粗体</strong>
<em>斜体</em>
<br>
<!--特殊符号-->
空 &nbsp; 格
<br>
&gt;
<br>
&lt;
&copy;版权所有
</body>
</html>

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="../resources/image/img.png" alt="小葵" title="悬停文字" width="300">
</body>
</html>

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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

a标签
href: 必填，表示要跳转到那个页面
target: 表示窗口在哪里打开
    _blank   在新标签中打开
    _self   在自己的网页中打开
-->

<a href="demo1.html">页面一</a>
<a href="https://www.baidu.com">百度</a>

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

<!--
功能性链接
邮件链接： mailto
-->
<a href="mailto:123123123@qq.com">点击联系我</a>
</body>
</html>

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>java</li>
    <li>sss</li>
    <li>ddd</li>
    <li>ddd</li>
    <li>aaa</li>
</ol>
<!--无序链表-->
<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
    <li>445</li>
    <li>55</li>
</ul>
<!--
自定义列表
dl: 标签
dt: 列表名称
dd: 列表内容
-->
<dl>
    <dt>11</dt>
    <dd>aa</dd>
    <dd>aa</dd>
    <dd>aa</dd>
    <dd>aa</dd>
    <dd>aa</dd>
</dl>
</body>
</html>

表格应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
表格table
行 tr
列 td
-->

<table border="1px">
    <tr>
<!--        colspan跨列-->
        <td colspan="4">11</td>
    </tr>
    <tr>
<!--        rowspan跨行-->
        <td rowspan="2">11</td>
        <td>11</td>
        <td>22</td>
        <td>33</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
</body>
</html>

媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
音频和视频
src: 资源路径
controls: 控制条

-->
<video src="mda-nbedg0chqg93cj48.mp4" controls autoplay></video>
<audio src="95144018(95144018)_20211106153910.mp3" controls autoplay></audio>
</body>
</html>

页面结构分析

  1. header 标题头部区域的内容(用于页面或页面中的一块区域)
  2. footer 标记脚步区域的内容(用于整个页面或页面的一块区域)
  3. section Web页面中的一块独立区域
  4. article 独立的文章内容
  5. aside 相关内容或应用(常用于侧边栏)
  6. nav 导航类辅助内容

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
from表单
action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
method： post,get 提交方式
    get 方式提交：我们可以在url中看的我们提交的信息，不安全，高效
    post : 比较安全，传输大文件
-->
<form action="" method="get">
<!--    文本输入框-->
    <input type="text" name="username"><br>
    <input type="password" name="pwd">

    <p>
        <input type="submit">
        <input type="reset">
    </p>
      <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

    <p>
        邮箱：
        <input type="email" name="email">
    </p>
    <p>
        url:
        <input type="url" name="url">
    </p>
    <p>
        数字：
        <input type="number" name="num" max="100" min="0" step="1">
    </p>
    <p>
        滑块：
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>
    <p>
        搜索：
        <input type="search" name="search">
    </p>
</form>
</body>
</html>

表单初级验证

  1. placeholder 提示信息
  2. required 非空判断
  3. pattern 正则表达式
安逸了小葵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
菜鸟笔记——html整理
C.C的博客
04-09 7161
菜鸟笔记——html整理 1.常用标签 <hr/> 水平线标签 <!-- This is a comment --> 注释 //多行注释可以设置快捷键 <big> 定义大号字。 <small> 定义小号字。 <i> 定义斜体字。italic <em> 定义着重文字。emph // I是Italic...
html整理笔记
weixin_43775143的博客
06-30 108
花了一些时间重新复习了html, 按照自己的思路整理了一下, 内容仅供参考 SVG的内容在博 客 园的文章里面(这里好像不能直接在文章里插入SVG) ????html复习笔记 - nandHyf - 博客园 先放一个图片版吧 工具使用/导出: FreeMind ...
html css整理笔记
Echo的博客
11-25 537
修改placeholder提示的样式： 1.除IE外通用写法 类名或标签名::placeholder {color: red;} 2.加兼容前缀写法 css超出一行显示省略号： 给定宽度(width:100px)、 超出隐藏（overflow:hidden）、 强制在同一行显示（white-space: nowrap）、 省略号（text-overflow:ellipsis） ——常见字体单位...
HTML CSS整理笔记
热门推荐
Lin16819的博客
12-12 3万+
常见字体单位： 1.em 移动端常用的字体尺寸单位，说白em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5。 但当div进行嵌套时，em始终按当前div继承的字体大小来缩放。 2.rem r是root的意思，即相对于根节点html的font-size进行缩放，当有嵌套关系时，嵌套关系的元素的字体大小始终按照根节点的字体大小...
张鹏老师html笔记整理
12-15
HTML，全称HyperText Markup Language，即超文本标记语言，是一种用于创建网页的标准标记语言，而非编程语言。它主要用于描述网页的内容和结构，使浏览器能够理解并呈现网页内容。HTML文档通常由一系列的元素（标记...
html知识点笔记整理
03-29
HTML、CSS、JavaScript 基础知识点笔记 HTML HTML（HyperText Markup Language）是一种超文本标记语言，用于网页的创建和结构化。HTML 由标签组成，标签可以分为单标签和双标签。单标签只有一个组成，例如：` `...
HTML基础笔记的整理
03-09
HTML，全称Hyper Text Markup Language，是用于创建网页的标准标记语言。HTML的“超文本”概念体现在它不仅可以包含纯文本，还能嵌入图像、音频、视频等多媒体元素，同时通过超链接实现页面间的跳转，形成全球信息...
html + css 学习笔记整理.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
html笔记（完整版）
秦哥的博客
08-09 2万+
目录 码仙励志 背景颜色 bgcolor 注释 空格  版权符© 网页标题 标题标记 网页编码 设置连接颜色link、alink、vlink 强制换行标记 换段落标记 居中对齐白标记 预格式化标记 列表项目标记 无序列表标记 有序列表标记 定义型列表 水平分割线标记 分区显示标记 字体设置标记 粗字体标记 斜字体标记 文字下标字体标记​ 文字上标字体...
html--图片变化
2301_81140745的博客
07-20 426
2.点击上传图片会有变化。
黑马JavaWeb企业级开发（知识清单）01——前端介绍，HTML实现标题：排版
apple_68589597的博客
07-21 675
本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）01：前端介绍、html实现标题格式内容的总结，帮助需要学习Web开发的朋友温故而知新。
HTML、CSS、JS浅浅浅浅浅解
lbdking的博客
07-20 1297
初识Web web标准 web标准也被称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Cnsortium，万维网联盟）负责制定。 三个组成部分 HTML:负责网页的结构（页面元素和内容）。 CSS：负责网页的表现（页面元素的外观，位置等页面样式，如：颜色、大小等）。 JavaScript：负责网页的行为（交互效果）。 HTML HTML：超文本标记语言 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片，音频，视频等内容。 标记语言：由标签构
网页隐藏版之一行小说阅读器
m0_47147246的博客
07-19 329
网页隐藏版一行小说阅读器
前端学习（二）之HTML
2302_79795489的博客
07-18 957
在<input type="text" name="username" value="西瓜大侠">中，2、单选和多选：radio和checkbox（对应value为选项的值，当选中时，这个值会被提交）3、按钮：button、submit和reset（对应value为按钮上的标签文本）4、隐藏字段：hidden（对应value为隐藏在表单中的用户不可见的数值）段落格式标签：加粗b，斜体i，下划线u，删除线s，换行br，水平分割线hr。1、name：给表单控件起的名字，服务器靠这个名字来识别和获取输入的数据。
HTML启动本地EXE的通用方法
最新发布
07-22 520
HTML启动本地应用的解决方案
达内Java全栈技术笔记整理
"达内Java_笔记整理" 是一份针对Java开发的学习资料，源自达内的培训课程，适合初学者和进阶者。这份笔记包含了Java核心概念、数据库操作、框架应用以及服务器端技术等多个方面的内容。 笔记整理内容概述： 1. **...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

安逸了小葵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值