根据HTML设计网页_html 多订单对应多明细新增页面设计-优快云博客

本文详细介绍HTML的基本结构，包括文档类型声明、元数据、标题、正文等元素，以及如何使用标签进行网页布局，如header、nav、footer等。此外，还介绍了如何插入图片、创建链接、制作列表和表格，以及表单的创建和验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据HTML设计网页

1.HTML基本界面

进入Idea-new-HTML file，会创建下面的默认界面

下面会详细解释一下每段的作用

<!DOCTYPE html>
<!--
DOCTYPE是文档类型,属于默认声明，声明了用的默认规范是html,这是HTML5用的
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--
    meta 是描述信息，在搜索时可以匹配的关键词
    UTF-8是编码格式,这个包含全世界文字 还有gb2312,这个编码包含所有中文。
    以后所有代码需要统一编码否则可能产生乱码！
    -->
    <title>Title</title>
    <!--
    Title可以修改,网页上小标题的名称
    -->
</head>
<body>
<!--
所有骚操作需要在身体里面完成！
-->
</body>
</html>

2.网页结构

可以更加方便直观的来做网页,也属于行业规范,在body里面完成的,借鉴淘宝首页.下面我自己做的网页也是按照这个结构,把标签,表单填充进去的

<body>
<!--
头  header



尾  footer
-->
<!--
标签都是行业规范
-->
<header>
    我是头部
</header>

<nav>
    导航栏
</nav>

<aside>
    侧边栏
</aside>

<article>
    文章主题
</article>

<section>
    独立区域
</section>



<footer>
    我是尾部
</footer>


</body>

3.填充网页

3.1标签

<!--
标题标签 h1+tab
-->
<h1>一级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h6>6级标题</h6>

<!--
段落标签  p+tab
-->

<!--特殊符号-->
<!--空格 &nbsp;-->
<!--大于 &gt;-->
<!--小于 &lt;-->
<!--版权 &copy;-->
<!--反正所有的都是&  ;结尾-->

<!--换行 br + tab-->

<!--分割  hr + tab-->

<!--字体样式 加粗 strong+tab  斜体em+tab-->

标签分为块元素，以及行内元素

块元素就是自己拥有自己的行,别的元素不能进来,比如

行内元素就是大家共同想用行,你这行没用完,别的行内元素进来接着补你没用完的行数

比如(a,strong,em)

3.2图片描述

可以在网站上显示图片,其中src加载的图片路径有又分为相对路径和绝对路径,

<!--
src:图片的路径
alt:图片加载失败时图片说明
width：宽
height:高
-->
<img src="../statics/images/CF9E8458F1D5F5D55BD68FA633ED62FA.jpg"
     alt="百度"width="200"height="200">

3.3链接

3.3.1超链接

可以从一个起点链接到另一个终点,

<!--
href:链接地址
target:目标打开  _self，本窗口
                _blank,空白窗口
-->
<a href="https://www.baidu.com/"target="_blank">起点
   </a>

这个起点可以是图片,按钮,网址等,

可以将 起点 改为上面提到的图片 <img src="../statics/images/CF9E8458F1D5F5D55BD68FA633ED62FA.jpg"
         alt="百度"width="200"height="200">

可以设置链接到目标后是在本窗口打开还是在新的窗口打开,也可以设置

3.3.2锚链接

和超链接的概念相同,可以更精确的定位到页面位置,可以做目录的功能

<!--
锚链接
1.设置锚点 a+tab name=  定位
2.跳转锚点 a+tab href=#+name后面的

也可以加网站+内容
所以可以同一页面，也可以在不同页面
-->

3.3.3邮件链接

<!--
邮件链接 a+tab href mailto:
-->

3.3.4QQ推广

<!--
QQ推广  a+tab target=blank href=
借助第三平台
-->

3.4列表

列表分为有序列表，无序列表,自定义列表

<!--
无序列表 ul+tab        ul-li
li+tab 中间加列表名
-->
<ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
    <li>无序列表4</li>
</ul>
<hr>
<!--
有序列表 ol+tab        ol-li
-->
<ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
    <li>有序列表4</li>
</ol>
<hr>
<!--
自定义列表 dl+tab         dl-dt-dd
-->
<!--
diy标题头 dt+tab
-->
<dl>
    <dt>DIY表名</dt>
    <dd>diy列表1</dd>
    <dd>diy列表2</dd>
    <dd>diy列表3</dd>
    <dd>diy列表4</dd>

</dl>

3.5表格

