H5C3-day01

最新推荐文章于 2024-08-15 08:55:57 发布

迷失555

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量738

点赞数 30

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_62012576/article/details/136564694

版权

开发工具介绍

 一、HTML的注释： 程序不识别  ctrl+/
<!--我们都是前端程序员--> 
 二、开发工具的介绍：
    1、编辑器：
        HBuilder：后期做UNIApp/微信小程序
        DW：比较古老，控件的拖动
        sublime：界面简介，插件少
        webStorm:后期做vue项目的开发
        vscode：插件丰富，各大公司都在使用   
    2、五大主流浏览器：（重点）  
        谷歌浏览器：webkit-blink
        IE浏览器:trident
        火狐浏览器:gecko
        欧朋浏览器:Presto-webkit-blink
        safari浏览器:webkit
    3、Ps（协助开发）
  三、浏览器的内核包含：
        1、渲染引擎：网页内容如何展示在浏览器端
        2、js引擎：解析JavaScript代码的
  四、web标准：不仅仅是一个标准，而是一个标准的集合
      结构标准：HTML统一
      样式标准：CSS统一
      行为标准：JS统一

HMTL骨架

 一、HTML概念：Hyper Text Markup Language  超文本标记（标签）语言 
    用来描述网页的一门标记语言
    因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。
    切记：HTML不是编程语言
 二、HTML的骨架： 
 1、标签的写法  <开始标签></结束标签> 
 2、标签的分类：双标签/单标签 
 3、字符集的设置:为了防止出现页面乱码 
    <!-- 元标签 -->
    <!-- <开始标签 属性名="属性值"> -->
    <meta charset="UTF-8" />
 4、标签与标签之间的关系 
        嵌套关系（父子） html>head  子标签相对于父标签缩进一个tab键位
        并列关系（兄弟） head-body meta-title
5、文档类型   :当前的文档是最标准的H5的文档类型-->
<!DOCTYPE html>
根标签
<html>
头部标签:设置网站的属性特征 
  <head>
    <!-- 网站的标题 -->
    <title>我的第一个网站</title>
  </head>
  <!-- 主体标签：书写网页的内容 -->
  <body></body>

常见的标签

一、标题标签 hn  1<=n<=6 且n是正整数
    特点：1、独占一行
               2、字体默认加粗变大，n与字体大小成反比
  <h1>我是网页的标题一</h1>
  <h2>我是网页的标题二</h2>
  <h3>我是网页的标题三</h3>
  <h4>我是网页的标题四</h4>
  <h5>我是网页的标题五</h5>
  <h6>我是网页的标题六</h6>
  我是普通的文本
二、段落标签 p 
      特点：另起一行
  <p>
    标签因为重要，尽量少用，不要动不动就使用h1。一般h1都是给logo使用，或者页面中最重要标题信息。
  </p>
  <p>
    记住一点，以后我们统统使用UTF-8 字符集,
    这样就避免出现字符集不统一而引起乱码的情况了记住一点，<br />以后我们统统使用UTF-8
  </p>
三、换行标签 br
四、水平线标签 hr  width宽度、size高度
  <hr width="1000" size="10" />
五、盒子标签 div  用来做网页的布局，可以包含任意的标签 
  <div>
    <h4>我是div中的<span style="color: red">标题</span></h4>
    <p>我是div中的段落</p>
    <div>我是div中的div</div>
  </div>
六、范围标签 span 
      特点：不换行

结构化表现化标签

 1、加粗标签 b strong
    <p>现在开始讲<b>语义化标签加粗标签</b></p>
    <p>现在开始讲<strong>语义化标签加粗标签也能加粗</strong></p>
 2、倾斜标签 i em
    <p>现在开始讲<i>语义化标签-斜体标签</i></p>
    <p>
      现在开始讲<em><b>语义化标签-斜体标签</b></em>
    </p>
 3、下滑线标签 u ins
    <p>现在开始讲<u>语义化标签-下滑线标签</u></p>
    <p>
      现在开始讲<ins><i>语义化标签-下滑线标签</i></ins>
    </p>
 4、删除线标签 s del
    <p>
      现在开始讲<s>语义化标签-删除线标签</s></ins>
    </p>
    <p>
      现在开始讲<del>语义化标签-删除线标签</del></ins>
    </p>
