HTML认知1

最新推荐文章于 2024-05-31 09:45:22 发布

冰阔落留给我

最新推荐文章于 2024-05-31 09:45:22 发布

阅读量85

点赞数

文章标签： html 前端 html5

本文链接：https://blog.csdn.net/lsz13390093003/article/details/130476440

版权

一、基础认知

1.基础概念

（1）认识网页

（2）五大浏览器和渲染引擎

（3）web标准

结构：HTML 表现：CSS 行为：JS

二、HTML初体验

1.基础概念

HTML：超文本标记语言

加粗效果：<strong>XXX</strong>

2.基本结构标签

<head> <html><body><title>......

3.开发工具

VSCode快捷键

1.快速复制一行

Shift+alt+上（下）剪头

2.选定多个单词

Ctrl+d

3.添加多个光标

Ctrl+alt+上（下）剪头

4.全局替换

Ctrl+h

5快速跳行

Ctrl+g

4.HTML常用标签

4.1标题标签<h1> - <h2>

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>鸡你太美</h1>
    <h2>鸡你太美</h2>
    <h3>鸡你太美</h3>
    <h4>鸡你太美</h4>
    <h5>鸡你太美</h5>
    <h6>鸡你太美</h6>
</body>

</html>

效果：

4.2段落标签和换行标签

<p> </p>:可以将HTML文档分割为若干段落。（距离小）

<br/>:强制换行（距离大）

4.3文本格式化标签

4.4<div>和<span>标签

作用：盒子，没有语义，用来装内容

<div>只能放一个（大盒子）（跨越）

<span>可放多个内容（小盒子）（连接）

4.5图像标签和路径

1.图像标签

<img>定义HTML中的图像

用法：<img scr="图像URL"/>

2.其他属性：

3.其他注意点：

4.6图像标签和目录

1.目录文件夹

2.根目录

3.相对路径：

4.绝对路径：

4.7超链接标签

1.外部链接

语法格式：<a href="跳转目标" target="目标窗口的弹出方式（_blank或_self）">文本或图像</a>

例子：

2.内部链接

语法格式：<a href="index.html">首页</a>

例子：

3.空链接

语法格式：<a href="#">公司地址</a>

4.下载链接

地址链接的是文件.exe或者 zip等压缩包形式

语法格式：<a href="img.zip">下载文件</a>

5.网页元素链接

语法格式：<a href="网址"><网页元素></a>

例子：

6.锚点链接

4.8注释与特殊字符

1.注释

2.特殊字符

三、综合案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>蔡徐坤</h1>
    <img src="images/卡通.jpg" width="100" height="100">
    <p>喜欢唱、跳、RAP、篮球（合称Ctrl）。</p>
    <p>练习时长两年半(其实现在时长变多了)的个人练习生。</p>
    <p>自带music，篮球技术奇特，舞蹈动作同样奇特。</p>
    <p>拥有将篮球与舞蹈动作相结合的能力。</p>
    <p>擅长唱鸡你太美。</p>
    1.<a href="#ji">鸡你太美</a><br>
    2.<a href="#niganma">你干嘛～哎呦</a><br>
    3.<a href="#liangnianban">两年半</a><br>
    4.<a href="#ikun">ikun</a><br>

    <h2 id="ji">鸡你太美(北冥有鱼 其名为鲲 化而为鸡 鸡你太美)</h2>

    <p>本歌曲/视频为知名流量明星蔡徐坤早年在男团选秀节目《偶像练习生》中的一场歌（尬）舞。</p>
    <img src="images/打篮球.jpg" width="500" height="300">
    <p>
        2019年1月，蔡徐坤获任NBA新春贺岁形象大使，众多网友对此事持嘲讽态度，他在《偶像练习生》中的这段才艺表演视频也遭人挖出。在该视频中，其行云流水（不忍直视）的基础球技、精彩绝伦（匪夷所思）的动作和生动到位（鬼畜）的表情令人刮目相看（大跌眼镜）。
    </p>

    <p>
        在篮球表演紧接着的歌舞中，歌曲的第一句歌词“只因你太美”因南方口音、语速过快等原因而被读成了“鸡你太美”。结合开场的篮球街（尬）舞，本句的空耳更为视频增添了许多喜感。
    </p>
    <img src="images/铁山靠.png" width="500" height="300">
    <p>
        该视频在网络上红极一时，大量网友以鬼畜、表情包等形式对蔡徐坤展开恶搞。众多与“鸡”相关的事物也因此风评被害，例如在2019年中发售的东方新作《东方鬼形兽》中初登场的角色庭渡久侘歌就未能幸免。
    </p>
    <p>
        除了蔡徐坤打篮球片段被鬼畜以外，蔡徐坤在《偶像练习生》的一段采访（你干嘛~哈哈~哎哟~）也给观众留下了深刻的印象。
    </p>

    <p>
        蔡徐坤的相关语录也被纳入鸡你太美鬼畜系，例如“一个真正的man”在二次流行期间就遭到了迫害。
    </p>

    <h2 id="niganma">你干嘛～哎呦</h2>

    <p>
        出自2018年《偶像练习生》中蔡徐坤接受采访的片段，因为语气和动作过于浮夸而成为恶搞素材。
    </p>
    <p>
        <img src="images/你干嘛.jpg" width="300" height="400">
    </p>


    <h2 id="liangnianban">两年半</h2>
    <p>
        蔡徐坤的代称，其于2016年出道，到2019年才艺展示时已有两年半左右的时间，在才艺展示的视频中也自称“练习时长两年半”。该词有时也被写成“2.5”或“一坤年”，并进一步发展为独有的数量词“坤”，1坤＝2.5。
    </p>

    <h2 id="ikun">IKUN</h2>
    <p>
        蔡徐坤的粉丝群体一般统称为“IKUN”（爱坤）。
    </p>
    <p>
        众所周知，铁粉（指粉末状铁）是黑色的。有时候制作坤坤鬼畜视频的UP和爱看坤坤鬼畜视频的人也经常吹嘘，说自己才是黑到深处自然厨的IKUN。
    </p>
    <p><a href="图集.HTML" target="_blank">坤坤美图</a></p>
    <p>更多内容<a href="https://baike.baidu.com/item/%E8%94%A1%E5%BE%90%E5%9D%A4?fromModule=lemma_search-box#8">百度一下</a></p>
</body>

</html>

运用了以上的知识，如图片标签，锚点标签，路径等等。

效果如下：