0403 html 基础知识 2

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：挺好, 有个图更好

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial