众所周知,前端的入门是由学习前端三剑客开始的——HTML、CSS、JavaScript。学完这三者仅仅是打开了前端学习的大门,如果要深入学习前端的话,很多框架还要深入学习,但在这里就不提了,比较我也不是专业的前端学习者。学习前端三剑客仅仅是为了打开前端世界的大门。那么我们直接进入HTML的基础内容学习!
(1)注释写法
入门一门语言,首先学习如何注释。在HTML中,注释用 表示,里面输入注释内容即可。
(2)
其次,我们学习主体部分。我们发现新建的html文件中,有 ,这个是告诉浏览器使用什么格式的规范,html默认是使用html规范。
(3)
,是一种描述性标签,也是一个单闭合标签。用来描述网站的信息,用来做SEO。可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
(4)
(5)
网页源码如下:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个htmltitle>
head>
<body>
Hello world!
body>
html>
图像标签:用img来实现图像的显示。
语法规则:
src:图片地址
相对地址(推荐使用) "…/"表示上一级目录
绝对地址 物理存储目录
alt:图片失效显示的文字信息
title:悬停文字
width:宽度
height:高度
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习title>
head>
<body>
<img src="../resources/image/五条悟.jpg" alt="如果图片加载失败,会显示alt的信息"
title="五条悟(悬停文字)" width="1202" height="676">
body>
html>
如上代码显示的效果:
(1)标题标签
不单单是
(2)段落标签
这种标签表示段落的分离,每个
表示不同的段落
(3)水平线标签
这个标签是单闭合标签,只需一个即可完成它的使命——水平线。即在文本中给出一条水平线。
(4)换行标签
这个标签表示换行,和c语言中的\n 类似
(5)字体标签和
strong就是粗体,em是斜体。
现学现用:
<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>这里是斜体emmmmem>
<br/>
空 格: "&"+"nbsp"+";"
<br/>
>这里是大于号
<br/>
<这里是小于号
<br/>
©版权所有woodwhale
<br/>
body>
html>
(1)链接标签
href:必填,表示要跳转到的页面
target:表示窗口在哪里打开 _blank 新标签页 _self 当前标签(默认)
链接标签的内容填在两个之间,可以是文本内容,也可以是图片形式
(2)锚链接的使用
将中的href设置为页面内某个的名字,点击自动回到该位置
(3)功能性标签
邮件链接:mailto:
QQ链接:百度搜索 qq推广 官网有,可复制
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<a name="top"><strong>这是顶部!strong>a>
<br/>
<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>
<a href="#top">返回顶部a>
<br/>
<a href="mailto:1966890773@qq.com">点我邮箱细聊!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>
(1)有序列表
(2)无序列表
(3)自定义列表
dl:标签
dt:列表名称
dd:列表内容
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习title>
head>
<body>
<ol>
<li>javali>
<li>cli>
<li>c++li>
<li>phpli>
<li>MySQLli>
<li>pythonli>
ol>
<hr/>
<ul>
<li>javali>
<li>cli>
<li>c++li>
<li>c#li>
<li>pythonli>
ul>
<hr/>
<dl>
<dt>语言dt>
<dd>javadd>
<dd>pythondd>
<dd>c++dd>
<dd>cdd>
dl>
body>
html>
表格标签:table
行标签:tr
列标签:td
跨列标签:colspan
跨行标签:rowspan
<html lang="en" xmlns="">
<head>
<meta charset="UTF-8">
<title>表格标签学习title>
head>
<body>
<table border="1px">
<tr>
<td colspan="5">在这里跨了五列噢!!!td>
tr>
<tr>
<td rowspan="3">在这里<br/>跨三行td>
<td>0-1td>
<td>0-2td>
<td>0-3td>
<td>0-4td>
td>
<tr>
<td>1-1td>
<td>1-2td>
<td>1-3td>
<td>1-4td>
tr>
<tr>
<td>2-1td>
<td>2-2td>
<td>2-3td>
<td>2-4td>
tr>
table>
body>
html>
(1)音频标签:audio
(2)视频标签:video
用法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<audio src="../resources/music/灰澈%20-%20木鲸.mp3" controls>audio>
body>
html>
因为没有下载过mp4文件,所有就只用mp3文件演示了
代码实现的页面如下:
我们只需要记住三个标签
(1)头部标签:
(2)主体标签:
(3)脚部标签:
<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>
iframe内联框架标签
用法如下:
sec:地址
name:框架标识名
width:宽度
height:高度
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<iframe src="https://www.bilibili.com" name="框架标识名" frameborder="0" width="1000px" height="800px">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,还有视频明显是内嵌的网页。这就是内联框架的简单使用。
表单标签:form
讲解全部都在下面的注释中
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习title>
head>
<body>
<h1>注册h1>
<form action="1、第一个html.html" method="post">
<p>用户:<input type="text" name="username" >p>
<p>密码:<input type="password" name="pwd">p>
<p>
性别:
<input type="radio" name="sex" value="boy"> 男
<input type="radio" name="sex" value="girl"> 女
p>
<p>
爱好:
<input type="checkbox" name="hobby" value="sleep"> 睡觉
<input type="checkbox" name="hobby" value="code"> 代码
<input type="checkbox" name="hobby" value="game"> 游戏
p>
<p>
<input type="button" name="bon1" value="点我并不会发生什么">
p>
<p>
右侧选择语言:
<select name="列表名称">
<option value="选项的值" selected>javaoption>
<option value="选项的值">coption>
<option value="选项的值">c++option>
<option value="选项的值">pythonoption>
select>
p>
<p>
反馈:
<textarea name="textarea" cols="30" rows="10">文本内容textarea>
p>
<p>
<input type="file" name="files">
<input type="button" name="upload" value="上传">
p>
<p>
请输入邮箱:
<input type="email" name="email">
p>
<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>
<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!