一个简单的HTML入门学习...

前端学习:HTML入门

前言

众所周知,前端的入门是由学习前端三剑客开始的——HTML、CSS、JavaScript。学完这三者仅仅是打开了前端学习的大门,如果要深入学习前端的话,很多框架还要深入学习,但在这里就不提了,比较我也不是专业的前端学习者。学习前端三剑客仅仅是为了打开前端世界的大门。那么我们直接进入HTML的基础内容学习!

html在百度百科中的解释是: 在这里插入图片描述

1、我的第一个HTML

(1)注释写法 入门一门语言,首先学习如何注释。在HTML中,注释用 <!-- --> 表示,里面输入注释内容即可。

(2)<!DOCTYPE html> 其次,我们学习主体部分。我们发现新建的html文件中,有 <!DOCTYPE html> ,这个是告诉浏览器使用什么格式的规范,html默认是使用html规范。

(3)<meta> <meta> ,是一种描述性标签,也是一个单闭合标签。用来描述网站的信息,用来做SEO。可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

(4)<title> <title>标题内容<title>,这是一个标题标签,内部是网页的标题。在浏览器中是这样显示的: 在这里插入图片描述

(5)<body> <body>标签,是显示内容的标签,在body中输入网页内容,效果如下:

在这里插入图片描述

网页源码如下:

<!--
我是注释
-->
<!--DOCTYPE:告诉浏览器,使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!--meta描述性标签,用来描述网站的信息-->
    <!-- meta一般用来做SEO-->
    <!--
    <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
    <meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
    -->

    <meta charset="UTF-8">
    <meta name="keywords"content="第一个html网页">
    <meta name="description"content="wyh的第一个html网页">
    <!--title网页标题-->
    <title>我的第一个html</title>
</head>

<!--body表示网页主题-->
<body>
Hello world!
</body>

</html>

2、图像标签学习

图像标签:用img来实现图像的显示。

语法规则: src:图片地址 相对地址(推荐使用) "../"表示上一级目录 绝对地址 物理存储目录 alt:图片失效显示的文字信息 title:悬停文字 width:宽度 height:高度

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

<!--
img学习
src:图片地址
相对地址(推荐使用) "../"表示上一级目录
绝对地址 物理存储目录

alt:图片失效显示的文字信息
title:悬停文字
width:宽度
height:高度
-->

<img src="../resources/image/五条悟.jpg" alt="如果图片加载失败,会显示alt的信息"
     title="五条悟(悬停文字)" width="1202" height="676">

</body>
</html>

如上代码显示的效果: 帅气的5t5 !!!

3、基本标签学习

(1)标题标签 <h1> 不单单是<h1> 还有<h2> <h3> ...这种标签是标题标签。和markdown语法中的# 一样,h后面不同的数字,表示第几级标签。

(2)段落标签 <p> 这种标签表示段落的分离,每个<p>表示不同的段落

(3)水平线标签<hr> 这个标签是单闭合标签,只需一个即可完成它的使命——水平线。即在文本中给出一条水平线。

(4)换行标签<br> 这个标签表示换行,和c语言中的\n 类似

(5)字体标签<strong>和<em> strong就是粗体,em是斜体。

现学现用:

<!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>两只老虎</p>
<p>爱跳舞</p>

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

<!--换行标签-->
两只老虎<br/>
爱跳舞<br/>

<!--粗体和斜体-->
<h1>粗体和斜体</h1>

<strong>这里是粗体!!!</strong>
<br/>
<em>这里是斜体emmmm</em>
<br/>

<!--部分特殊符号-->
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格: "&"+"nbsp"+";"
<br/>
&gt;这里是大于号
<br/>
&lt;这里是小于号
<br/>
&copy;版权所有woodwhale
<br/>

</body>
</html>

如上代码显示的网页如下: 在这里插入图片描述

4、链接标签学习

(1)链接标签<a> href:必填,表示要跳转到的页面 target:表示窗口在哪里打开 _blank 新标签页 _self 当前标签(默认) 链接标签的内容填在两个<a>之间,可以是文本内容,也可以是图片形式

(2)锚链接的使用 将<a>中的href设置为页面内某个<a>的名字,点击自动回到该位置

(3)功能性标签 邮件链接:mailto: QQ链接:百度搜索 qq推广 官网有,可复制

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

<a name="top"><strong>这是顶部!</strong></a>
<br/>


<!--
a标签
href:必填,表示要跳转到的页面
target:表示窗口在哪里打开 _blank 新标签页 _self 当前标签(默认)
-->
<h1><a href="1、第一个html.html">点我跳转到页面一</a></h1>
<h1><a href="https://www.bilibili.com">点我跳转到b站</a></h1>
<h1><a href="https://www.baidu.com">点我跳转到百度</a></h1>
<h1><a href="https://www.baidu.com" target="_blank">在新标签页打开百度</a></h1>
<h1><a href="https://www.bilibili.com" target="_blank">在新标签页打开b站</a></h1>

<a href="https://www.bilibili.com">
    <img src="../resources/image/五条悟.jpg" alt="如果图片加载失败,会显示alt的信息"
         title="点我跳转到b站" width="1202" height="676">
</a>

<!--
锚链接:
1、需要一个锚标记
2、跳转至标记#xxx
-->
<a href="#top">返回顶部</a>
<br/>

<!--
功能性链接
邮件链接:mailto:
QQ链接:百度搜索 qq推广 官网有
-->

<a href="mailto:[email protected]">点我邮箱细聊!</a>
<br/>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1966890773&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1966890773:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

</body>
</html>

代码实现的页面如下: 我们点击每个地方都会进行跳转噢

5、列表标签学习

