HTML学习笔记Day01

周公公

已于 2022-05-31 16:53:56 修改

阅读量84

点赞数

文章标签： html 学习前端

于 2022-05-31 16:52:06 首次发布

本文链接：https://blog.csdn.net/xmynishizhu/article/details/125067918

版权

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

文章目录

前言
一、HTML基础布局
二、基本标签
三.图像标签
四.链接标签
五.列表标签
六.表格标签
七.媒体标签
总结

前言

前端知识HTML标签学习笔记

一、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>
Hello World!
</body>
</html>

二、基本标签

1.h1-h6、p、hr、br、strong、em
行内元素：自动拓开宽度，左右都是行内元素的话都会在一行。如：a、strong、em。
块元素：无论写多少内容，该元素独占一行如:p、h1-h6。
代码如下（示例）：

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

<!--段落标签-->
<p>如何快速写一个网页呢?</p>
<p>秦疆老师JavaWeb课程之HTML .</p>
<p>从生活到代码，从简单到深入。</p>
<p>源码级别讲解，风趣幽默,通俗易懂</p>

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

<!--换行标签-->
如何快速写一个网页呢?<br/>
秦疆老师JavaWeb课程之HTML .<br/>
从生活到代码，从简单到深入。<br/>
源码级别讲解，风趣幽默,通俗易懂<br/>

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

粗体：<strong>I Love You!</strong><br/>
斜体：<em>I Love You!</em><br/>

<!--注释和特殊符号-->
空格：空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br/>
大于号:&gt;<br/>
小于号:&lt;<br/>
版权符号:&copy;版权所有周晓艳
<!--
特殊符号记忆方法
&  ;
查百度
-->

三.图像标签

代码如下（示例）：

<!--常见图像格式-->
<!--JPG\GIF\PNG\BMP-->

<!--img标签学习
src: 图片地址
     相对路径，绝对路径
     ../ --上一级目录

alt:图片名字（必填）
-->
<img src="../resource/images/test1.jpg" alt="哪吒" title="悬停文字" width="200" height="200">

四.链接标签

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

<!--文本超链接、图像超链接-->
<!--a标签
   href:必填，表示跳转到那个页面
   target:表示窗口在哪里打开
        -blank:在新网页中打开
        _self:在自己的网页打开
        _top:
        _parent:
-->
<!--页面间链接-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转达页面1</a><br/>
<a href="http://ww.baidu.com" target="_self">点击我跳转到百度</a><br/>
<a href="1.我的第一个网页.html">
  <img src="../resource/images/test1.jpg" alt="哪吒" title="悬停文字" width="200" height="200">
</a>

<!--锚链接
1.需要一个锚标记
2.跳转到标记
3.定位到具体位置-->
<!--页面间跳转1-->
<!--<a href="#top">回到顶部</a>-->
<!--<br/>-->

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

<!--功能性链接
邮件链接：mailto
QQ链接：搜索QQ推广，点击推广工具，在这个界面可获得QQ链接代码，很有趣，可以试一试！！！
-->
<br/>
<a href="mailto:自己的邮箱@qq.com">点击联系我</a>
<br/>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=自己的QQ&site=qq&menu=yes">
  <img border="0" src="http://wpa.qq.com/pa?p=2:自己的QQ:53" alt="加我领取学习资料" title="加我领取学习资料"/>
</a>

五.列表标签

<!--信息资源的展示形式--结构化，条理化
分类：
   无序列表
   有序列表
   定义列表
-->

<!--有序列表:序号
    应用范围：试卷，问答。。。
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端开发</li>
    <li>C/C++</li>
    <li>PHP</li>
</ol>
<hr/>
<!--无序列表
    应用范围：导航，侧边连
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端开发</li>
    <li>C/C++</li>
    <li>PHP</li>
</ul>
<hr/>

<!--自定义列表
dl:自定义标签
dt:列表名字
dd:列表选项/内容
应用范围：公司网站底部
-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>运维</dd>
    <dd>前端开发</dd>
    <dd>C/C++</dd>
    <dd>PHP</dd>

    <dt>位置</dt>

    <dd>长沙</dd>
    <dd>西安</dd>
    <dd>浏阳</dd>
</dl>

六.表格标签

<!--表格table
行：tr rows
列：td  cols
-->
<table border="1px">
    <tr>
        <!-- colspan 跨列-->
        <td colspan="4"> 1-1</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>

七.媒体标签

<!--视频元素 video
src 资源路径
controls 进度条/控制条
autoplay 自动播放
-->
<video src="../resource/video/test8.mp4" controls ></video>
<hr/>
<!--音频元素 audio-->
<audio src="../resource/audio/鸳鸯债.mp3" controls></audio>

总结

学习了基本标签----段落标签P，标题标签h1-h6(大到小)，水平线标签hr，换行标签br，粗体strong，斜体em。
图像标签----img，（必填src–绝对路径，相对路径，alt–图像名字）
链接标签----a，（ href:必填，表示跳转到那个页面
target:表示窗口在哪里打开
-blank:在新网页中打开
_self:在自己的网页打开
_top:
_parent:
)
列表标签----li,有序列表ol，无序列表ul，自定义dl>dt（列表名）>dd（列表内容）
表格标签----table，行tr，rows；> 列td，cols（跨列colspan=“列数”，跨行rowspan=“行数”）
媒体标签----video视频元素，audio音频元素