AI 助理
备案控制台
开发者社区 安全 文章 正文

HTML 基础（下）

2022-11-23 80
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： HTML 基础（下）

标签八 表格标签


table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域 ( 注意和 th 区分, 范围是比 th 要大的 )
tbody: 表格得到主体区域.


大致示意图：


60c3e5cc080340929b28c799e722ed8c.png


展示1


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签测试</title>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>Jack</td>
            <td>male</td>
            <td>21</td>
        </tr>
        <tr>
            <td>Rose</td>
            <td>female</td>
            <td>23</td>
        </tr>
    </table>
</body>
</html>


展示结果：


b300c828c36542dcaada13fae67fcecd.png


展示2


在展示1 中，我们可以看到，所谓的表格标签并没有格子，于是我们就可以通过添加一些属性来显示我们想要的结果。


① width 和 height 属性分别表示宽度和长度

② border 表示边框，但是因为加在 table 上，而 table 表示整个表格，所以大大小小的表格都加上边框了。

③ cellspacing 属性可以控制两个单元格之间的空隙


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签测试</title>
</head>
<body>
    <table width="500px" height="300px" border="1px" cellspacing="0px">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>Jack</td>
            <td>male</td>
            <td>21</td>
        </tr>
        <tr>
            <td>Rose</td>
            <td>female</td>
            <td>23</td>
        </tr>
    </table>
</body>
</html>


展示结果：


2bdf5fb3009b4fa89bf0af446d1d4cdd.png


展示3


如果我们将 cellspacing 写成 “5px”，那么情况就不一样了


<table width="500px" height="300px" border="1px" cellspacing="5px">


展示结果：


743151f335664190b0fa0a9158bbb114.png


标签九 列表标签


无序列表标签：ul + li
有序列表标签：ol + li
自定义列表标签：dl (总标签) +  dt (小标题) + dd (围绕标题来说明)
/说明/
u: unordered (无序的)
o: ordered (有序的)
l: list (列表)



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表标签测试</title>
</head>
<body>
    <!-- 有序列表 -->
    <ol>
        <li>吃饭</li>
        <li>学习</li>
        <li>睡觉</li>
    </ol>
    <!-- 无序列表 -->
    <ul>
        <li>吃饭</li>
        <li>学习</li>
        <li>睡觉</li>
    </ul>
    <!-- 自定义列表 -->
    <dl>
        <dt>大学生的一天</dt>
        <dd>吃饭</dd>
        <dd>学习</dd>
        <dd>睡觉</dd>
    </dl>
</body>
</html>


展示结果：


fbb2a9168df9400d809f003cf2dde8a0.png


标签十 表单标签


1. form 标签


form 标签描述了要把数据按照什么方式，提交到哪个页面中，action 输入的是待提交页面的路径。


form 标签需要搭配其他标签使用，其他标签亦需要搭配 form 标签 使用。简单来说，form 标签用来做最后提交服务器的动作，而其他标签用来自定义内容的动作。


<form action=" "></form>


2. input 标签


说明


input 标签，可以表示各种用来输入的控件。


简单来说，一个按钮、 一个文本框、一个单选框、一个复选框、或表示一个图形界面的基本元素，都被称为控件。而 input 标签中最核心的属性，就是 type，type 不同的取值就能表示不同的控件类型。


展示1 单行文本框和密码框


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>展示1</title>
</head>
<body>
    <form action="">
        <input type="text"><br/>
        <input type="password">
    </form>
    <form action=""></form>
</body>
</html>


这与我们平时登录网页的输入账号和密码很相似，当我们忘记密码的时候，而网页又默认保存了之前的密码，我们就可以通过将 type 属性的 password 改成 text，也就是将框中的密码从不可见变成可见。这里也应该注意这两个都是单行输入的，不能换行。


展示结果：


dab1679cff574766ac46ca0dd70f1352.png


展示2 单选框


name 属性：多个单选框之间可以通过 name 属性来关联，如果多个单选框的 name 属性相同，那么就只能取其中的一个。


checked 属性：使用 checked 属性表示默认的值


<body>
    <form action="">
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <input type="radio" name="gender" checked="checked">未知
    </form>
</body>


展示结果：


5b9e9a69772d44758534305382cc9b8e.png


展示3 多选框


<body>
    <form action="">
        <input type="checkbox"> 吃饭
        <input type="checkbox"> 睡觉
        <input type="checkbox"> 学习
    </form>
</body>


展示结果：


dcdba58fd7a042faa338841998990436.png


展示4 普通按钮


可以通过 onclick 属性来做提示


<body>
    <form action="">
        <input type="button" value="这是一个按钮" onclick="alert('hello')">
    </form>
</body>


展示结果：


30b07055be2a4a4fb48ff11638c79ad6.png


展示5 提交按钮


提交按钮就是把当前表单中的用户输入数据，包装成一个 http 请求，发送给服务器。

<body>
    <form action=" ">
      <input type="text" name="key"><br/>
        <input type="submit" value="提交">
    </form>
</body>


展示结果：


3b6b3bef12f44700b903f6ab51dbd35e.png




展示6 清空按钮


<body>
    <form action="">
        <input type="text" name="key"><br/>
        <input type="reset" value="清空">
    </form>
</body>


展示结果：


573eed7b527f4908916b48aa8b50566c.png


展示7 选择文件


<body>
    <form action="">
        <input type="file">
    </form>
</body>


展示结果：


317f26cd1619406d8ff5d99899d3003a.png


3. label 标签


label 标签主要是用来搭配 input 标签使用，具体来说是搭配单选框或复选框使用。


label 标签存在的意义就是为了让用户方便的来选中选项，for 属性就表示当前 label 要和哪个input 标签关联起来，这里就需要给对应的 input 标签创建一个唯一身份标识。


<body>
    <form action="">
        <input type="radio" name="gender" id="male"> <label for="male">男</label>
        <input type="radio" name="gender" id="female"> <label for="female">女</label>
        <input type="radio" name="gender" id="unknown"> <label for="unknown">未知</label>
    </form>
</body>


我们不仅点击小圆点让选择的内容生效，当点击文字的时候，也能生效。


展示结果：


f4dbc4bb791f4592ba0290d628e995c9.png


4. select 标签


展示1


<body>
    <form action="">
        <select>
            <option>选择你的出生年份</option>
            <option>1997</option>
            <option>1999</option>
            <option>2000</option>
            <option>2001</option>
            <option>2002</option>
        </select>
    </form>
</body>


展示结果：


88554eda0784446494087e7477b6adff.png


展示2


selected 属性可以用来展示默认的内容，然后再做选择。


<body>
    <form action="">
        <select>
            <option>吃饭</option>
            <option selected="selected">学习</option>
            <option>睡觉</option>
            <option>运动</option>
        </select>
    </form>
</body>


展示结果：


5e87fd047e42407cbee18314ff92de62.png


5. textarea 标签


textarea 标签可以用来使用多行编辑。


<body>
    <form action="">
    <textarea cols="30" rows="5"></textarea>
    </form>
</body>


展示结果：


37e9ca9e7a1d4ae2a267a3fb55f5bded.png


标签十一 无语义标签


无语义标签：div + span

div 相当于独占一行的一个大盒子

span 相当于不独占一行是一个小盒子

盒子里面可以装其他的标签，或盒子里面也可以再装盒子。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <span>吃饭</span>
        <span>吃饭</span>
        <span>吃饭</span>
    </div>
    <div>
        <span>睡觉</span>
        <span>睡觉</span>
        <span>睡觉</span>
    </div>
    <div>
        <span>学习</span>
        <span>学习</span>
        <span>学习</span>
    </div>
</body>
</html>


展示结果：


400653b7ea1d4186b72951a555e3beca.png


三、HTML 的特殊字符


因为 HTML 语法的原因，导致了一些特殊字符的冲突，所以我们可以通过类似于转义字符的形式来表达我们所想要的一些字符，下面是四个常用的特殊字符。


空格:      &nbsp;
小于号:    &lt;
大于号:    &gt;
按位与:    &amp;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>特殊字符</title>
</head>
<body>
    这是一个       文本<br/>
    这是一个&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;文本
    <div> &lt; </div>
    <div> &gt; </div>
    <div> &amp; </div>
</body>
</html>


展示结果：


685a6c1718454f578668d385072644b9.png


