HTML笔记整理

网页基本信息

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

安逸了小葵

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

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

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

打赏作者

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

抵扣说明:

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

余额充值