web前端-----html(一)

最新推荐文章于 2025-03-13 10:27:26 发布

涮羊

最新推荐文章于 2025-03-13 10:27:26 发布

阅读量165

点赞数

文章标签：前端 html

本文链接：https://blog.youkuaiyun.com/weixin_74440897/article/details/131733040

版权

web前端-----html(一)

前言：

web前端针对于B/S 架构（browser浏览器 servse服务器）。html 为结构，即超文本标记语言（超：超链接），css 为表现，js 为行为。

1.html骨架

<html>

<head></head>

<body>



</body>

</html>

2.注释

对代码进行解释快捷键：ctrl+/

<!-- 注释 :对代码进行解释    ctrl+/-->

3.标题标签

h1-h6逐渐变小，独占一行。

    <h1>我是标题</h1>
    <h2>我是标题</h2>
    <h3>我是标题</h3>
    <h4>我是标题</h4>
    <h5>我是标题</h5>
    <h6>我是标题</h6>

4.段落标签

行与行之间空，会有空隙。

<p>戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。</p>
<p>此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
</p>《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少

5.换行标签，水平线标签

换行标签：

水平线标签：

<hr />
戴尔·卡耐基被誉为美国“成人教育之父”，他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容，是作者最成功的励志经典。<br />
此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言：“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。《人性的弱点》"身带穷气，一看便知"：犯了这些事情，贵人之气会减少

6.文本格式化标签

加粗：

<strong>...</strong>
<b>...</b>

段落（空一行）：

<p>...</p>

斜体字：

<em>...</em>
<i>...</i>

粉色字：

style="color: pink;"

下划线：

<u>...</u>
<ins>...</ins>

删除线：

<del>...</del>
<s>...</s>

7.无语义标签

<div>...</div>
<span>...</span>

8.图片标签

个人经历

```

13.小练习

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    <h1>今日搜索热词</h1>
    <hr />
    <h3>1、阿卡贝拉</h3>
    <p>阿卡贝拉 (意大利: Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例:<a href="./14-mp3.html">翻唱</a></p>
    <h3>2、翻唱</h3>
    <p>“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频列举:<a
            href="./15-mp4.html">有种悲伤</a></p>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Kj6J36B-1689348359230)(C:\Users\周帅阳\AppData\Roaming\Typora\typora-user-images\image-20230710221512849.png)]

14.mp3

<audio src="./images/music.mp3" controls></audio>

15.mp4

<video src="./images/video.mp4" controls></video>

16.有序列表

 <!-- 有序列表 ol  li-->
    喜欢的食物
    <ol type="a">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>奶茶泡饭</li>
    </ol>

17.无序列表

你喜欢的明星是？
    <ul type="circle">
        <li>丁真</li>
        <li>法外狂徒张三</li>
        <li>华晨宇</li>
        <li>罗翔</li>
    </ul>

18.自定义列表

    <dl>
        <dt>
            你们喜欢的明星是？
        <dd>
            张三
        </dd>
        <dd>
            里斯
        </dd>
        <dd>
            张三
        </dd>
        </dt>

    </dl>

19.iframe框架

 <!-- <iframe src="https://www.taobao.com" width="900px" height="600px"></iframe> -->
    <iframe src="https://www.baidu.com" width="900px" height="600px"></iframe>


    <a href="https://www.taobao.com" target="nn">去淘宝</a>
    <iframe name="nn" frameborder="0" width="800px" height="200px"></iframe>

20.特殊字符

<div>
        &lt;
        &gt;
      
</div>

空格，度数

<div>
        我最喜欢的大明星是&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;法外狂徒张三
        31&deg;
</div>

小练习

需求分析

制作登录页

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>欢迎您来到登录页</h1>
<a href="首页.html">首页</a>
<a href="列表页.html">列表页</a>
<a href="详细页.html">详细页</a>
<a href="登录页.html">登录页</a><br/>
<img src="素材/map.jpg">
</body>
</html>

运行结果
在这里插入图片描述