HarmonyOS/OpenHarmony应用开发-Stage模型应用/组件级配置-CFANZ编程社区

HTML简介

整体结构

<!--告诉浏览器，使用DOCTYPE规范-->
<!DOCTYPE html>
<html lang="en"><!--总标签-->
<!--head标签代表网页头部-->
<head>
    <!--meta标签用来描述网页信息-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--body标签代表网页主体-->
<body>

</body>
</html>

基本标签

标题标签

<h1>一级标签</h1>
<h2>二级标签</h2>

段落标签

<p>hello</p>
<p>world</p>

换行标签

hello<br/>
world<br/>

水平线标签

<hr/>

字体样式标签

斜体

<em>hi</em>

字体样式

粗体

<strong>hi</strong>

特殊符号标签

&nbsp;

大于

&gt;

小于

&lt;

图像标签

<img src="图片地址" alt="图片加载失败后显示" width="300" height="200">

超链接标签

<a href="要跳转到的页面" target="窗口在哪里打开">点击可以进行跳转，可以设置为图片</a>

锚链接

<!--使用name作为标记-->
<a name="top">顶部</a>
...
...
<a href="#top">回到顶部</a>

<!--跳转到first.html下的down标签-->
<a href="first.html#down">跳转</a>

功能性链接

邮箱

<a href="mailto:surprise_a@163.com">点击联系我</a>

列表标签

有序列表

<ol>
    <li>Java</li>
    <li>C/Cpp</li>
    <li>Python</li>
    <li>PHP</li>
</ol>

无序列表

<ul>
    <li>Java</li>
    <li>C/Cpp</li>
    <li>Python</li>
    <li>PHP</li>
</ul>

自定义列表

<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>CPP/C</dd>
    <dd>PHP</dd>

    <dt>base</dt>
    <dd>北京</dd>
    <dd>哈尔滨</dd>
    <dd>太原</dd>
</dl>

表格标签

<table border="5px">
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">xm</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">xh</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>

</table>

媒体元素

视频标签

<video src="" controls autoplay></video>

音频标签

<audio src="" controls autoplay></audio>

页面结构分析

<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>

iframe内联框架

<iframe src="https://www.baidu.com" frameborder="0" width="1000" height="800"></iframe>

表单

表单元素格式

属性	说明
type	指定元素的类型。text，password，checkbox，radio，submit，reset，file，hidden，image，button，默认为text
name	指定元素的名称
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。其他类型以像素为单位
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否被选中

文本框

<input type="text" name="username" value="xm" maxlength="8" size="30">

<p>名字：
    <input type="text" name="text" >
</p>
<p>密码：
    <input type="password" name="pwd">
</p>

单选框

<input type="radio" value="boy" name="sex" checked>男
<input type="radio" value="girl" name="sex">女

多选框

checkbox

<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby" checked>敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏

按钮

<input type="button" name="btn1" value="点击">
<input type="image" src="...">

下拉框

<select name="列表名称">
        <option value="china">中国</option>
        <option value="us">美国</option>
        <option value="eth">瑞士</option>
        <option value="india">印度</option>
</select>

文本域

<textarea name="textarea" id="" cols="10" rows="10">文本内容</textarea>

文件域

<input type="file" name="files">
<input type="button" value="上传" name="upload">

验证

邮箱

<input type="email" name="email">

URL

<input type="url" name="url">

数字

<input type="number" name="num" max="100" min="0" step="1">

滑块

音量

<input type="range" name="voice" min="0" max="100" step="1">

搜索框

<input type="search" name="serch">