Diary21-全网最全的HTML讲解(含可用代码)

最新推荐文章于 2024-06-13 09:50:16 发布

憨憨不怕输

最新推荐文章于 2024-06-13 09:50:16 发布

阅读量872

点赞数 28

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/sxc010701/article/details/134839775

版权

HTML学习

1.网页基本信息

DOCTYPE:是一种规范，告诉浏览器我们要使用什么规范
head标签代表网页头部
title标签代表网页标题
body标签代表网页主体

下面是创建的第一个网页的源代码(在IDEA创建一个html文件会直接生成，我这个其实只改了网页标题)

<!-- DOCTYPE:是一种规范，告诉浏览器我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部 -->
<head>
    <meta charset="UTF-8">
    <!-- title标签代表网页标题 -->
    <title>sxc的第一个网页</title>
</head>
<!-- body标签代表网页主体 -->
<body>

</body>
</html>

2.网页基本标签

2.1标题标签

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>

2.2 段落标签

<!--段落标签-->
<p>sxc sxc</p>
<p>大帅逼 大帅逼</p>

2.3水平线标签

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

2.4换行标签

<!--换行标签-->
sxc sxc<br/>
大帅逼 大帅逼<br/>

2.5粗体and斜体

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

2.6特殊符号

空格： love&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;you
<br/>
大于： &gt;
<br/>
小于： &lt;
<br/>
版权符号： &copy;版权所有sxc

下面是完整代码：

<!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>sxc sxc</p>
<p>大帅逼 大帅逼</p>

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

<!--换行标签-->
sxc sxc<br/>
大帅逼 大帅逼<br/>

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

<!--特殊符号-->
空格： love&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;you
<br/>
大于： &gt;
<br/>
小于： &lt;
<br/>
版权符号： &copy;版权所有sxc

</body>
</html>

下面是网页的展示效果：

3.图像标签

src：图片地址相对路径（推荐使用）；绝对路径 ../ 代表上一级目录

alt: 图片名字（必填）

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

<!--img学习
src：图片地址
    相对路径（推荐使用）；绝对路径
    ../   代表上一级目录
alt: 图片名字（必填）
-->

<img src="../html/resource/image/1.jpg" alt="库里帅照" title="悬停文字" width="300" height="500">
</body>
</html>

4.超链接标签及应用

4.1 a标签

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

4.2锚链接

锚链接：实现页面内的跳转

需要一个锚标记
跳转到标记 #

4.3功能性链接

邮件链接：mailto:

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

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

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

<a href="https://www.baidu.com" target="_blank">点击我跳转到百度</a>
<br/>
<a href="web01.html">
    <img src="../html/resource/image/1.jpg" alt="库里帅照">
</a>
<p>
    <a href="web01.html">
        <img src="../html/resource/image/1.jpg" alt="库里帅照">
    </a>
</p>
<p>
    <a href="web01.html">
        <img src="../html/resource/image/1.jpg" alt="库里帅照">
    </a>
</p>

<!--锚链接：实现页面内的跳转
1.需要一个锚标记
2.跳转到标记 #
-->
<a href="#top">回到顶部</a>


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

</body>
</html>

5.列表标签

5.1有序列表

<!--有序列表-->
<ol>
  <li>Java</li>
  <li>Python</li>
  <li>C++</li>
</ol>

5.2无序列表

<!--无序列表-->
<ul>
  <li>Java</li>
  <li>Python</li>
  <li>C++</li>
</ul>

5.3自定义列表

<!--自定义列表
dl:标签
dt：列表名称
dd：列表内容
一般用在公司网站底部
-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>C++</dd>
</dl>

下面是完整代码：

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

<!--有序列表-->
<ol>
  <li>Java</li>
  <li>Python</li>
  <li>C++</li>
</ol>

<hr/>

<!--无序列表-->
<ul>
  <li>Java</li>
  <li>Python</li>
  <li>C++</li>
</ul>

<hr/>

