PHP 学习之路：第二天——认识HTML元素

在逃程序媛
218 阅读2分钟

一、元素框

1.元素框的查看

  1. 页面中看到的都是元素，它们以“框”的形式存在
  2. 使用CSS检查器查看 *{outline:1px solid red}

2.类型

  1. 块级框——块级元素——垂直排列
  2. 行内框——行内元素——水平排列
  3. 行内块级框——行内块元素——行间垂直，行内水平

3.描述

1. 标签

  • 双标签：可替换元素，内容写到两个标签之间
  • 单标签：不可替换元素，内容由标签属性指定

2. 属性

2.1. 通用属性

<!-- 1.id -->
<div id="root">内容</div>
<!-- 2.class -->
<div class="container">内容</div>
<!-- 3.style -->
<div style="width: 10px">内容</div>

2.2 预定义属性

<!-- 1.src -->
<img src="" alt="">
<!-- 2.href -->
<a href="www.php.cn">php中文网</a>
<!-- 3.type -->
<input type="email" name="" id="">

2.3 自定义属性

<!-- 例如：index,key -->
<li index="3" key="3">内容</li>

2.4 事件属性

<!-- onclick 点击事件-->
<p onclick="get()"></p>
<!-- onblur -->
<input type="text" name="name" onblur="check()">
<!-- onchange -->
<select name="level" onchange="get()"></select>

二、布局元素

image.png

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>布局元素</title>
  </head>
  <body>
    <!-- html4 -->
    <div class="header">页眉</div>
    <div class="main">主体</div>
    <div class="footer">页脚</div>

    <!-- html5 -->
    <header>页眉</header>
    <main>主体</main>
    <footer>页脚</footer>
  </body>
</html>

应用网页: www.apple.com.cn

三.文本元素

image.png

四、链接元素

32ccc0c3af064e7e85b1ecd68fdd4f6c_tplv-k3u1fbpfcp-watermark.jpg

<body style="display: grid;">
    <a href="https://php.cn" target="_self">当前窗口打开</a>
    <a href="https://php.cn" target="_blank">新窗口打开</a>

    <a href="https://qq.com" target="content">打开QQ新闻</a>
    <!-- 内联框架标签: 画中画,在一个页面嵌入另一个页面 -->
    <iframe src="" frameborder="1" name="content"></iframe>

    <a href="mailto:498668472@qq.com">发邮件</a>
    <a href="tel:1570551&&&&">1570551&&&&</a>
</body>

五、列表元素

image.png

<!-- 无序列表 -->
<ul type="circle">
  <li><a href="">首页</a></li>
  <li><a href="">教学视频</a></li>
  <li><a href="">社区问答</a></li>
</ul>
    
<!--nav 导航布局 -->
<!-- <nav>
    <a href="">首页</a>
    <a href="">教学视频</a>
    <a href="">社区问答</a>
</nav> -->

<!-- 有序列表 -->
<ol start="10">
  <li><input type="checkbox" name="" id="" />开晨会</li>
  <li><input type="checkbox" name="" id="" />吃午饭</li>
  <li><input type="checkbox" name="" id="" />准备晚上的吃什么</li>
</ol>

<!-- 自定义列表 -->
<dl>
  <dt>联系方式</dt>
  <dd><a href="mailto:4986XXXX@qq.com">发邮件</a></dd>
  <dd><a href="tel:1570551&&&&">1570551&&&&</a></dd>

  <dt>备案号:</dt>
  <dd>皖ICP-2222222222</dd>
</dl>

六、图像元素

image.png

<figure style="border: 1px solid">
  <a href=""><img src="图片地址.jpg" alt="认识HTML元素" width="100" /></a>
  <figcaption>
    <p><a href="">认识HTML元素</a></p>
  </figcaption>
</figure>

七、表格元素

image.png

