1. 技术文章
  2. HTML学习笔记

HTML学习笔记

由 烂漫一生 提交于 2020-08-18 14:03:13

什么是HTML

  • HTML

Hyper Text Markup Landuage（超文本标记语言）

超文本包括：文字、图片、音频、视频、动画等

HTML5的优势

  • 世界知名浏览器厂商对HTML5的支持

微软 Google 苹果 Opera Mozilla

  • 市场的需求
  • 跨平台

W3C标准

W3C

W3C标准包括

  • 结构化标准语言（HTML、XML）
  • 表现标准语言（CSS）
  • 行为标准（DOM、ECMAScript）

HTML基本结构

image-20200610164433021

<body>、</body>等成对的标签分别叫做开放标签和闭合标签

单独呈现的标签（空元素），如<hr/> 意味用 / 来关闭空元素

网页基本信息

  • DOCTYPE声明

  • title 标签

  • meta 标签

<!-- DOCTYPE：告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部 -->
<head>
<!--  meta 描述性标签，它用来描述我们网站的一些信息 -->
<!--  meta一般用来作SEO（搜索引擎优化）  -->
    <meta charset="UTF-8">
    <meta name="description" content="这是一个测试网页">
    <meta name="keywords" content="Java，HTML5，前端">

    <!--  title网页标题  -->
    <title>html learning</title>
</head>
<!--body标签代表网页主题-->
<body>
Hello，World！
</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>

<!--段落标签-->
<p>满江红·怒发冲冠</p>
<p>   [宋] 岳飞  </p>
<p>怒发冲冠，凭栏处潇潇雨歇。</p>
<p>抬望眼，仰天长啸，壮怀激烈。</p>
<p>三十功名尘与土，</p>
<p>八千里路云和月。</p>
<p>莫等闲白了少年头，空悲切。</p>
<p>靖康耻，犹未雪；</p>
<p>臣子恨，何时灭！</p>
<p>驾长车踏破贺兰山缺。</p>
<p>壮志饥餐胡虏肉，</p>
<p>笑谈渴饮匈奴血。</p>
<p>待从头收拾旧山河，朝天阙。</p>

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


<!--换行标签-->
满江红·怒发冲冠<br/>
[宋] 岳飞<br/>

怒发冲冠，凭栏处潇潇雨歇。<br/>
抬望眼，仰天长啸，壮怀激烈。<br/>
三十功名尘与土，<br/>
八千里路云和月。<br/>
莫等闲白了少年头，空悲切。<br/>

靖康耻，犹未雪；<br/>
臣子恨，何时灭！<br/>
驾长车踏破贺兰山缺。<br/>
壮志饥餐胡虏肉，<br/>
笑谈渴饮匈奴血。<br/>
待从头收拾旧山河，朝天阙。<br/>

<!--粗体 斜体-->
<h1>字体样式标签</h1>

粗体： <strong>i love u </strong>
<br/>
斜体：  <em>i love u</em>

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

空      格
空 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 格


<br/>
&gt;
<br/>
&lt;
&copy;版权所有 JaneRoad

<!--
特殊符号记忆方式
输入
&加上字母
IDEA会智能提示各种特殊符号
-->

</body>
</html>

图像标签

  • 常用的图像格式

JPG GIF PNG BMP ...

image-20200610171611905

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src: 图片地址 (必填)
相对路径（推荐使用）    绝对路径
../ ---上一级目录

alt：图片名字（必填）
-->
<img src="../resources/images/1.JPG" alt="我的头像" title="樱木花道" width="300" height="300">
</body>
</html>

链接标签

image-20200610172338565

  • 文本超链接
  • 图像超链接

超链接

  • 页面间链接

从一个页面链接到另一个页面

  • 锚链接
  • 功能性链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!--a标签
href:必填，表示要跳转到那个页面
target:表示窗口在哪里打开
_blank:在新标签页打开
_self:在自己的网页中打开
-->
<a href="firstweb.html" target="_blank">点击我跳转到页面一</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>

<br>

<a href="https://zh.wikipedia.org/wiki/%E6%A8%B1%E6%9C%A8%E8%8A%B1%E9%81%93">
<img src="../resources/images/1.JPG" alt="我的头像" title="樱木花道" width="300" height="300">

</a>

<p>
<a href="https://zh.wikipedia.org/wiki/%E6%A8%B1%E6%9C%A8%E8%8A%B1%E9%81%93">
    <img src="../resources/images/1.JPG" alt="我的头像" title="樱木花道" width="300" height="300">

</a>
</p>
<p>
<a href="https://zh.wikipedia.org/wiki/%E6%A8%B1%E6%9C%A8%E8%8A%B1%E9%81%93">
    <img src="../resources/images/1.JPG" alt="我的头像" title="樱木花道" width="300" height="300">

</a>
</p>
<p>
<a href="https://zh.wikipedia.org/wiki/%E6%A8%B1%E6%9C%A8%E8%8A%B1%E9%81%93">
    <img src="../resources/images/1.JPG" alt="我的头像" title="樱木花道" width="300" height="300">

</a>
</p>
<p>
<a href="https://zh.wikipedia.org/wiki/%E6%A8%B1%E6%9C%A8%E8%8A%B1%E9%81%93">
    <img src="../resources/images/1.JPG" alt="我的头像" title="樱木花道" width="300" height="300">