3.5.1基础表格

先建立表格在建立行在建立列（下面建立了2行3列）

<!--
表格 table-行 tr - 列 td
-->
<table border="1px">
    <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>

3.5.2跨列

先写上面提到的格式,找到要跨的列的位置,然后再把同行多余的列数删除掉

<!--
跨行跨列 先把格式搞出来,跨的后面+colspan=想跨的列数
-->
<table>
    <tr>
        <td colspan="2">学生成绩</td>
    </tr>
    <tr>
        <td>语文成绩</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学成绩</td>
        <td>100</td>
    </tr>
</table>
<hr>

3.5.3跨行

先写上面提到的格式,找到要跨的行的列的位置,然后再把下行多余的列数删除掉


rowspan所跨的行数-->
<table>
    <tr>
        <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>99</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>99</td>
    </tr>
</table>

3.6视频,音频

<!--
视频 video
音频 audio

src 路径
controls 提供播放按钮，进度条，下载按钮，全屏按钮，音量控制
autoplay 自动播放
loop 循环播放
音频可以不要controls  直接autoplay自动播放的背景音乐
-->

<video src="地址" controls></video>
<audio src="地址" autoplay loop></audio>

3.7内联框架

<!--
iframe 内联框架
src 地址
所有的表单元素都要卸载
-->
<iframe src=" " frameborder="0"></iframe>

3.8表单

<!--
form 表单   
提交地址 action   提交方式  method:get url里面带参数，不安全 大小有限
                                 post url里面不带参数，安全  大小无限，常用

input :
    text:文本框
    password：密码框
    submit: 提交
    reset:重置
-->

<form action="https://www.baidu.com/" method="post">
<p>用户名<input type="text" name="username"></p>
<p>密码<input type="password"name="password"></p>
<p><input type="submit" value="提交">
    <input type="reset" value="重置">
</p>
</form>

3.8.1表单元素（文本框、密码框、单选框、多选框、按钮）

<!--
所有表单要写在form里面,+name属性否则提交的时候取不到值
-->
<!--
文本框   type="text"
        value:默认的初始值
        size:文本框的长度
        maxLength:文本框的最大输入长度
-->
<!--
密码框   type="password"
        value:默认的初始值
        size:文本框的长度
        maxLength:文本框的最大输入长度
-->
<!--
单选框  type="radio"
        value:表单提交的值
        name:名字相同则自动分组，必须分组
        checked:默认选中
        disabled:禁用
        在默认没有值需用在最后把单选框的属性加上

-->
<!--
多选框  type="checkbox"
        value:表单提交的值
        name:名字相同则自动分组，必须分组
        checked:默认选中
        disabled:禁用
        在默认没有值需用在最后把单选框的属性加上

-->
<!--
按钮  submit 提交
      reset  重置
      button  自定义按钮
      image   图片按钮     src 图片的路径

 value 按钮上的字
-->

3.8.2表单元素（下拉列表框、文本域、文件域）

<!--
下拉列表框 select      组件名字 必填 name      显示的数量 size 默认值是1 可以改
option 选项    value 必填  中间写下拉框的值 selected 默认选中 可以在前面空一个 这样是空白得
-->
 
<!--
文本域 textarea  cols 长 rows 宽
-->
<!--
文件域   enctype=可上传的文件类型
        input +tab  - type   -name
-->

<form action="https://www.baidu.com/" method="get">
<select name="科目" size="2">
    <option value="5"></option>
    <option value="6">1</option>
    <option value="7">2</option>
    <option value="8" selected>3</option>
    <option value="9">4</option>
</select>
    <p>
        <input type="submit">
    </p>
    <p>
        email <input type="email" name="email">
    </p>
    <p>
        <input type="url" name="url">
    </p>
    <p>
        <input type="range" name="range">
    </p>
    <p>
        <input type="range" name="range">
    </p>
</form>

3.8.3表单初级验证

<!--  前面写你要啥
邮箱   type=email   +name
网址      =url     +name                                                上下
数字      =number  min  max  step单次购买量               商品数量
滑块      =range   +name        min  max  step单次购买量  可以做进度条   可调节
搜索框    =search   +name                                              带关闭按钮
-->

3.8.4表单应用（隐藏域、只读权限、禁用权限、标注）

<!--
隐藏域 type= hidden
只读 readonly
禁用 disabled
标注  lable for 来连接到 表单中 id
-->
<!--
表单验证  placeholder=“按照这个格式写！”
必填 required
pattern=“填正则表达式”
-->