1. List

Unordered list (ul-li)
- Chinese
- mathematics
- music
Ordered list (ol-li)
- 1. Trending 1
- 2. Heat 2 search
- 3. Trending 3
Custom list (dl-dt-dd)

<!--title-->
<!--无序  ul-li
导航
侧边栏新闻
在文章中，一般会使用它来排列
-->
<ul>
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
    <li>Java</li>
</ul>

<hr>

<!--有序 ol-li
问答试卷、测试题....卷子，或者需要排序的。微博热搜，榜单
-->
<ol>
    <li>====</li>
    <li>====</li>
    <li>====</li>
    <li>====</li>
</ol>

<hr>

<!--自定义列表
网站的底部，用于标记项
-->
<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>梨子</dd>
    <dd>香蕉</dd>
    <dd>葡萄</dd>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>梨子</dd>
    <dd>香蕉</dd>
    <dd>葡萄</dd>
</dl>

2. Form

Why use a table? Because the table structure is simple and universal.

The basic structure :

Form table
行 tr rowspan
Column td colspan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<!--表格标签table
border="1px" 边框属性
-->
<table border="1px">
    <!--行和列-->
    <!--第一行 tr,列 td-->
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
</table>
</body>
</html>

Interbank :

<table border="1px">
    <tr>
        <!--rowspan 所跨的行数-->
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">李四</td>
        <td>语文</td>
        <td>0</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>0</td>
    </tr>
</table>

Across Columns :

<table border="1px">
    <tr>
        <!--实现跨列
        colspan 对应的值:就是要跨几列
        -->
        <td colspan="2">学生成绩</td>
        <td>学生成绩</td>
    </tr>
    <tr>
        <!--科目名称-->
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <!--成绩-->
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

3. media elements

video 视频标签
src：视频的路径
controls: 提供播放按钮，进度条、下载按钮、全屏按钮、音量控制
autoplay：自动播放
loop: 循环播放

Audio audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--音频播放-->
<audio src="../statics/audio/ab410f7bbbb0955e7ae476ae89527a5d.m4a" autoplay controls>

</audio>

</body>
</html>

video

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频</title>
</head>
<body>

<!--video 视频标签
src：视频的路径
controls: 提供播放按钮，进度条、下载按钮、全屏按钮、音量控制
autoplay： 自动播放
loop: 循环播放

-->

<!--<video src="../statics/video/china.mp4" controls autoplay></video>-->

<video controls autoplay>
    <source src="../statics/video/china.mp4">
    <source src="../statics/video/china.mp4">
</video>
</body>
</html>

4. The page structure analysis

The head of the page
<head></head>
Body of the page
<body></body>
Tail page
<footer><footer>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--这些标签都是一些行业规范-->

<header>
    我是头部
</header>

<nav>导航栏</nav>

<aside>侧边栏</aside>

<article>文章主题</article>

<section> 独立区域 </section>

<footer>
    我是尾部
</footer>

</body>
</html>

The inline frames

Inline HTML display page framework in order to achieve, highlighting the word inline, that is at one glance, we can control how much the block with this page to the page in a further display page
iframe
<iframe src="URL"></iframe>

<!--iframe 内联框架
src： 地址
-->
<!--<iframe src="https://www.baidu.com/" width="1000px" height="600px"></iframe>-->

<iframe name="mainFrame"></iframe>

<a href="https://www.baidu.com/" target="mainFrame">点击显示</a>

<!--Ajax-->

Ocean ocean ocean

Published 39 original articles · won praise 1 · views 549

Private letter concerns

--- front-end lists, tables, media elements

1. List

2. Form

3. media elements

4. The page structure analysis

The inline frames

Guess you like