2020 June 17 HTML与CSS

HTML第二篇：HTML元素-img/iframe/a/base/span/div

img元素

  1. img元素专门用来显示图片

     <img 
 src="https://www.baidu.com/img/dongsc_eb45d000832f8e889ff64951eaf7f381.gif" 
 alt="图片描述" 
 width="200" 
 >
  2. src属性(src是source的缩写)，用来设置图片的路径（url）
    1. 绝对路径：完整的描述文件位置的路径
    2. 相对路径： 由这个文件所在的文件夹引起的跟其他文件的路径关系
      1. .代表当前文件夹（1个点），可以省略
      2. ..代表上级文件夹（2个点）
    3. 注意： 对于网页来说，不管什么操作系统（windows、Mac、Linux）,路径分隔符都是/,不是\

    4. 举例：（下面两个效果相同）

       <img src="./imgs/test.png" alt="">
 <img src="imgs/test.png" alt="">
  3. alt属性设置图片站位文字
  4. 注意：
    1. img元素如果只设置了width（活height），浏览器会自动根据图片宽高比计算出height（或者width）
    2. 在HTML5规范中，alt是img元素的必要属性

常用的图片格式

  1. web中常用的图片格式有
    1. png：静态图片，支持透明，即：图片周围背景可以是透明的
    2. jpg：静态图片，不支持透明,即：图片周围背景不可以是透明的
    3. gif： 动态图片、静态图片，支持透明，即：图片周围背景可以是透明的

像素

  1. 像素（px）是图像显示的最小单位
  2. 每一个像素都能表示一种颜色
  3. 计算机显示的图像都是由一堆像素组成的。
  4. 组成图片的像素越多，显示越清晰
  5. 像素就是很多的小方格，每个小方格显示一种颜色
  6. 比如2560*1440像素，指的就是，将当前屏幕分割成横线2560个，竖线1440个，然后形成的小方格
  7. 图片的尺寸属性：width="200"200的单位就是px，指的就是像素

iframe元素

  1. 利用iframe元素可以实现：在一个HTML文档中嵌入其他的HTML文档
  2. 即： 在当前网页中拿出来一块用于显示其他网页的内容
  3. 常用属性：
    1. src：要显示的网页内容
    2. frameborder： 这块frame是否显示边框，0/1

  4. 代码举例：

     <!-- 在当前网页中拿出来一块用于显示其他网页的内容 -->
 <!--frameborder: 这块frame是否有边框，值要么为0，要么为1 -->
 <iframe src="https://www.baidu.com" frameborder="1" width="200" height="200"></iframe>

a元素

  1. a元素的作用
    1. 定义超链接，用于打开新的URL
  2. 常用属性
    1. href：指定要打开的url，Hypertext Reference的简称
    2. target： 在哪里打开URL
      1. _self: 默认值，在当前窗口打开URL
      2. _blank：在一个新的窗口中打开URL
      3. _parent: 在父窗口中打开URL
      4. _top： 在顶层窗口中打开URL
      5. 某个frame的name值：在某个frame中打开URL
  3. 例1：

    1. page_a.html 代码

       <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
 </head>
 <body>
     我是页面A
     <iframe src="./page_b.html" frameborder="1" width="500" height="300"></iframe>
 </body>
 </html>

    2. page_b.html 代码

       <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
 </head>
 <body>
     我是页面B
     <iframe src="./page_c.html" frameborder="1"></iframe>
 </body>
 </html>

    3. page_c.html 代码

       <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
 </head>
 <body>
     我是页面C
     <!-- 在当前页面打开 -->
     <a href="https://www.baidu.com" target="_self">百度self</a>
     <!-- 在新的标签打开 -->
     <a href="https://www.baidu.com" target="_blank">百度blank</a>
     <!-- 在父网页page_b中打开 -->
     <a href="https://www.baidu.com" target="_parent">百度parent</a>
     <!-- 在顶部网页page_c中打开 -->
     <a href="https://www.baidu.com" target="_top">百度top</a>
 </body>
 </html>
  4. 例2：

    1. frame.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>
 </head>
 <body>
     <!-- 当前网页分配显示了2个窗口，用来显示百度、淘宝 -->
     <iframe name="frame1" src="https://www.baidu.com" frameborder="1"></iframe> <br>
     <iframe name="frame2" src="https://www.taobao.com" frameborder="1"></iframe> <br>
     <!-- 在frame1窗口中打开 -->
     <a href="https://www.qq.com" target="frame1">腾讯网frame1</a>
     <!-- 在frame2窗口中打开 -->
     <a href="https://www.qq.com" target="frame1">腾讯网frame1</a>
 </body>
 </html>

      pic

锚点链接

  1. 锚点链接可以实现：跳转到网页中的具体位置
  2. 锚：顾名思义，船只定位。就是让网页滚动定位到某个位置

  3. 举例使用：index.html文件代码

     <body>
     <h2>目录</h2>
     <!-- 锚点：#+id的属性名称 -->
     <p><a href="#first">第1章</a></p>
     <p><a href="#second">第2章</a></p> 
     <p><a href="#third">第3章</a></p>
    
    <h3 id="first">第一章 标题</h3>
    <p>
        小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
        小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
    </p>
        
    <h3 id="second">第二章 标题</h3>
    <p>
        小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
        小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
    </p>
    
    <h3 id="third">第三章 标题</h3>
    <p>
        小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
        小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>小说内容<br>
    </p>
        
    <!-- #后面什么不加，则默认回到顶部 -->
    <a href="#">回到顶部</a> 
 </body>

  4. 如何跳转到其他页面的特定位置？

     <a href="index.html">打开小说</a>
 <a href="index.html#second">打开小说第二章</a>
  5. 这一句点击go会做什么？<a href="#one">go</a>
    1. id值为one的元素
    2. name为one的a元素

