HTML常用标签

HTML常用标签

超链接 <a></a>

<a href="跳转地址" target="目标窗口">心之所向</a>

跳转地址可以是：

1. 普通url

   https://www.jd.com

2. url+元素id：跳转到特定页面的莫个元素

   https://www.test.html#element_id

   如果是当前页面，可以直接写 “#element_id”

目标窗口

1. 默认是在当前窗口打开
2. “_blank” : 在新窗口打开
3. 在 iframe 中打开: 通过iframe的名称进行关联

   <a href="https://www.jd.com" target="pretty_girl">我的眼里只有你</a>
    <hr />
    <iframe
      name="pretty_girl"
      height="500"
      width="800"
      srcdoc="<h1>为什么受伤的总是我！</h1>"
    ></iframe>

图片 img

标签格式

<img src="图片网址" alt="说明文字" width="宽" height="高">

实例：宽高可以只写一个

 <img    src="https://img.php.cn/upload/article/000/000/003/612c76f293bfd127.png"
      alt="PHP布衣到大牛第17期"
      width="500"
      height=""
    />

列表 ol/ul

无序列表

 <ul>
      <li>itme1</li>
      <li>itme2</li>
      <li>itme3</li>
    </ul>

效果

有序列表

<ol>
    <li>item1</li>
    <li>item1</li>
    <li>item1</li>
</ol>

效果

表格

代码

table>thead>tr>td{表头}*3^^tbody>tr*2>td{表体}*3^^tfoot>tr>td{表尾}*3

效果

<table>
      <thead>
        <tr>
          <td>表头</td>
          <td>表头</td>
          <td>表头</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>表体</td>
          <td>表体</td>
          <td>表体</td>
        </tr>
        <tr>
          <td>表体</td>
          <td>表体</td>
          <td>表体</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>表尾</td>
          <td>表尾</td>
          <td>表尾</td>
        </tr>
      </tfoot>
    </table>

内嵌框架 iframe

代码

<a href="https://www.jd.com" target="pretty_girl">我的眼里只有你</a>
    <hr />
    <iframe
      name="pretty_girl"
      height="50%"
      width="300"
      style="border: 1px solid black"
      srcdoc="<h1>为什么受伤的总是我！</h1>"
    ></iframe>

点击前效果

点击后效果

CSS 预习

CSS通过特定的选择符来给页面中的元素添加样式

常用选择符有：

• “.class”
• “#id”
• html tag : body,h1,p,table

样式以成对的“属性：值”形式存在于 {} 中，并用”;” 分开。

一些例子如下：

  <style>
    body {
      background-color: powderblue;
    }
    h1 {
      color: blue;
    }
    p {
      color: red;
    }
    .class_name {
      display:none;
      width: 200px;
      height: 200px;
      background-color: red;
      margin: auto;
      padding: 10px 20px;
    }
    #id_name {
      display: inline;
      font-family: 'Courier New', Courier, monospace;
      font-size: large;
      font-weight: 500;
    }
  </style>