HTML总结

最新推荐文章于 2024-07-05 14:02:55 发布

heart-szu

最新推荐文章于 2024-07-05 14:02:55 发布

阅读量846

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/heart2070292037/article/details/122818761

版权

系列文章目录

HTML的学习记录
1第一个网页
2基本标签
3图像标签
4链接标签
5列表
6表格标签
7媒体元素
8页面结构
9内联框架
10学习表单

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

系列文章目录
前言
一、第一个网页
二、基本标签
三、图像标签
四、链接标签
五、列表
六、表格标签
七、媒体元素
八、页面结构
九、内联框架
十、学习表单
总结

前言

本文章是对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>
hello world
/n
这是我写的内容
</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>

<!--水平线标签-->
<hr/>
<!--换行标签-->
真奇怪！真奇怪！<br/>
两只老虎，两只老虎，跑得快，跑得快，<br>
一只没有耳朵，一只没有尾巴，<br>
真奇怪！真奇怪！”

<!--粗体,斜体-->
<h1>字体样式标签</h1>
粗体:<stronger>i love you</stronger>


斜体: <em>i love you</em>
<br>

<!--特殊符号-->

空       格 :
<br>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>

&gt;
<br/>
&lt;
<br>
&copy;版权所有 heart szu zy
&   ;

</body>
</html>

三、图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img 学习
src ： 图片地址
    相对地址 ， 绝对地址
    ../    -- 上一级目录

-->
<img src="../resources/image/中科院分区.png"
     alt="中科院分区"
     title="悬停文字"
     width="600"
     height="572"
>
<a href="4链接标签.html#down">回到第四个页面的down</a>
</body>
</html>

四、链接标签

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

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

<!--a标签学习
helf ： 必填，表示要跳转到那个页面
target : 表示窗口在哪里打开
    _blank  在新标签中打开

-->
<a href="1.第一个网页.html"target="_blank">点击我跳转到页面——</a>
<br>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
<br>
<p>
<a href="1.第一个网页.html">
    <img src="../resources/image/中科院分区.png"
         alt="中科院分区"
         title="悬停文字"
         width="600"
         height="572"
    >

</a>
</p>
<p>
<a href="1.第一个网页.html">
    <img src="../resources/image/中科院分区.png"
         alt="中科院分区"
         title="悬停文字"
         width="600"
         height="572"
    >

</a>
</p>
<p>
<a href="1.第一个网页.html">
    <img src="../resources/image/中科院分区.png"
         alt="中科院分区"
         title="悬停文字"
         width="600"
         height="572"
    >

</a>
</p>
<p>
<a href="1.第一个网页.html">
    <img src="../resources/image/中科院分区.png"
         alt="中科院分区"
         title="悬停文字"
         width="600"
         height="572"
    >

</a>
</p>
<p>
<a href="1.第一个网页.html">
    <img src="../resources/image/中科院分区.png"
         alt="中科院分区"
         title="悬停文字"
         width="600"
         height="572"
    >

</a>
</p>

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

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

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

</body>
</html>

五、列表

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

<!--有序列表 order list-->
<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 : 列表内容
公司网站底部

-->
<dl>
    <dt>学科</dt>

    <dd>java</dd>
    <dd>python</dd>
    <dd>Linux</dd>
    <dd></dd>
</dl>

</body>
</html>

六、表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
行 tr
列 td
-->
<table border="2px">
    <tr>
    <!--colspan 跨列-->
        <td colspan="4">0-1</td>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
    <!--rowspan 跨行 -->
        <td rowspan="5">0000</td>
        <td>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>
        <td>3-4</td>
    </tr>
    <tr>
        <td>4-1</td>
        <td>4-2</td>
        <td>4-3</td>
        <td>4-4</td>
    </tr>
</table>
<table>
    <tr>
        <td colspan="3" style="text-align: center">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">狂神</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr><tr>
        <td rowspan="2">heart</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>
</body>
</html>

七、媒体元素

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


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

-->
<video src=""   controls autoplay></video>
<audio src="资源路径"></audio>

</body>
</html>

八、页面结构

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

</header>

</body>
</html>

九、内联框架

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

<iframe id="hello" src="https://www.bilibili.com"
        width="700px"
        height="800px"
></iframe>

<a href="1.第一个网页.html" target="heo">电机跳转</a>

</body>
</html>

十、学习表单

<!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="1.第一个网页.html" method="get">
    <!--文本输入框 ： input type=“text”
    value="heart"  默认初始值
    maxlength="8"  最长能写几个字符
    size="30"  文本框的长度
    -->
    <p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>
<!--    密码框-->
    <p>密码：<input type="password" name="pwd" hidden value="12391223901" ></p>
<!-- 单选框标签
        input type = "radio"
        value : 单选框的值
        name  : 表示组

-->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked disabled/>男  组的概念
        <input type="radio" value="girl"name="sex"/>女
    </p>
<!--多选框
        input type=“checkbox”
-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="basketball" name="hobby">篮球
        <input type="checkbox" value="football" name="hobby" checked>足球
        <input type="checkbox" value="volleyball" name="hobby">排球
        <input type="checkbox" value="badminton" name="hobby">羽毛球
    </p>
<!--按钮
input type="button" 普通按钮
input type="image"  图像按钮
input type="submit" 提交按钮
input type="reset"  重置按钮

-->
    <p>按钮：
        <input type="button" name="but1" value="点击变长">
        <input type="image" src="../resources/image/中科院分区.png">
    </p>

<!--下拉框，列表框


-->
<p>下拉框：
    <select name="列表名称">
        <option value="china">中国</option>
        <option value="us">美国</option>
        <option value="DG" selected>德国</option>
        <option value="ETH">瑞士</option>
    </select>

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

</p>
<!--文件域
input type="file" name = "files"
-->
    <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="number" max="100" min="0" step="10">

    </p>
<!--滑块

input type="range"
-->
    <p>滑块 ：
        <input type="range" min="0" max="100" step="2">
        
    </p>

<!--搜索框-->
    <p>搜索
        <input type="search" name="search">
    </p>
    <p>
    <!--增强鼠标可用性-->
    <label for="mark">你点我试试</label>
    <input type="text" id="mark">
    <input type="submit">
    <input type="reset" value="清空表单">
    </p>
<!--https：//www.jb51.net/tools/regexsc.htm-->
<p>自定义邮箱：
    <input type="text" name="diymail" pattern="">

</p>

</form>
<h1></h1>

</body>
</html>

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

heart-szu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML总结

系列文章目录HTML的学习记录1第一个网页2基本标签3图像标签4链接标签5列表6表格标签7媒体元素8页面结构9内联框架10学习表单提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录系列文章目录前言一、第一个网页二、基本标签三、图像标签四、链接标签五、列表六、表格标签七、媒体元素八、页面结构九、内联框架十、学习表单总结前言本文章是对HTML的一个快速入门，分为十个小节。提示：以下是本篇文章正文内容，下面案例可供参考一、第一个网页<!--
复制链接

扫一扫