前端HTML(day01)

江户川小猿

已于 2024-06-14 11:01:02 修改

阅读量1k

点赞数 19

文章标签：前端 html

于 2024-06-13 10:16:01 首次发布

本文链接：https://blog.csdn.net/m0_72416265/article/details/139641174

版权

基本知识：

浏览器主要有以下部分组成：

1. 用户界面

包括浏览器中可见的地址输入框，浏览器前进返回按钮，打开书签，打开历史记录等用户可操作性的功能选项。

2. 浏览器引擎(渲染引擎)

渲染引擎负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

3. JS 解释器

用来解释和执行 JavaScript 代码，例如 V8 引擎，执行 javascript语言来实现网页的动态效果。

4. 网络功能模块

浏览器开启网络线程发送请求或下载资源文件的模块。

5. 数据持久化存储

处于持久层，浏览器需要在硬盘中保存类似 cookie 的各种数据。

**web主要包括结构、表现、行为三方面：**

| 含义 | 内容 |

| ---- | --------------------------------------------------------- |

| 结构 | 用于对网页元素的进行整理和分类，指的就是html； |

| 表现 | 用于设置网页元素的版式、颜色、大小等外观样式，指的就是css |

| 行为 | 指网页模型的定义以及交互的编写，主要指的就是javascript； |

简单理解，结构写到html文件中，表现写到css文件中，行为写到Javascript文件中。

1.基础标签

html

文字标签：

p：段落标记;

div:常用标签，块级元素，单独显示一行

span:行内元素，不单独显示一行

i，em:斜体; b,strong 粗体;

s,del:删除线;u, ins:下划线;

**最常用的字符实体**

| ` ` | 空格(不换行空格) | `  ` | ` ` |

| ` ` | 空格（全角） | `&emsp;` | ` ` |

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性:

| 属性 | 描述 |

| --------------------------------- | ------------------------------------------------------------ |

| href( Hypertext Reference的缩写) | 意思是超文本引用，用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 |

| target | 用于指定链接页面的打开方式，其取值有`_self`和`_blank`两种，其中`_self`为默认值，`_blank`为在新窗口中打开方式。 |

2.注意事项

> 注意:

> strong、em 、del 、ins 标签(推荐使用)有语义，起到加重语气的效果;

> b、 i 、s、 u标签是没有的语气

*小知识

插件推荐：

Auto Rename Tag：自动闭合标签

HTML标签的语义化

所谓标签语义化，就是指标签的含义，合适的地方给一个最为合理的标签

1. 方便代码的阅读和维护

2. 同时让浏览器可以很好地解析，从而更好分析其中的内容

3. 使用语义化标签会具有更好地搜索引擎优化。

网页的icon图标<link>

`<head>` 元素包含了所有的头部标签元素,使用link标签添加icon图标，meta标签添加网站相关信息。

- 添加icon图标

```html

```

3.代码

新闻

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p {
      text-indent: 2em;
    }

    div {
      text-align: center;

    }
  </style>
</head>