小练习：制作课程表

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学生课程表</title>
  </head>
  <body>
    <table border="1" width="80%" cellspacing="0" cellpadding="5" align="center">
      <!-- 表头 -->
      <caption>
        <h3>学生课程表</h3>
      </caption>
      <thead>
        <tr bgcolor="lightskyblue">
          <!-- th:是添加了加粗和居中样式的的td,是td的plus加强版,适合做表头标题  -->
          <th>时间</th>
          <th>星期一</th>
          <th>星期二</th>
          <th>星期三</th>
          <th>星期四</th>
          <th>星期五</th>
        </tr>
      </thead>
      <!-- 上午的课程 -->
      <tbody align="center">
        <tr>
          <td rowspan="4" bgcolor="lightblue">上午</td>
          <td>英语</td>
          <td>语文</td>
          <td>数学</td>
          <td>历史</td>
          <td>地理</td>
        </tr>
        <tr>
          <td>英语</td>
          <td>语文</td>
          <td>数学</td>
          <td>历史</td>
          <td>地理</td>
        </tr>
        <tr>
          <td>英语</td>
          <td>语文</td>
          <td>数学</td>
          <td>历史</td>
          <td>地理</td>
        </tr>
        <tr>
          <td>英语</td>
          <td>语文</td>
          <td>数学</td>
          <td>历史</td>
          <td>地理</td>
        </tr>
      </tbody>
      
      <!-- 中间休息,整行所有单元格合并 -->
      <tbody>
        <tr bgcolor="lightgreen" align="center">
          <td colspan="6">中午休息</td>
        </tr>
      </tbody>
      
      <tbody>
        <tr>
          <td rowspan="2" bgcolor="lightblue">下午</td>
          <td>英语</td>
          <td>语文</td>
          <td>数学</td>
          <td>历史</td>
          <td>地理</td>
        </tr>
        <tr>
          <td>英语</td>
          <td>语文</td>
          <td>数学</td>
          <td>历史</td>
          <td>地理</td>
        </tr>
      </tbody>
      <tfoot>
        <tr bgcolor="#ccc">
          <td>备注：</td>
           <!-- 从第2列开始水平合并5列 -->
          <td colspan="5">在15:00-16:00自习写作业，写完作业在回家</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

效果图： image.png

八、表单元素

1.表单元素

image.png

2.label 控件标签

image.png

3.input 输入框

3.1 type 类型

image.png

3.2 其它属性值

image.png

4. select 下拉列表

image.png

5.textarea 多行文本域

image.png

6.datalist 控件可选值列表

image.png

7.button 按钮

image.png

8. fieldset 表单域分组

image.png

9.时间属性

image.png

小练习：制作一个简单的表单

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body style="width: 500px;">
      <!-- get： 数据在url地址中
      post: 数据在请求体中 -->
    <form action="" style="display: grid; gap: 0.5em" method="POST"  >
    <fieldset>
      <legend>必填项</legend></legend>
      <!-- 文本输入框 -->
      <div>
        <label for="username">帐号: </label>
        <input type="text" id="username" autofocus required placeholder="必须是6-8位" />
      </div>
      <div>
        <label for="password">密码: </label>
        <input type="password" id="password" required placeholder="必须是字母+数字" />
      </div>
      <div>
        <label for="email">邮箱:</label>
        <input type="email" name="email" id="email" placeholder="demo@mail.com" />
      </div>
     </fieldset>

      <div>
        <!-- 单选按钮:多选一 -->
        <label for="secret">性别:</label>
        <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
        <input type="radio" name="gender" value="female" id="female" /><label for="female">女</label>
        <input type="radio" name="gender" value="secret" id="secret" checked /><label for="secret">保密</label>
      </div>

      <div>
        <!-- 复选框 -->
        <label>爱好:</label>
        <!-- 因为允许同时提交多个值，所以name属性要写成数组格式 -->
        <input type="checkbox" name="hobby[]" id="programmer" checked /><label for="programmer">编程</label>
        <input type="checkbox" name="hobby[]" id="game" /><label for="game">游戏</label>
        <input type="checkbox" name="hobby[]" id="trave" checked /><label for="trave">旅游</label>
        <input type="checkbox" name="hobby[]" id="shot" /><label for="shot">摄影</label>
      </div>

      <!-- 下拉列表  -->
      <select name="level" id="">
        <option value="1">铜牌会员</option>
        <option value="2">银牌会员</option>
        <option value="3" selected>金牌会员</option>
        <option value="4">钻石会员</option>
      </select>
    
      <!-- datalist -->
      <!-- 相当于输入框+下拉列表 -->
      <!-- input + select  -->
      <div>
        <label for="">关键字:</label>
        <input type="search" name="search" id="" list="my-key" />
        <datalist id="my-key">
          <option value="html"></option>
          <option value="css"></option>
          <option value="javacript"></option>
        </datalist>
      </div>
      <div>
          <button type="submit">提交</button>
      </div>
    
    </form>
  </body>
</html>

效果图： image.png

九、元素框架

1.基本属性

image.png

2.了解 sandbox

image.png

iframe 标签的使用

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="https://j.map.baidu.com/61/g" target="map">北京</a>
    <a href="https://j.map.baidu.com/5f/7" target="map">合肥</a>
    <a href="https://j.map.baidu.com/45/g" target="map">上海</a>
    <hr />
    <iframe src="https://j.map.baidu.com/5f/7" frameborder="1" width="500" height="500" name="map"></iframe>
  </body>
</html>

效果图： image.png

十、视频/音频

image.png

十一、图片适配元素

image.png

avatar
文章
阅读
粉丝