HTML：前端出发的地方

最新推荐文章于 2024-07-12 16:31:27 发布

weixin_45947655

最新推荐文章于 2024-07-12 16:31:27 发布

阅读量268

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/weixin_45947655/article/details/108835994

版权

HTML：前端出发的地方

HTML

1.初识HTML

---->HTML

---->Hyper Text Markup Language(超文本标记语言)

1.1什么是HTML？

（1）HTML指的是超文本标记语言（Hyper Text Markup Language），是用来描述网页的一种语言
（2）不是编程语言，而是一种标记语言
（3）标记语言是一套标记标签（markup tag）

1.2html作用简单理解：

网页是由网页元素组成，这些元素是利用html标签描述出来，然后通过浏览器解析，就可以显示给用户。

1.3超文本理解：

1.它可以加入图片、声音、动画、多媒体等内容（超越文本限制）

2.还可以从一个文件转到另一个文件，与世界各地的主机的文件连接（超级链接文本）

以上内容转载自：https://blog.csdn.net/ClimberSky/article/details/106171337?ops_request_misc=%257B%2522request%255Fid%2522%253A%25221601210295197252

目前普遍使用的是HTML5，相较于前版本提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素，特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形，图表，图像和动画，以及不需要安装任何插件直接使用网页播放视频等。

1.4HTML基本结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XzqS845T-1601210227954)(C:\Users\dell\Desktop\FC)]449MQ[9Z8~}6%VB8[BGA.png)

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

</body>
</html>

DOCTYPE: 告诉浏览器，我们要使用什么规范

<!DOCTYPE html>

head: 标签代表网页头部

<head>

</head>

meta: 描述性标签，它用来描述我们网站的一些信息

<meta charset="UTF-8">

title: 网页标题

<title>Title</title>

body: 标签代表网页主体

<body>

</body>

2.网页基本标签

1.1标题标签

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

1.2段落标签

<p>段落标签，将这里的内容与上下文分隔一个段落</p>

1.3换行标签

会在这里产生一个换行的效果，使“br”之前的内容与下文隔开一行<br>

1.4水平线标签

会在此行产生一个黑色的分割线

<hr>

1.5字体样式标签

<strong>这里的内容为加粗字体</strong>

<em>这里的内容为斜体字体</em>

1.6注释和特殊符号

<!--这里的内容为注释内容-->

“#”之后书写规定内容会产生相应的特殊符号，如：

&nbsp;表示空格

&gt;表示大于号

&lt;表示小于号

3.图像，超链接

3.1图像标签

<img src="插入图片后，此处填写路径" alt="此处为图片元素的名称" title="当鼠标在图片上悬停时显示此次内容" height="图片的高度" width="图片的宽度">

3.2超链接标签

<a href="此处为链接地址">网页上将显示此处的内容作为链接入口可供点击</a>

此外还可了解一下锚链接跳转，即先标记一个锚，然后再写一个链接可以跳转到锚标记处。

<a href="（“#+name”之前加上其他网站链接还可实现不同页面的跳转）此处填写需要跳转的标记“name”并且需要在name之前加上#>此处为网页上显示的内容作为跳转链接</a>

3.3邮件链接

<a href="mailto:此处填写需要跳转的邮箱地址">此处为网页显示的内容作为跳转链接</a>

4.列表，表格，媒体元素

4.1列表

有序列表：

<or>
    <li>有序列表排行第一的内容</li>
    <li>有序列表排行第二的内容</li>
    <li>有序列表排行第三的内容</li>
    ...
</or>

无序列表：

<ul>
    <li>无序列表在第一位的内容</li>
    <li>无序列表在第二位的内容</li>
    <li>无序列表在第三位的内容</li>
    ...
</ul>

自定义列表

<dl>
    <dt>列表名称</dt>
    <dd>列表内容</dd>
    <dd>列表内容</dd>
    <dd>列表内容</dd>
    
    <dt>列表名称</dt>
    <dd>列表内容</dd>
    <dd>列表内容</dd>
    <dd>列表内容</dd>
    ...
</dl>

4.2表格

table为表格，tr为行，td为列

<table>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
        <td>第一行第三列</td>
    </tr>s
    <tr>
        <td colspan="x"(此处表示该格子会在当前行占用x列的大小)></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="x"(此处表示该格子会在当前列占用x行的大小)></td>
        <td></td>
        <td></td>
    </tr>
    ...
</table>

4.3媒体元素

插入视频：

<video src="此处为插入视频的地址" controls(视频的进度条，音量大小控制等) autoplay（进入网页后自动播放）></video>

插入音乐：

<audio src="此处为插入音乐的地址" controls（控制条） autoplay（自动播放）></audio>

5.iframe内联框架

在当前网页中直接打开链接所指向的内容。如：在自己新建的网页中可以直接显示哔哩哔哩的网页

frameborder为框架边框

<iframe src="https://www.bilibili.com/" frameborder="0" width="1500px" height="800px"></iframe>

这里我们需要理解内联框架到底是什么意思。

内联框架说的简单一些就是在当前网页中的某个地方开辟一个可以自己规定大小的模块，而这个模块可以用来直接展示其他网页的内容（在该模块中打开其他网页）。一定要理解这始终只是一个模块，没有新建窗口。

这里可以帮助你理解一下内联框架。

给该模块定义一个name用来标记它。然后弄一个链接把它的打开目标设置为该模块的name。

这个时候在你刚刚打开该网页时，你会发现该模块开始显示的是网址为"https://hao.360.com/"的网页并且模块下面有一个可以点击的链接“哔哩哔哩动画”。点击链接后，该模块的内容就变成了网址为“https://www.bilibili.com/”的哔哩哔哩动画网页了。

<iframe src="https://hao.360.com/" name="tiao" frameborder="0" width="1500px" height="800px"></iframe>

<a href="https://www.bilibili.com/" target="tiao">哔哩哔哩动画</a>

6.表单及表单应用

什么是表单呢？

假设我们登陆一个网站如哔哩哔哩动画，这时候我们就需要填写登陆的账号和密码。这个，就是表单。有填写的地方，也有提交的地方。

action为表单提交的地方，可以是地址等等。method为提交方式有“get”和“post”两种，get相对不安全但快速，post更安全但更慢。

编辑提交内容时，可以用input的“text”表示输入框，“password”表示为密码输入框和“text”的区别在于前者输入文字不会显示出来，并且都给他们一个name以区别开来。最后还可用input的submit来提交表单，reset为重置输入的信息。

在输入框内还可这样设定

<input type="text" name="username" value="sd" size="50" maxlength="30">

value表示输入框内的初始值，size表示文本框的长度，maxlength表示文本框的最大输入限度

这里还可以通过input设定radio单选框，分别给他们一个值value（这个值是提交表单时传上去的值）。然后将各个单选框分到一个name里面去，这表示他们是一道题目里面的，不然就无法做到只能选一个了。框外的中文是在网页中会显示的内容，但并不是真正提交的值。

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

当然还有checkbox多选框，分别给他们值（提交表单时传上去的值），再把name设置为同一个，就可以实现多选了。

<p>
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="LOL" name="hobby">英雄联盟
    <input type="checkbox" value="girl" name="hobby">女人
</p>

还可以自己设定一个button按钮，给他一个name，还有value，value是显示在按钮上面的内容。还可以有一个图片按钮，但点击图片按钮就会实现提交。

<p>
    <input type="button" name="btn1" value="点击按钮">
    <input type="image" src="../tupian/digeng.png">
</p>

还有下拉框功能，用select表示。option为选项，value为提交的值，selected表示初始选中的选项，中文的地方表示下拉框选项显示的内容

<p>国家：
    <select name="国家">
        <option value="China">中国</option>
        <option value="UK" selected>英国</option>
        <option value="USA">美国</option>
    </select>
</p>

还有文本域的实现，可以使用textarea。cols表示列数，rows表示行数

<p>反馈意见：
    <textarea name="textarea" cols="30" rows="10"></textarea>
</p>

还可以上传文件

<p>
    <input type="file" name="files">
</p>

这里还有邮箱，URL功能，都可以输入对应的邮箱和地址，并且自动验证格式是否正确。数字可以在输入框内输入对应的数值，可以设置最大或最小值，以及增加值，range为滑块的样式。search为搜索框。

<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="10">
</p>
<p>音乐：
    <input type="range" name="voice" min="0" max="100" step="1">
</p>
<p>搜索：
    <input type="search" name="search">
</p>

readonly表示只读，disabled表示禁用选项，

<p>用户名：<input type="text" name="username" value="sd" size="50" maxlength="30" readonly></p>

此处会产生一个名为”mark“标记，点击它时，会自动跳转到id为”mark“的元素

<p><label for="mark">此处为标记</label></p>

添加在输入框内可使得当输入框内没有信息时会显示此处的内容

placeholder="会显示此处的内容"

在输入框内添加required，可使得该输入框在提交时不得为空。

<form action="列表.html" method="get">
	<p>用户名：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="pwd"></p>
	<p>
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>
    <p>
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="LOL" name="hobby">英雄联盟
        <input type="checkbox" value="girl" name="hobby">女人
    </p>
    <p>
		<input type="button" name="btn1" value="点击按钮">
        <input type="image" src="../tupian/digeng.png">
    </p>
        
    <p>国家：
        <select name="国家">
            <option value="China">中国</option>
            <option value="UK" selected>英国</option>
            <option value="USA">美国</option>
        </select>
    </p>
    <p>反馈意见：
        <textarea name="textarea" cols="30" rows="10"></textarea>
    </p>
    <p>
        <input type="file" name="files">
    </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="10">
    </p>
    <p>音乐：
        <input type="range" name="voice" min="0" max="100" step="1">
    </p>
    <p>搜索：
        <input type="search" name="search">
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

weixin_45947655

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML：前端出发的地方

HTML：前端出发的地方HTML1.初识HTML---->HTML ---->Hyper Text Markup Language(超文本标记语言)1.1什么是HTML？（1）HTML指的是超文本标记语言（Hyper Text Markup Language），是用来描述网页的一种语言（2）不是编程语言，而是一种标记语言（3）标记语言是一套标记标签（markup tag）1.2html作用简单理解：网页是由网页元素组成，这些元素是利用html标签描述出来，然后通过浏览器解析
复制链接

扫一扫