综合案例一 展示简历信息(不涉及往服务器发送)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>展示个人简历</title>
</head>
<body>
    <h1>十七</h1>
    <h2>基本信息</h2>
    <img src="D:\文件\计算机资料\6. 前端代码\123.png" alt=""
            width="200px" height="150px"><br/>
    <p>求职意向: Java 开发工程师</p>
    <p>联系电话: 123</p>
    <p>邮箱: 123@123.com</p>
    <a href="https://gitee.com/" target="_blank"> 码云链接</a>
    <br/><br/>
    <a href="https://www.csdn.net/" target="_blank"> 博客链接</a>
    <h2>教育背景</h2>
    <ol>
        <li>葵花幼儿园</li>
        <li>葵花小学</li>
        <li>葵花中学</li>
        <li>葵花大学</li>
    </ol>
    <h2>专业技能</h2>
    <ul>
        <li>C 语言</li>
        <li>Java SE</li>
        <li>数据结构</li>
        <li>MySQL 数据库</li>
        <li>Java Web</li>  
    </ul>
    <h2>我的项目</h2>
    <h3>1. 留言墙</h3>
    <u>功能介绍: </u>
    <ul>
        <li>支持线上留言</li>
        <li>支持线下留言</li>
        <li>支持匿名留言</li>
    </ul>
    <h3>2. 学习小助手</h3>
    <u>功能介绍: </u>
    <ul>
        <li>支持错别字检索</li>
        <li>支持线上沟通</li>
        <li>支持计时任务</li>
    </ul>
    <h2>个人评价</h2>
    <p>踏踏实实、诚诚恳恳</p>
</body>
</html>


展示结果：


a11f2d6b73eb4c1fa48c09a5f8da4925.png


综合案例二 填写个人简历(不涉及往服务器发送)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>填写个人简历</title>
</head>
<body>
    <h3>请填写简历信息</h3>
    <table width="650px">
        <tr>
            <td> 姓名 </td> 
            <td> <input type="text"> </td>
        </tr>
        <tr>
            <td> 性别 </td>
            <td>
                <input type="radio" name="gender" id="male">
                <label for="male">
                    <img src="D:\文件\计算机资料\6. 前端代码\male.png" alt="" width="20px" height="20px">男
                </label>
                <input type="radio" name="gender" id="female">
                <label for="female">
                    <img src="D:\文件\计算机资料\6. 前端代码\female.png" alt="" width="20px" height="20px">女
                </label> 
            </td>       
        </tr>
        <tr>
            <td> 出生日期 </td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>1990</option>
                    <option>1991</option>
                    <option>1992</option>
                    <option>1993</option>
                    <option>1994</option>
                    <option>1995</option>
                    <option>1996</option>
                    <option>1997</option>
                    <option>1998</option>
                    <option>1999</option>
                    <option>2000</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                    <option>2004</option>
                    <option>2005</option>
                    <option>2006</option>
                    <option>2007</option>
                    <option>2008</option>
                    <option>2009</option>
                    <option>2010</option>
                </select>
                <select>
                    <option>--请选择月份--</option>
                    <option>01</option>
                    <option>02</option>
                    <option>03</option>
                    <option>04</option>
                    <option>05</option>
                    <option>06</option>
                    <option>07</option>
                    <option>08</option>
                    <option>09</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                <select>
                    <option>--请选择日期--</option>
                    <option>01</option>
                    <option>02</option>
                    <option>03</option>
                    <option>04</option>
                    <option>05</option>
                    <option>06</option>
                    <option>07</option>
                    <option>08</option>
                    <option>09</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                    <option>24</option>
                    <option>25</option>
                    <option>26</option>
                    <option>27</option>
                    <option>28</option>
                    <option>29</option>
                    <option>30</option>
                    <option>31</option>
                </select>
            </td>
        </tr>
        <tr>
            <td> 就读学校 </td>
            <td> <input type="text"> </td>
        </tr>
        <tr>
            <td> 应聘岗位 </td>
            <td> 
                <input type="checkbox"> 前端开发
                <input type="checkbox"> 后端开发
                <input type="checkbox"> 测试开发
                <input type="checkbox"> 运维开发
            </td>
        </tr>
        <tr>
            <td> 掌握的技能 </td>
            <td> <textarea cols="30" rows="10"></textarea> </td>
        </tr>
        <tr>
            <td> 项目经历 </td>
            <td> <textarea cols="30" rows="10"></textarea> </td>
        </tr>
        <tr>
            <td> <input type="checkbox">我已仔细阅读过公司的招聘要求 </td>
        </tr>
        <tr>
            <td> 
                <a href="D:\文件\计算机资料\6. 前端代码\2022_7_30\demo4.html" target="_blank">查看我的状态</a>
            </td>
        </tr>
        <tr>
            <td> <h3>请应聘者确认：</h3> </td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>以上信息真实有效</li>
                    <li>能够尽早去公司实习</li>
                    <li>能接受公司的加班文化</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>