共同特点：
        1、都是不会换行的
        2、每种效果的结构化有两个标签
        3、strong/em/ins/del比b/i/u/s更具有语义化和表现化
    <div>
      我是一个段落
    </div>
    <p>
      我是一个段落
    </p>
    <span>
      我是一个段落
    </span>

图片标签

一、标签名 img 
二、图片标签的属性
     src:图片的路径
     width:宽度
     height:高度
     title:图片的名称，当光标移入到图片上时显示title的属性值
     alt:当图片不显示时,显示alt的属性值
     border:边框
三、路径的分类：
       1、线上路径：通过域名访问
       2、本地路径:
          a、相对路径
             （1）图片文件与当前的html文件在同一目录下，./图片名称
             （2）图片文件在当前的html文件的下一级目录下，./文件夹名/图片名称
             （3）图片文件在当前的html文件的上一级目录下，../图片名称
          b、绝对路径：死路径（不建议使用）
 <img
   src="https://img14.360buyimg.com/babel/s380x300_jfs/t1/38284/34/21942/12366/6397f7b5E3ccf9286/3a61a76506df041f.png.avif"
 />
 <img
   src="https://img12.360buyimg.com/seckillcms/s280x280_jfs/t1/70989/10/22181/30797/633efc82Ef64b1bb0/a5f9b5c53eda39a8.jpg.avif"
 />
 <img src="C:\Users\19078\Desktop\前端新班.png" />
 <img src="./xiyanyang.jpg" alt="我是喜羊羊" border="20" />
 <img src="./images/9.jpg" />
 <img src="../2.jpg" width="300" height="300" title="刘德华拿奖" />

链接标签

  <head>
  <meta charset="utf-8" />
  <title>链接标签</title>
设置网页中所有a标签的链接打开方式 -->
  <base target="_blank">
</head>
<body>
一、标签名  a
  <a href="https://www.baidu.com">百度一下</a>
就近原则 
  <a href="https://www.qq.com" target="_self">腾讯网</a>
二、属性
      1、href:地址  有了下划线且字体颜色发生改变
         a、线上的地址
         b、本地的地址
         c、图片作为地址
         d、未知的地址  #
      2、target
          默认是在当前窗口中打开的
          _blank:在新的窗口中打开
          _self:在当前的窗口中打开
  <a href="./1-5 图片标签.html">跳转到图片标签的页面本地的</a>
  <a href="https://myhope365.com">天亮官网</a>
  <a href="#">我是一个未知的链接</a>
</body>

锚点定位