<body>
  
    <img src="./images/xiaoimg.png" alt="">
    <span>新闻频道 > 中国新闻</span>
  <h2>东方之珠不夜城 回归祖国24周年的香港前行再出发</h2>
  <p>来源：央视网 | 2024年07月05日 09:54</p>
  <p><strong>央视网消息：</strong>7月1日是中国共产党成立100周年，也是香港回归祖国24周年纪念日。这两天，香港中环添马公园的灯光秀特别推出了高科技裸眼3D视频，给观众带来全新的感受。</p>

  <p>此次光影秀最大的特点是以“科技、创新”为主题，全新展示裸眼3D内容。在大屏幕上循环播放“南湖红船-开国大典-香港回归-走进新时代”的主题脉络，重温中国共产党百年历程中的重大历史时刻，感受香港与祖国的血脉相连。
  </p>

  <div><img src="./images/1.jpg" alt=""></div>
  <p>在大屏幕四周，通过灯光、图案等技术融合，打造光影休闲娱乐区，主题是“星耀维港”，红星照耀维多利亚港，星火点亮添马公园，寓意香港愈加繁荣，增强民族凝聚力。</p>
  <div><img src="./images/2.jpg" alt=""></div>

  <p>
    24年前，香港重回祖国怀抱，掀开了崭新的历史篇章。24年后，香港维护国家安全法出台，完善香港选举制度条例通过，为“一国两制”行稳致远打下坚实的法律基础和安全保障，香港踏上了新的历史起点。</p>

  <p>
    如今，香港维多利亚港两岸的夜景是世界知名的观光点之一，入夜后万家灯火，相互辉映。晚上8点，“幻彩咏香江”灯光音乐汇演正式拉开帷幕，几十幢香港的主要建筑同时化身为声光交织的舞台。汇演包括旭日初升、活力澎湃、继往开来、共创辉煌等四个主题。缤纷的色彩引领观众体验香港这个活力充沛、朝气蓬勃、多姿多彩的国际大都会。
  </p>

  <div><img src="./images/3.jpg" alt=""></div>

  <p>
    潮涌大湾区，风好正扬帆。2024年全国两会上，“十四五”规划和2035年远景目标纲要专门提及两个特别行政区并规划未来发展方向，令香港各界倍受鼓舞。香港融入国家发展大局正迎来最佳机遇期，大湾区的规划和发展有助于香港突破发展瓶颈，为香港发挥优势，搭上祖国发展的高速列车提供广阔空间。
  </p>
  <p style="color: blueviolet;"> 编辑：刘珊 责任编辑：刘亮</p>
</body>

</html>

百度

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .kk{
      text-align: center;
    }
    
    .search{
      margin-top: 30px;
    }
    .format{
      margin-top: 30px;
    }
    button{
      width: 100px;
      height: 30px;
      background-color: rgb(237, 237, 224);
    }
    .s{
      margin-top: 30px;
    }
    .q{
      margin-top: 20px;
    }
  </style>
</head>

<body>
 <div class="kk">
  <div class="logo">
    <img src="./images/bd_logo1.png" alt="">
  </div>
  <div class="chu">
    <a href="#">新 闻</a>
    <strong><a href="#" style="color: black;">网 页</a></strong></span>
    <a href="#">贴 吧</a>
    <a href="#">知 道</a>
    <a href="#">音 乐</a>
    <a href="#">图 片</a>
    <a href="#">视 频</a>
    <a href="#">地 图</a>
  </div>
 <div class="search">
  <input type="text" style="width: 350px; height: 30px;">
  <button>百度一下</button>
 </div>
<div class="format">
  <span><a href="#">百科</a></span>
  <span><a href="#">文库</a></span>
  <span><a href="#">hao123</a> </span>
  <span>|</span>
  <span><a href="#">更多>></a></span>
</div>
  <div class="s">
    <img src="./images/ditu.jpg" alt="" style="width: 13px;width: 13px;">
    <a href="#">百度地图带你吃喝玩乐，全心全意为人民服务</a>
  </div>

   
  <div class="q">
    <div>
      <a href="#">把百度设为主页</a>&nbsp;&nbsp;&nbsp;<a href="#">安装百度卫士</a>
    </div>
    <a href="#">加入百度推广</a>
  <span>|</span>
  <a href="#">搜索风云榜</a>
  <span>|</span>
  <a href="#">关于百度</a>
  <span>|</span>
  <a href="#">About Baidu</a>
  <p>&copy;2021 Baidu 使用百度前必读 京ICP证030173号</p>
  </div>
 </div>
</body>

</html>

4.3D旋转