<!--自定义列表
dl:标签
dt：列表名称
dd：列表内容
一般用在公司网站底部
-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>C++</dd>
</dl>

</body>
</html>

结果如下图所示：

6.表格标签

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

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

<table border="1px">
  <tr>
<!--colspan  跨列-->
    <td colspan="2">1-1</td>
    <td colspan="2">1-2</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>

下面是呈现结果：

7.媒体元素

音频和视频

src:资源路径
controls：控制条
autoplay：自动播放

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

<!--音频和视频
src:资源路径
controls：控制条
autoplay：自动播放
-->
<video src="../html/resource/video" controls autoplay></video>
<audio src="../html/resource/audio" controls autoplay></audio>
</body>
</html>

8.页面结构分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>

<header>
  <h2>网页头部</h2>
</header>

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

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

</body>
</html>

9.iframe内联框架

iframe内联框架

src：地址
w-h：宽度高度

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

<!--iframe内联框架
src：地址
w-h：宽度 高度
-->
<iframe src="" name="hello"   frameborder="0" width="800px" height="1000px"></iframe>
<a href="web01.html" target="hello">点击跳转</a>

</body>
</html>

10.表单post和get提交

表单form

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

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

<h1>注册</h1>

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

<form action="web01.html" method="get">
<!--文本输入框：input type="text"-->
  <p>名字：<input type="text" name="username"></p>
  <!--密码框：input type="password"-->
  <p>密码：<input type="password" name="pwd"></p>
  <p>
    <input type="submit">
    <input type="reset">
  </p>
</form>

</body>
</html>

11.单选框与多选框

11.1单选框

单选框标签

input type="radio"
value：单选框的值
name：表示组

 <p>
        性别：<input type="radio" value="boy" name="sex"/>男
            <input type="radio" value="girl" name="sex"/>女
 </p>

注意：name这个地方值必须相同，否则页面中两个选项都可以被选择

11.2多选框

<p>
  爱好：
  <input type="checkbox" value="sleep" name="hobby">睡觉
  <input type="checkbox" value="eat" name="hobby">吃饭
  <input type="checkbox" value="play" name="hobby">玩
  <input type="checkbox" value="chat" name="hobby">聊天
</p>

11.3按钮

input type="button" 普通按钮 input type="image" 图像按钮 input type="submit" 提交按钮 input type="reset" 重置按钮

<p>
    按钮：
    <input type="button" name="btn1" value="点击变长">
    <input type="image" src="../html/resource/image/1.jpg">
  </p>

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

12.列表框文本域与文件域

12.1下拉框

<p>国家：
    <select name="列表名称">
      <option value="选项的值">中国</option>
      <option value="选项的值">美国</option>
      <option value="选项的值">德国</option>
      <option value="选项的值">巴西</option>
    </select>
</p>

12.2文本域

<p>反馈：
    <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>

12.3文件域

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

13.搜索框滑块和简单验证

13.1邮箱验证

<p>邮箱：
  <input type="=email" name="email">
</p>

13.2URL

<p>URL：
    <input type="=url" name="url">
  </p>

13.3数字

<p>数字：
    <input type="=number" name="number" max="100" min="0" step="10">
  </p>

13.4滑块

<p>滑块：
    <input type="=range" name="voice" max="100" min="0" step="10">
  </p>

13.5搜索框

<p>滑块：
    <input type="=search" name="search">
  </p>

14.表单的应用

隐藏域：hidden
只读：readonly
禁用：disabled

15.表单初级体验

提示信息：placeholder
非空判断（必填字段）：required
正则表达式：pattern

16.总结(脑图)

憨憨不怕输

关注

28
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
Diary21-全网最全的HTML讲解(含可用代码)

<dt>学科</dt></dl>下面是完整代码：<head><title>列表学习</title></head><body>--有序列表--><ol></ol><hr/>--无序列表--><ul></ul><hr/>--自定义列表dl:标签dt：列表名称dd：列表内容一般用在公司网站底部--><dl><dt>学科</dt>
复制链接

扫一扫