伪链接

  1. 有时候点击链接的时候并不希望打开新的URL,而是希望干点别的事情，这时可以使用伪链接
  2. 伪链接： 没有指明具体链接地址的链接。
  3. 点击链接之后具体要做什么事情，需要编写对应的JavaScript代码。
  4. 相当于把链接当做按钮使用

  5. 举例:

     <!-- 相当于把链接当做按钮使用 -->
 <a href="#" onclick="alert('充值成功') ; return false">立即充值</a>
 <a href="javascript:alert('充值成功');">充值</a>

图片链接

<!-- 点击图片，跳转到百度网页 -->
<a href="https://www.baidu.com" target="_blank">
   <img src="./imgs/test.png" alt="">
</a>

a元素的其他用途

  1. a元素一定是用来跳转到新的网页的吗？
  2. 不一定，如果url是一个下载链接，那么就是下载；如果是一个邮箱链接，那么就是邮箱登录或者发邮件

base元素

  1. 可以利用base元素设置当前页面所有a元素的默认行为
  2. 也可以用base设置当前页面所有相对地址的基址
  3. base写在head元素中

  4. 举例：

     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <!-- 
         target：这么一写，当前网页所有的超链接的target默认都是_blank
         href: 这么一写，当前网页所有的相对路径，都会被自动拼接这个href
         base: 就是基本，基础
      -->
     <base target="_blank" href="https://www.baidu.com">
 </head>
 <body>
     <a href="https://www.baidu.com" >百度</a> <br>
     <a href="https://www.JD.com" >京东</a> <br>
     <a href="https://www.taobao.com" >淘宝</a> <br>
     <a href="https://www.qq.com" >腾讯</a> <br>
     <!-- 会自动拼接成：https://www.baidu.com/img/bd_logo1.png -->
     <img src="img/bd_logo1.png" alt="">
 </body>
 </html>

span元素

  1. 作用：
    1. 默认情况下，跟普通文本没哟区别：<span>xx内容x</span>
    2. 用于区分特殊文本和普通文本，比如用来显示一些关键字
    3. 注意：strong标签，仅仅是用来强调加粗

div元素

  1. 作用
    1. 一般作为其他元素的父容器，把其他元素包住，代表一个整体
    2. 用于把网页分割成多个独立的部分

URL

  1. 什么是URL
    1. URL的全程是Uniform Resource Locator（统一资源定位符）
    2. URL就是资源地址、位置，互联网上的每个资源都有一个唯一的URL
    3. 通过一个URL,能找到互联网上唯一的一个资源
  2. URL的格式：
    1. URL的基本格式： protocol://hostname/path =>协议://主机地址/路径
    2. 协议： 不同的协议，代表着不同的资源查找方式、资源传输方式
    3. 主机地址： 存放资源的主机的IP地址(域名)
    4. 路径： 资源在主机中的具体位置
  3. URL常见的协议：
    1. http：
      1. 超文本传输协议，访问的是远程网络资源，格式是：http://
      2. http协议是在网络开发中最常用的协议
      3. https协议是相当于http协议的安全版
    2. file
      1. 访问的是本地计算机上的资源，格式是：file://(不用加主机地址)
    3. mailto
      1. 访问的是电子邮件的地址，格式是：mailto:
    4. ftp
      1. 访问的是共享主机的文件资源，格式是：ftp://
    5. ed2k
      1. 通过支持ed2k（专用下载链接）协议的p2p软件访问该资源（代表软件：电驴），格式是ed2k://
    6. thunder
      1. 通过支持thunder（专用下载链接）协议的p2p软件访问该资源（代表软件：迅雷）,格式是thunder://
  4. 更具体的URL
    1. protocol://hostname[:port]/path/[:parameters][?query]#fragment
      1. 比如：https://www.baidu.com:80/s?wd=ios#page
    2. port(端口号)：
      1. 一台拥有IP地址的主机可以提供许多服务，比如web服务、FTP服务、SMTP服务等
      2. 主机通过”IP地址+端口号“来区分不同的服务，端口号类似于营业厅的窗口
      3. 端口的默认范围是从0到65535，HTTP默认的端口号是80，FTP默认的端口号是21
    3. query
      1. 请求参数，提交给服务器的数据
    4. #fragment
      1. 锚点的位置

标签语义化

  1. 什么是标签语义化？
    1. 选择标签的时候要尽量让每一个标签都有正确的语义
  2. 虽然很多标签之间互换之后也能实现功能，但是还是要遵守”标签语义化“的原则
  3. 比如：图片用img标签、段落用p标签、文章用article标签等

All content is licensed under CC BY-NC-SA

Buit with Jekyll and 3-Jekyll theme • Hosted on Github

Table of Contents