最后自己做的一个小东西分享给大家

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D旋转</title>
  <style>
    body {
      perspective: 2000px;
    }

    @keyframes move {
      0% {
        transform: rotate3d(0, 0, 0, 0deg);
      }

      25% {
        transform: rotate3d(0, 0, 1, 90deg);
      }

      50% {
        transform: rotate3d(0, 1, 0, 180deg);
      }

      75% {
        transform: rotate3d(0, 1, 1, 270deg);
      }

      100% {
        transform: rotate3d(1, 1, 1, 360deg);
      }
    }

    #box {
      width: 300px;
      height: 300px;
      margin: 0 auto;
      position: relative;
      transform-style: preserve-3d;
      animation: move 5s linear infinite;
     
    }

    #box div {
      width: 300px;
      height: 300px;
      line-height: 300px;
      /* 变圆超出的隐藏 */
      overflow: hidden;
      margin: 0 auto;
      margin-top: 180px;
      text-align: center;
      position: absolute;
      font-size: 30px;
      border: 1px solid #180303;
      transition: all 5s;
    }

    #box img {
      width: 100%;
      height: 100%;
    }

    #box .top {
      /* 先旋转后移动 */
      transform: rotateX(90deg) translateZ(150px);
    }

    #box .bottom {
      /* 先旋转后移动 */
      transform: rotateX(90deg) translateZ(-150px);
    }

    #box .left {
      /* 先旋转后移动 */
      transform: rotateY(90deg) translateZ(-150px);
    }

    #box .right {
      /* 先旋转后移动 */
      transform: rotateY(90deg) translateZ(150px);
    }

    #box .front {
      transform: translateZ(150px);
    }

    #box .back {
      transform: translateZ(-150px);
    }
    #box:hover .top{
      transform: rotateX(90deg) translateZ(300px);
      border-radius: 50%;
    }
    #box:hover .bottom{
      transform:rotateX(90deg) translateZ(-300px);
      border-radius: 50%;
    }
    #box:hover .left{
      transform:rotateY(90deg) translateZ(-300px);
      border-radius: 50%;
    }
    #box:hover .right{
      transform:rotateY(90deg) translateZ(300px);
      border-radius: 50%;
    }
    #box:hover .front{
      transform: translateZ(300px);
      border-radius: 50%;
    }
    #box:hover .back{
      transform: translateZ(-300px);
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <div id="box">
    <div class="top"><img src="https://img2.baidu.com/it/u=2500719389,315502774&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667" alt="胡歌"></div>
    <div class="left"><img src="https://img1.baidu.com/it/u=1559993049,842654742&fm=253&fmt=auto&app=120&f=JPEG?w=654&h=368" alt="胡歌"></div>
    <div class="right"><img src="https://img2.baidu.com/it/u=2989934915,3701278951&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666" alt="胡歌"></div>
    <div class="bottom"><img src="https://img1.baidu.com/it/u=3577677226,803299800&fm=253&fmt=auto&app=120&f=JPEG?w=579&h=436" alt="胡歌"></div>
    <div class="front"><img src="https://img2.baidu.com/it/u=3250231179,2355478160&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800" alt="胡歌"></div>
    <div class="back"><img src="https://img1.baidu.com/it/u=3723758754,2812989828&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333" alt="胡歌"></div>
  </div>
</body>

</html>

总结与体会

作为一个小白，这是我的第一篇博客，深感荣幸各位的浏览，粗鄙的代码给你们带来一丝帮助万分荣幸。山河不足重，重在遇知己，愿君此生常如意。

江户川小猿

关注

19
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
前端HTML(day01)

target | 用于指定链接页面的打开方式，其取值有`_self`和`_blank`两种，其中`_self`为默认值，`_blank`为在新窗口中打开方式。| 表现 | 用于设置网页元素的版式、颜色、大小等外观样式，指的就是css || ` ` | 空格(不换行空格) | ` ` | ` ` || 显示结果 | 描述 | 实体名称 | 实体编号 || ` ` | 空格（全角） | ` ` | ` ` |
复制链接

扫一扫