(1)有序列表<ol>

(2)无序列表<ul>

(3)自定义列表<dl>:

dl:标签
dt:列表名称
dd:列表内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>

<!--有序列表-->
<ol>
    <li>java</li>
    <li>c</li>
    <li>c++</li>
    <li>php</li>
    <li>MySQL</li>
    <li>python</li>
</ol>

<hr/>

<!--无序列表-->
<ul>
    <li>java</li>
    <li>c</li>
    <li>c++</li>
    <li>c#</li>
    <li>python</li>

</ul>

<hr/>

<!--
自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
    <dt>语言</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>c++</dd>
    <dd>c</dd>
</dl>

</body>
</html>

代码实现的页面如下: 在这里插入图片描述

6、表格标签学习

表格标签:table 行标签:tr 列标签:td 跨列标签:colspan 跨行标签:rowspan

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

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

<table border="1px">
    <tr>
    <!--跨列 colspan-->
        <td colspan="5">在这里跨了五列噢!!!</td>
    </tr>
    <tr>
    <!--跨行 rowspan-->
        <td rowspan="3">在这里<br/>跨三行</td>
        <td>0-1</td>
        <td>0-2</td>
        <td>0-3</td>
        <td>0-4</td>
    </td>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
</table>

</body>
</html>

代码实现的页面如下: 表格

7、媒体标签学习

(1)音频标签:audio (2)视频标签:video

用法<video src="视频目录" controls> <audio src="音频目录" controls>

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

<!--音频和视频-->
<!--<video src="视频目录" controls></video>-->
<audio src="../resources/music/灰澈%20-%20木鲸.mp3" controls></audio>

</body>
</html>

因为没有下载过mp4文件,所有就只用mp3文件演示了 代码实现的页面如下: 在这里插入图片描述

8、结构页面学习

我们只需要记住三个标签 (1)头部标签:<header> (2)主体标签:<section> (3)脚部标签:<footer>

<!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内联框架标签

用法如下: sec:地址 name:框架标识名 width:宽度 height:高度

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

<!--
iframe内联框架
sec:地址
name:框架标识名
width:宽度
height:高度
-->

<iframe src="https://www.bilibili.com" name="框架标识名" frameborder="0" width="1000px" height="800px"></iframe>

<!--
b站分享视频有一个“嵌入代码”就是通过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>

代码实现的页面如下: 在这里插入图片描述

我们可以发现,这个bilibil,还有视频明显是内嵌的网页。这就是内联框架的简单使用。

10、构建表单学习

表单标签:form 讲解全部都在下面的注释中

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

<!--
表单 form
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method:post、get 提交方式
get方式提交:可以在url中看到提交的信息,不安全但快
post方式提交:不能在url中看到提交信息,相对安全,可以传输大文件
-->
<h1>注册</h1>

<form action="1、第一个html.html" method="post">

    <!--文本输入框 input type="text"
        value="这里是初始值"  初始值
        maxlength="15"  最大输入长度
        size="30"   文本框的长度
    -->
    <p>用户:<input type="text" name="username" ></p>

    <!--密码框 input type="password"-->
    <p>密码:<input type="password" name="pwd"></p>


    <!--
     radio是单选框,必须让name相同才能使组别相同,这样才能单选
     checked 默认勾选了
     -->
    <p>
        性别:
        <input type="radio" name="sex" value="boy"> 男
        <input type="radio" name="sex" value="girl"> 女
    </p>

    <!--
    checkbox是多选框,让name相同会返回类似于同一个数组的效果
    -->
    <p>
        爱好:
        <input type="checkbox" name="hobby" value="sleep"> 睡觉
        <input type="checkbox" name="hobby" value="code"> 代码
        <input type="checkbox" name="hobby" value="game"> 游戏
    </p>

    <!--
    按钮
    button 是点击按钮
    image 是图片按钮(提交表单)

    submit 提交表单
    reset 清空表单
    -->
    <p>
        <input type="button" name="bon1" value="点我并不会发生什么">
    </p>


    <!--
    下拉框,列表框
    selected 默认的选择
    -->
    <p>
        右侧选择语言:
        <select name="列表名称">
            <option value="选项的值" selected>java</option>
            <option value="选项的值">c</option>
            <option value="选项的值">c++</option>
            <option value="选项的值">python</option>
        </select>
    </p>

    <!--
    文本域
    cols="30" 行
    rows="10" 列
    -->
    <p>
        反馈:
        <textarea name="textarea" cols="30" rows="10">文本内容</textarea>
    </p>

    <!--
    文件域
    input type="file"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </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" value="0">
    </p>

    <!--滑块-->
    <p>
        音量:
        <input type="range" min="0" max="100" name="voice" step="2" value="0">
    </p>

    <!--搜索框-->
    <p>
        <input type="search" name="search" value="输入想要搜索的内容">
    </p>
    
    
    <!--增强鼠标可用性,想去哪里点哪里-->
    <p>
        <label for="mark">点击我这段文字跳转到右侧输入框</label>
        <!--
        readonly 只读
        disabled 禁用
        hidden 隐藏

        placehoder  提示输入,一点就没
        required 提交表单必填
        pattern 正则表达式
        -->
        <input type="text" placeholder="请输入内容" id="mark" required>
    </p>
    
    
    <p>
        <input type="submit" value="点我提交">
        <input type="reset" value="点我重置">
    </p>


</form>

</body>
</html>

代码实现的页面如下: 表单

后话

到此,HTML的入门就完毕了。要想对HTML的内容进行优化的话,就要涉及到CSS的学习了。当然,CSS的学习就是后话了。

如果有任何问题和错误欢迎在评论区指出!下一期前端学习更新CSS!