展示结果：


fc359f867abf4c5a86aea016a6cf4f92.png




文章标签：
数据安全/隐私保护
关键词：
HTML基础
十七ing
目录
相关文章
阿甘兄
|
11月前
|
前端开发
前端基础 - HTML框架集之FrameSet
前端基础 - HTML框架集之FrameSet
阿甘兄
66 0
阿甘兄
|
11月前
|
前端开发
前端基础 - HTML常用标签
前端基础 - HTML常用标签
阿甘兄
38 0
yinying293
|
1月前
|
移动开发 前端开发 程序员
后端程序员的前端基础-前端三剑客之HTML
后端程序员的前端基础-前端三剑客之HTML
yinying293
27 9
timerring
|
1月前
|
移动开发 前端开发 搜索推荐
前端基础101之HTML总结
【8月更文挑战第1天】
timerring
19 4
木道寻
|
3月前
|
前端开发
前端基础学习（一）HTML入门
前端基础学习（一）HTML入门
木道寻
27 0
前端基础学习（一）HTML入门
你都不懂
|
4月前
|
JSON 缓存 前端开发
前端基础入门三大核心之HTML篇：Webpack的八种常用Loader用途及加载方式全解析
结语：持续探索，共创未来
你都不懂
167 2
坠入极夜的夏
|
4月前
|
前端开发 JavaScript
前端基础知识(一){HTML.CSS.JavaScript}
前端基础知识(一){HTML.CSS.JavaScript}
坠入极夜的夏
45 3
阿甘兄
|
11月前
|
JavaScript 前端开发
前端基础 -JQuery之val，text，html
前端基础 -JQuery之val，text，html
阿甘兄
71 1
.昭阳.
|
移动开发 前端开发 JavaScript
web前端基础知识——HTML/HTML5
HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言，而是一种标记语言 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 文档包含了HTML 标签及文本内容 HTML文档也叫做 web 页面
.昭阳.
136 2
前端技术栈
|
4月前
|
存储 前端开发 JavaScript
前端基础面试题（HTML,CSS,JS）
前端基础面试题（HTML,CSS,JS）
前端技术栈
102 0

热门文章

最新文章

  • 1
    weex-html5 组件进阶
  • 2
    【实战HTML5与CSS3】用HTML5和CSS3制作页面（上）
  • 3
    html2canvas 简单使用
  • 4
    特殊字符（HTML语言对照表）
  • 5
    wkhtmtopdf--高分辨率HTML转PDF
  • 6
    以html形式显示（word，excel，ppt）总结
  • 7
    企业网站html框架
  • 8
    基于HTML5的WebGL结合Box2DJS物理应用
  • 9
    http://www.kindsoft.net/docs/qna.html
  • 10
    HTML <form> 标签的 accept-charset 属性
  • 1
    【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的？
    65
  • 2
    【Web 前端】如何找到所有 HTML select 标签的选中项？
    82
  • 3
    如何实时准确地从HTML5视频中截取当前播放画面
    345
  • 4
    Vue中如何以HTML形式显示内容并动态生成HTML代码
    236
  • 5
    web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
    54
  • 6
    高大上HTML5引导页源码 动态效果更好看
    54
  • 7
    【专栏：HTML与CSS前端技术趋势篇】HTML与CSS在PWA（Progressive Web Apps）中的应用
    86
  • 8
    【专栏：HTML与CSS前端技术趋势篇】前端框架（React/Vue/Angular）与HTML/CSS的结合使用
    82
  • 9
    【专栏：HTML 与 CSS 前端技术趋势篇】Web 性能优化：CSS 与 HTML 的未来趋势
    76
  • 10
    【专栏：HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
    90

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 《零基础HTML入门教程》
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
    • 下一篇
    基于LNMP搭建WordPress