0403 html 基础知识 2 - PHP学习

1.语义化结构元素

<h1>-<h6>:划分段落

<header>:页眉

<footer>:页脚

<main>：主体

<aside>：边栏

<section>：区块

<nav>:导航

<div>:通用容器

1.1 非语义化结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>传统方式：非语义化结构</title>
</head>
<body>
  <!---页眉-->
  <div class="header">
    <div class="nav">
      <a href="">Menu1</a>
      <a href="">Menu2</a>
      <a href="">Menu3</a>
    </div>
  </div>
  <!---内容主体区-->
  <div class="container">
    <!---边栏-->
    <div class="aside">
      <div class="ads">广告位</div>
    </div>
    <!---主体区-->
    <div class="main">
      <div class="article">
        <h3>php中文网</h3>
        <p>WEB开发者的家园</p>
      </div>
    </div>
  </div>
  <!---页脚-->
  <div class="footer">
    <div class="links">
      <a href="">links1</a>
      <a href="">links2</a>
      <a href="">links3</a>
    </div>
  </div>
</body>
</html>

1.2语义化结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>语义化结构</title>
</head>
<body>

<header>
<nav>
<a href="">Menu1</a>
<a href="">Menu2</a>
<a href="">Menu3</a>
</nav>
</header>

<div class="container">

<aside>
<section class="ads">广告位</section>
</aside>

<main>
<article>
<header></header>
<h3>php中文网</h3>
<p>WEB开发者的家园</p>
<footer></footer>
</article>
</main>
</div>

<footer>
<section class="links">
<a href="">links1</a>
<a href="">links2</a>
<a href="">links3</a>
</section>
</footer>
</body>
</html>

2.语义化的文本元素

<p>：段落,<pre>：代码原样渲染,<br>：换行,<span>：通用内联元素

<time>：时间,<abbr>：缩写,<address>：地址,<code>：代码段

2.1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>语义化的文本元素</title>
</head>
<body>
  <time>2020-04-03 </time>
  <p>
    <abbr title="超文本标记语言">HTML</abbr>
  </p>
  <p>2<sup>4</sup>=16</p>
  <footer>
    <address>合肥市政务新区</address>
  </footer>
  <p>
    <code>
      const username = 'admin'
    </code>
  </p>
</body>
</html>

3.链接，列表与图象

<a>:链接

<ul><li>无序列表</li></ul>

<ol><li>有序列表</li></ol>

<img>:图像

3.1链接

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>链接元素</title>
</head>
<body>
  <a href="https://www.php.cn" target="_blank">PHP中文网</a>
  <a href="https://www.php.cn">PHP中文网</a>
  <a href="0403.zip" download="html教程.md.zip">html教程0403</a>
  <a href="tel:1571111111">咨询热线</a>
  <a href="mailto:123@qq.com">联系我们</a>
  <a href="#author1">跳转到锚点1</a>
  <a href="#author2">跳转到锚点2</a>
  <h1 id="author1" style="margin-top:1000px;">我是锚点1</h1>
  <h1 id="author2" style="margin-top:2000px;">我是锚点2</h1>
</body>
</html>

3.1列表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>列表元素</title>
</head>
<body>
  <!---无序列表-->
  <ul>
    <li>苹果5斤</li>
    <li>梨3斤</li>
    <li>葡萄9斤</li>
  </ul>
  <hr />
  <!---有序列表-->
  <ol start="5">
    <li>苹果5斤</li>
    <li>梨3斤</li>
    <li>葡萄9斤</li>
  </ol>
  <hr />
  <!---自定义列表-->
  <dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dd>是一种标识性的语言</dd>
    <dt>css</dt>
    <dd>层叠样式表</dd>
    <dt>PHP</dt>
    <dd>超文本预处理器</dd>
    <dt>MYSQL</dt>
    <dd>数据库</dd>
  </dl>
</body>
</html>

4.表格与框架

<table> + <tr> + <td>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>表格元素</title>
</head>
<body>
  <table
    border="1"
    cellpadding="5"
    cellspacing="0"
    width="500"
    height="200"
    align="center"
  >
    <colgroup bgcolor="lightpink">
      <col />
      <col bgcolor="lightgreen" />
      <col bgcolor="yellow" span="2" />
      <col />
      <col />
    </colgroup>
    <caption style="font-size:1.5rem;margin-bottom:10px;">
      员工信息表
    </caption>
    <thead bgcolor="lightblue">
      <tr>
        <th>部门</th>
        <th>ID</th>
        <th>姓名</th>
        <th>职务</th>
        <th>手机</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="3" align="center">开发部</td>
        <td>101</td>
        <td>小王</td>
        <td>主管</td>
        <td>13313313313</td>
      </tr>
      <tr>
        <td>102</td>
        <td>小王</td>
        <td>主管</td>
        <td>13313313313</td>
      </tr>
      <tr>
        <td>103</td>
        <td>小王</td>
        <td>主管</td>
        <td>13313313313</td>
      </tr>
      <tr>
        <td rowspan="2" align="center">销售部</td>
        <td>103</td>
        <td>小王</td>
        <td>主管</td>
        <td>13313313313</td>
      </tr>
      <tr>
        <td>103</td>
        <td>小王</td>
        <td>主管</td>
        <td>13313313313</td>
      </tr>
    </tbody>
    <tfoot bgcolor="wheat">
      <td>备注</td>
      <td colspan="4">所有员工离职必须提交申请</td>
    </tfoot>
  </table>
</body>
</html>

5.表单元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表单元素1</title>
</head>
<body>
<h3>用户注册</h3>
<form action="">
<section>
<label for="username">用户名：</label>
<input
type="text"
id="username"
name="username"
maxlength="20"
placeholder="不少于8位"
required
autofocus
/>
</section>
<section>
<label for="password">密码：</label>
<input
type="password"
id="password"
name="password"
placeholder="不少于8位"
required
size="10"
/>
</section>
<section>
<label for="secret">性别：</label>
<div class="box">
<input type="radio" name="gender" id="male" value="male" />
<label for="male">男</label>
<input type="radio" name="gender" id="female" value="female" />
<label for="female">女</label>
<input
type="radio"
name="gender"
id="secret"
value="secret"
checked
/>
<label for="secret">保密</label>
</div>
</section>
<section>
<label for="shoot">兴趣：</label>
<div class="box">
<input
type="checkbox"
name="hobby[]"
id="game"
value="game"
checked
/>
<label for="">游戏</label>
<input type="checkbox" name="hobby[]" id="travel" value="travel" />
<label for="">旅游</label>
<input type="checkbox" name="hobby[]" id="shoot" value="shoot" />
<label for="">摄影</label>
</div>
</section>
</form>
</body>
</html>

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：挺好, 有个图更好