<!-- 锚点定位：链接的href的属性值与对应标题的id属性值保持一致且前加#号 -->
  <h1>喜洋洋与灰太狼电视剧</h1>
  <h3><a href="#first">第一集</a></h3>
  <h3><a href="#two">第二集</a></h3>
  <h3><a href="#three">第三集</a></h3>
  <h3><a href="#four">第四集</a></h3>
  <h3><a href="#five">第五集</a></h3>
  <h4 id="first">第一集的标题</h4>
  <p>
    《喜羊羊与灰太狼》是由广东原创动力文化传播有限公司制作的原创动画系列作品，以友情、搞笑、童话为主题。该动画以羊和狼两大族群间妙趣横生的故事为主线，讲述了羊狼凭借友谊和热爱，共同保卫家园、完成梦想的励志故事。
    [153]
    截至2022年7月，《喜羊羊与灰太狼》共播出作品37部2719集（主线25部2042集、网络短剧12部677集）、电影10部、舞台剧5部。《喜羊羊与灰太狼》是由广东原创动力文化传播有限公司制作的原创动画系列作品，以友情、搞笑、童话为主题。该动画以羊和狼两大族群间妙趣横生的故事为主线，讲述了羊狼凭借友谊和热爱，共同保卫家园、完成梦想的励志故事。
    截至2022年7月，《喜羊羊与灰太狼》共播出作品37部2719集（主线25部2042集、网络短剧12部677集）、电影10部、舞台剧5部。
  </p>
  <h4 id="two">第二集的标题</h4>
  <p>
    《喜羊羊与灰太狼》是由广东原创动力文化传播有限公司制作的原创动画系列作品，以友情、搞笑、童话为主题。该动画以羊和狼两大族群间妙趣横生的故事为主线，讲述了羊狼凭借友谊和热爱，共同保卫家园、完成梦想的励志故事。
    截至2022年7月，《喜羊羊与灰太狼》共播出作品37部2719集（主线25部2042集、网络短剧12部677集）、电影10部、舞台剧5部。
  </p>
  <h4 id="three">第三集的标题</h4>
  <p>
    《喜羊羊与灰太狼》是由广东原创动力文化传播有限公司制作的原创动画系列作品，以友情、搞笑、童话为主题。该动画以羊和狼两大族群间妙趣横生的故事为主线，讲述了羊狼凭借友谊和热爱，共同保卫家园、完成梦想的励志故事。
    截至2022年7月，《喜羊羊与灰太狼》共播出作品37部2719集（主线25部2042集、网络短剧12部677集）、电影10部、舞台剧5部。
  </p>
  <h4 id="four">第四集的标题</h4>
  <p>
    《喜羊羊与灰太狼》是由广东原创动力文化传播有限公司制作的原创动画系列作品，以友情、搞笑、童话为主题。该动画以羊和狼两大族群间妙趣横生的故事为主线，讲述了羊狼凭借友谊和热爱，共同保卫家园、完成梦想的励志故事。
    截至2022年7月，《喜羊羊与灰太狼》共播出作品37部2719集（主线25部2042集、网络短剧12部677集）、电影10部、舞台剧5部。
  </p>
  <h4 id="five">第五集的标题</h4>
  <p>
    《喜羊羊与灰太狼》是由广东原创动力文化传播有限公司制作的原创动画系列作品，以友情、搞笑、童话为主题。该动画以羊和狼两大族群间妙趣横生的故事为主线，讲述了羊狼凭借友谊和热爱，共同保卫家园、完成梦想的励志故事。
    截至2022年7月，《喜羊羊与灰太狼》共播出作品37部2719集（主线25部2042集、网络短剧12部677集）、电影10部、舞台剧5部。
  </p>
</body>

特殊字符

 <!-- 空格  &nbsp; -->
  <h1>大家记着晚上&nbsp;&nbsp;&nbsp;&nbsp;写作业</h1>
  <!-- 大于 > &gt; -->
  <p>10&gt;9</p>
  <!-- 小于 < &lt; -->
  <p>10&lt;9</p>
  <!-- 版权 &copy;  -->
  <p>Copyright &copy; 2004 - 2023 京东JINGDONG 版权所有</p>

列表标签

 <!-- 列表标签的特点：整齐、整洁、有序 -->
 <!-- 列表标签的分类：
   无序列表  ul>li   每个li前有默认的小点
   有序列表  ol>li    每个li前有默认的数字序号
   自定义列表 dl>dt-dd
 -->
 <!-- alt+B  -->
 <ul>
   <li><a href="#">家用电器</a></li>
   <li><a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a></li>
   <li><a href="#">电脑</a>/<a href="#">办公</a></li>
   <li><a href="#">家用电器</a></li>
 </ul>
 <ol>
   <li><a href="#">家用电器</a></li>
   <li><a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a></li>
   <li><a href="#">电脑</a>/<a href="#">办公</a></li>
   <li><a href="#">家用电器</a></li>
 </ol>
 <dl>
   <dt>河北省</dt>
   <dd>石家庄市</dd>
   <dd>秦皇岛</dd>
   <dd>张家口市</dd>
   <dd>邯郸市</dd>
   <dt>河南省</dt>
   <dd>郑州</dd>
   <dd>开封</dd>
   <dd>洛阳</dd>
 </dl>