PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 前端开发环境搭建,初识HTML

前端开发环境搭建,初识HTML

残破的蛋蛋
残破的蛋蛋 原创
2020年12月09日 13:22:40 990浏览

前端开发环境搭建,初识HTML

一、前端环境搭建

  • 安装VSCode,Chrome
  • 安装VS和Chrome插件
备注
  • 以上两项均已完成

二、初识HTML

1.标题和段落

  • 页面中看到的内容都是由元素组成的。

  • 元素是由标签描述,标签根据元素的类型分为双标签和单标签,每一个元素的特征由属性来描述,描述的属性写到起始标签中。

  1. <h1>开会通知:下个月每人加薪1000元</h1>
  2. <p>开会通知:下个月每人加薪1000元</p>
  • 元素是由标签和属性共同描述的
  1. <female sex="famale" sw="80, 90, 100" height="170" weight="200">女朋友</female>
  • html中的所有内容,如果想要添加到html文档中,就必须要使用一个标签
  1. // JS代码必须写到一个script标签中
  2. <script>
  3. const SITE = "Hello World!";
  4. </script>
  1. <?php
  2. // php代码必须放在一对php标签中
  3. echo "Hello World!";
  4. ?>
  1. <!-- 标题标签:除了设置文档标题之外,还可以用来划分页面结构的 -->
  2. <h1>Hello World</h1>
  3. <h2>Hello World</h2>
  4. <h3>Hello World</h3>
  5. <!-- 内容标签 <p></p> -->
  6. <p>程序猿界有一句话:每一个程序猿都应该拥有一台MacBook Pro</p>

2.链接与锚点

  • 链接标签 a标签-当今互联网的灵魂,实现了全球资源之间的共享

1.target属性:

  • 标签的 target 属性规定在何处打开链接文档。
描述
_blank 跳转到新的页面,在新窗口打开
_self (默认) 在相同的框架中打开被链接文档
_parent 在父框架集中打开被链接文档
_top 在整个窗口中打开被链接文档。
iframename 在指定窗口打开
  1. <!-- _self 当前窗口打开 -->
  2. <a href="跳转目标" target="_self">Hello World</a>
  3. <!-- _blank 跳转到新的页面,在新窗口打开 -->
  4. <a href="跳转目标" target="_blank">Hello World</a>
  5. <!-- 在指定窗口打开 target="iframe内联框架的name值" 此时a标签的target值需要跟iframe里的name值保持一致 -->
  6. <a href="https://www.baidu.com/" target="baidu">打开百度</a>
  7. <iframe srcdoc="点击上面的按钮打开百度" name="baidu" frameborder="0" width="600" height="500"></iframe>
  • 注意:
    **使用target="iframename"时,需要注意a标签的target值需要跟iframe内的name属性值相等**

2.锚点

  • 使用锚点可以实现在当前页面中的任意位置进行跳转
  1. <a href="#footer">跳转到底部</a>
  2. <!-- 创建锚点 -->
  3. <div id="footer" style="margin-top: 1000px;">This is footer</div>
  • div:通用元素标签,内部可以放任意元素类型

  • 如何返回当前页面顶部?
    直接将a标签的href值设置为#即可,如:

    1. <a href="#">回到顶部</a>
  • 备注:
    vue.js、react等单页面应用,路由就是使用锚点实现的

三、图片元素

如果我们想要在页面添加一张图片,可以使用img标签

  • 必须属性
属性 说明
src URL 图片的URL地址
alt text 图片的描述信息
  • 案例:
    1. <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度一下" width="200">
  • 备注:
    设置图片的大小时,可以只设置宽度或者高度,另外一个属性就会等比缩放,不要同时设置。
    在实际的开发过程中,一般都在CSS中设置图片的样式,图片很少单独使用,基本都是用在链接中。
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议