</a>
</p>
<p>
<a href="https://zh.wikipedia.org/wiki/%E6%A8%B1%E6%9C%A8%E8%8A%B1%E9%81%93">
    <img src="../resources/images/1.JPG" alt="我的头像" title="樱木花道" width="300" height="300">

</a>
</p>
<p>
<a href="https://zh.wikipedia.org/wiki/%E6%A8%B1%E6%9C%A8%E8%8A%B1%E9%81%93">
    <img src="../resources/images/1.JPG" alt="我的头像" title="樱木花道" width="300" height="300">

</a>
</p>
<p>
<a href="https://zh.wikipedia.org/wiki/%E6%A8%B1%E6%9C%A8%E8%8A%B1%E9%81%93">
    <img src="../resources/images/1.JPG" alt="我的头像" title="樱木花道" width="300" height="300">

</a>
</p><p>
<a href="https://zh.wikipedia.org/wiki/%E6%A8%B1%E6%9C%A8%E8%8A%B1%E9%81%93">
    <img src="../resources/images/1.JPG" alt="我的头像" title="樱木花道" width="300" height="300">

</a>
</p>
<p>
<a href="https://zh.wikipedia.org/wiki/%E6%A8%B1%E6%9C%A8%E8%8A%B1%E9%81%93">
    <img src="../resources/images/1.JPG" alt="我的头像" title="樱木花道" width="300" height="300">

</a>
</p>
<p>
<a href="https://zh.wikipedia.org/wiki/%E6%A8%B1%E6%9C%A8%E8%8A%B1%E9%81%93">
    <img src="../resources/images/1.JPG" alt="我的头像" title="樱木花道" width="300" height="300">

</a>
</p>



<!--锚链接
1.需要一个锚标记
2.跳转到标记

-->

<a href="#top">回到顶部</a>

<a name="down">down</a>





<!--功能性链接


邮件链接：mailto:
QQ链接
-->


<a href="mailto:425999212@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>

行内元素和块元素

image-20200610200406772

列表

image-20200610200649072

<!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++</li>
</ol>
<hr/>


<!--无序列表
应用范围：导航，侧边栏...
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C++</li>
</ul>


<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容

公司网站底部
-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C</dd>

    <dt>位置</dt>
    <dd>福建</dd>
    <dd>厦门</dd>
    <dd>海沧</dd>
</dl>



</body>
</html>

表格

  • 为什么使用表格

简单通用、结构稳定

  • 基本结构

单元格、行、列、跨行、跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>


<!--表格table
行 tr rows
列 td
-->

<table border="1px">
    <tr>
        <!--colspan 跨列   -->
        <td colspan="4">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <!--rowspan 跨列   -->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>



</body>
</html>

视频和音频

  • 视频元素

video

  • 音频元素

audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>


<!--音频和视频
src：资源路径
controls：控制条
autoplay：自动播放
-->

<video src="../resources/video/拉普拉斯战队中期视频.mp4" controls autoplay></video>

<audio src="../resources/audio/2018年6月四级考试真题.mp3" controls autoplay></audio>
</body>
</html>

页面结构分析

image-20200610224831426

iframe内联框架

image-20200610225423257

<!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="2000px" height="1600px"></iframe>




<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"-->
<!--        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">-->
<!--</iframe>-->


</body>
</html>

表单语法

image-20200611102604131

image-20200611110316262

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>注册</h1>


<!--表单form

action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post,get 提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
post方式提交：安全，传输大文件，
-->

<form action="firstweb.html" method="post" >
<!--文本输入框： imput 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="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女
</p>



<!--多选框
input type="checkbox"
-->
<p>爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="game" name="hobby">游戏
    <input type="checkbox" value="music" name="hobby">音乐
    <input type="checkbox" value="code" 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="../resources/images/1.JPG">
</p>


    <p>国家：
        <select name="列表名称" >
            <option value="China" selected>中国</option>
            <option value="American">美国</option>
            <option value="Switzerland" >瑞士</option>
            <option value="India">印度</option>
        </select>
    </p>
<!--文本域
 cols="50" rows="10"
-->
<p>反馈：
    <textarea name="textarea"  cols="50" rows="10">文本内容</textarea>
</p>


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


<!--  邮箱验证  -->
    <p>邮箱：
        <input type="email" name="email">
    </p>

<!-- URL   -->
    <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="10">
</p>

<!-- 搜索框-->
<p>搜索：
    <input type="search" name="search">
</p>

<p>
    <input type="submit">
    <input type="reset">
</p>

</body>
</html>

表单的应用

  • 隐藏域
<p>密码: <input type="password" name="pwd" hidden value="123456"></p>
  • 只读
<p>名字：<input type="text" name="username" value="admin" readonly></p>
  • 禁用
<input type="radio" value="boy" name="sex" checked disabled/>男

表单初级验证

image-20200611140954446

<p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>

<!--
正则表达式
https://m.jb51.cc/regex/549819.html
-->
<p>身份证号：
    <input type="text" name="身份证" pattern="^\d{15}|\d{18}$">
</p>
标签
cos
java
HOBBY
python
html5
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!