search

博客列表 >前端HTML基础知识复习（html常用标签及表单元素的类型及属性介绍）-PHP培训十期线上班

前端HTML基础知识复习（html常用标签及表单元素的类型及属性介绍）-PHP培训十期线上班

方小生
方小生原创
2019年12月23日 10:38:191500浏览

12月19日第二课

html基础知识（html文档结构及常用标签）总结

1. html概念

html: 超文本标记语言, 浏览器可以直接解析的文档
HTML是学习Web开发的起点,CSS,JavaScript都是在掌握HTML的基础上进行学习目前HTML5是主流的版本, 也是我们学习的重点HTML的学习主要包括二大部分: 文档结构与常用标签

2. 文档结构

文档结构，主要是由一系列：语义化的布局标签组成

序号 标签 描述
1 <h1>-<h6> 标题: 通常用来划分或标注内容中的文本段落
2 <header> 页眉: 一般是由导航, logo等元素组成
3 <footer> 页脚: 一般是由友情链接, 联系方式, 备案号,版权等信息组成
4 <nav> 导航: 导航通常是由一个或多个链接标签<a>标签组成
5 <main> 主体: 做为页面主要内容的容器使用,建议一个页面, 只出现一次
6 <article> 文档: 本义是文档, 实际上可以充当其它内容的容器
7 <aside> 边栏: 与主体无关的信息,例如: 广告位, 相关推荐, 阅读排行等
8 <section> 片断: 与主体无关的信息,例如: 广告位, 相关推荐, 阅读排行等
9 <div> 区块: 也叫通用容器,本身无任何语义, 功能主要是通过它的属性来描述

demo1示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <!--<head> 标签用于定义文档的头部,描述了文档的各种属性和信息-->
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>文档结构</title>
  7.     </head>
  8.     <body>
  9.         <!--页眉-->
  10.         <header>
  11.             <!--导航-->
  12.             <nav>
  13.                 <ul>
  14.                     <li>导航1</li>
  15.                     <li>导航2</li>
  16.                     <li>导航3</li>
  17.                 </ul>
  18.             </nav>
  19.         </header>
  20.         <!--主体-->
  21.         <main>
  22.             <!--文章-->
  23.             <article>
  24.                 <header>
  25.                     <h1>文章标题</h1>
  26.                 </header>
  27.                 <section>
  28.                     <p>文章内容</p>
  29.                 </section>
  30.                 <footer>
  31.                     <section>页脚</section>
  32.                 </footer>
  33.             </article>
  34.             <aside>
  35.                 <a href="#">广告位1</a>
  36.                 <a href="#">广告位2</a>
  37.             </aside>
  38.         </main>
  39.         <!--页脚-->
  40.         <footer>
  41.             <div>2019版权所有©fgz</div>
  42.         </footer>
  43.     </body>
  44. </html>

demo1运行截图

demo1运行结果
图1 文档结构

3. 常用标签（文本相关、语义化文本）

文本相关

序号 标签 描述
1 <p> 段落内容
2 <pre> 按源码格式原样显示
3 <br> 换行(源码中的换行会被解析来空格)
4 <span> 与<div>类似,无语义, 主要用作内容的样式钩子

语义化文本

序号 标签 描述
1 <time> 描述日期或时间
2 <abbr> 缩写
3 <sub> 下标
4 <sup> 上标
5 <address> 地址,通常用在<footer>中
6 <s> / <del> 删除线, <s>无语义
7 <code> 显示代码块,通常与代码格式化插件配合,才能高亮关键字
8 <progress> 进度条
9 <b> / <strong> 加粗, <b>无语义
10 <i> / <em> 斜体, <i>无语义
11 <mark> 高亮标记, 默认为内容添加黄色背景
12 <q> / <blockquote> 引用, 内容加双引号

demo2示例

  1. <!DOCTYPE html>
  2. <html>
  3.     <!--为了美观，后面会有一些代码省略-->
  4.     <!--....-->
  5.     <title>文本相关标签</title>
  6.     <!--....-->
  7.     <body>
  8.         <p>段落标签</p>
  9.         <pre>
  10.             预处理标签，
  11.             会按原文本格式显示。
  12.         </pre>
  13.         <br>换行
  14.         <span>无意义标签</span>
  15.     </body>
  16. </html>

demo2运行截图

demo2运行结果
图2 文本标签1

demo3示例

  1. <!--为了简洁美观,这里只写主体代码-->
  2. <body>
  3.     <!--描述日期或时间-->
  4.     <time>2019-12-20 16:50</time>
  5.     <p>
  6.         <abbr title="HyperText Markup Language">HTML</abbr>
  7.         文档,是指采用超文本标记语言编写的结构化文档
  8.     </p>
  9.     <p>2<sup>3</sup>=8</p>
  10.     <p>武汉<sub>中国发展最快的城市之一</sub>欢迎您</p>
  11.     <footer>
  12.     联系地址：<address>武汉市光谷广场128号</address>
  13.     </footer>
  14.     <!--删除线-->
  15.     <p>
  16.         <del>我是删除线</del>
  17.     </p>
  18.     <!--代码, 通常与pre配合-->
  19.     <p>
  20.         <pre>
  21.         <code><?php echo "PHP是最好的语言"?>;</code>
  22.         </pre>
  23.     </p>
  24.     <!--进度条-->
  25.     <p>
  26.         <!--如果浏览器不支持该标,则显示内部文本: 已完成 50%-->
  27.         <progress value="80" max="100">已完成80%</progress>
  28.     </p>
  29.     <!--加粗-->
  30.     <p>
  31.         <strong>我加粗了，还有语义哦~</strong>
  32.         <br>
  33.         <b>我也加粗了，<code><b></b></code>没有语义</b>
  34.     </p>
  35.         <p>
  36.         <em>我加粗了，<code><em></em></code>还有语义哦~</em>
  37.             <br>
  38.         <i>我也加粗了，<code><i></i></code>没有语义</i>
  39.     </p>
  40.     <p>
  41.         我是<mark>Mr.fgz 自带黄色背景</mark>
  42.         <br>
  43.         <q>引用文本,请注意，浏览器在引用的周围插入了引号。</q>
  44.         <br>
  45.         <blockquote>
  46.             标记长的引用Here is a long quotation
  47.             Here is a long quotation
  48.             请注意，浏览器在 blockquote 元素前后添加了换行，并增加了外边距。
  49.         </blockquote>
  50.     </p>
  51. </body>

demo3运行结果

demo3运行结果
图3 文本标签2

PS：语义化标签，其实就是给标签里面的内容添加了一些默认样式
ps:pre和code可以同时使用，但使用顺序为：在pre中使用code标签
小于号：<,大于号：>

4. 图片与链接

知识要点
img标签 三个属性，src，alt，width/height
a标签 三个属性，href，target，title

  • <a href="..." target="..." title="...">:
    链接元素,可以实现用户在不同的页面跳转的功能
  • href属性: 跳转的目标地址
属性 描述
href=”url” 跳转的目标地址
href=”mailto: 111@qq.com” 打开邮箱,发送邮件
href=”tel:130**8988” 点击后,会询问用户是否要拨打电话
href=”demo1.zip” 浏览器不能解析的文档, 会直接下载

target属性: 在哪个窗口打开新页面,默认当前窗口

属性 描述
target=”__self” 当前窗口
target=”_blank” 新窗口
target=”_parent” 父窗口
target=”_top” 顶层窗口
target=”name” 指定名称的窗口
target=”#anchor” 跳转到设置了锚点的元素所在位置

注：可以在任何元素上，通过id属性来设置锚点，供a标签跳转使用

demo4示例

  1. <!--为了简洁，省略部分代码,下面只写主体代码-->
  2. <body>
  3. <p>
  4.     <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2713388704,1755427657&fm=26&gp=0.jpg" alt="动漫图" width="200">
  5.     <img src="1.jpg" alt="动漫图" width="200">
  6. </p>
  7. <h3>a标签href的应用</h3>
  8. <p>
  9.     <a href="https://www.php.cn">普通链接</a>
  10.     <a href="demo.zip">下载zip</a>
  11.     <a href="emailto:11@qq.com">emailto发邮件</a>
  12.     <a href="tel:130****4567">tel打电话</a>
  13.     <br>
  14.     <a href="#hello">锚点,href写目标#id名</a>
  15. </p>
  16. <h2 id="hello" style="height:1000px">我是目标</h2>
  17. </body>

demo4运行结果

img及a标签运用示例
图4 a标签应用

5.列表<ul>、<ol>、<dl>

列表分为无序列表、有序列表、自定义列表

序号 标签 描述
1 <ul>, <li> 无序列表
2 <ol>, <li> 有序列表
3 <dl>, <dt>,<dd> 自定义列表

demo5示例

  1. <body>
  2.     <!--无序列表-->
  3.     <ul>
  4.         <li>庆余年</li>
  5.         <li>剑王朝</li>
  6.         <li>从前有座灵剑山</li>
  7.     </ul>
  8.     <!--有序列表-->
  9.     <ol start="1" type="i">
  10.         <li>庆余年</li>
  11.         <li>剑王朝</li>
  12.         <li>从前有座灵剑山</li>
  13.     </ol>
  14.     <!--自定义列表-->
  15.     <dl>
  16.         <dt>2019最火电视剧</dt>
  17.         <dd>庆余年</dd>
  18.         <dd>剑王朝</dd>
  19.         <dd>从前有座灵剑山</dd>
  20.     </dl>
  21. </body>

demo5运行截图

demo5运行截图
图5 列表

6.表格<table>

表格是最重要的数据格式化展示重要工具, 使用频率非常高

  • 数据标签:
序号 标签 描述
1 <table> 定义表格, 必选
2 <tr> 定义表格中的行, 必选
3 <th> 定义表格头部中的单元格, 必选
4 <td> 定义表格主体中的单元格, 必选
  • 结构标签:
序号 标签 描述
1 <option> 定义表格标题, 可选
2 <thead> 定义表格头格, 只需定义一次, 可选
3 <tbody> 定义表格主体, 允许定义多次, 可选
4 <tfooter> 定义表格底, 只需定义一次, 可选
  • 常用属性:
序号 属性 所属标签 描述
1 border <table> 添加表格框
2 cellpadding <table> 设置单元格内边距
2 cellspacing <table> 设置单元格边框间隙
2 align 不限 设置单元格内容水平居中
2 bgcolor 不限 设置背景色

demo6示例

  1. <head>
  2. <meta charset="UTF-8">
  3. <title>表格</title>
  4. <style>
  5.     table{border:1px solid #000;margin:auto;}
  6.     .date{text-align:center}
  7.     table th{background-color:#409D92;color:#fff;border:1px solid #ccc}
  8.     table td{border:1px solid #ccc}
  9.     table tr:hover{
  10.         background-color:#dafdf3;
  11.     }
  12. </style>
  13. </head>
  14. <body>
  15.     <table border-collapse="collapse" cellspacing="0" cellpadding="10" width="600">
  16.         <!--标题-->
  17.         <caption><h3>最火电视剧</h3></caption>
  18.         <!--表格头部-->
  19.         <thead>
  20.             <tr>
  21.                 <th>电视剧名称</th>
  22.                 <th>类型</th>
  23.                 <th>剧集</th>
  24.                 <th>地区</th>
  25.                 <th>首播时间</th>
  26.             </tr>
  27.         </thead>
  28.         <tbody>
  29.             <tr>
  30.                 <td>庆余年</td>
  31.                 <td rowspan="2">古装</td>
  32.                 <td>46集</td>
  33.                 <td>中国大陆</td>
  34.                 <td class="date">2019年11月26日</td>
  35.             </tr>
  36.             <tr>
  37.                 <td>剑王朝</td>
  38.                 <td>34集</td>
  39.                 <td>中国大陆</td>
  40.                 <td class="date">2019年12月6日</td>
  41.             </tr>
  42.             <tr>
  43.                 <td>从前有座灵剑山</td>
  44.                 <td>古装</td>
  45.                 <td>36集</td>
  46.                 <td>中国大陆</td>
  47.                 <td class="date">2019年11月12日</td>
  48.             </tr>
  49.         </tbody>
  50.         <tfoot>
  51.             <tr>
  52.                 <td colspan="4" align="center">总计：</td>
  53.                 <td>3</td>
  54.             </tr>
  55.         </tfoot>
  56.     </table>
  57. </body>

demo6运行截图

demo6表格
图6 表格

7.内联框架<iframe>

demo7示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <!--<head> 标签用于定义文档的头部,描述了文档的各种属性和信息-->
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>内联框架</title>
  7.         <style>
  8.             .phone{
  9.                 display:inline-block;
  10.                 width:300px;
  11.                 height:631px;
  12.                 background:url(8.png) no-repeat;
  13.                 background-size:300px 631px;
  14.                 position:relative;
  15.             }
  16.             .web{
  17.                 width:255px;
  18.                 height:465px;
  19.                 position: absolute;
  20.                 top: 30px;
  21.                 right: 0;
  22.                 bottom: 0;
  23.                 left: 0;
  24.                 margin: auto;
  25.                 background-color:#fff;
  26.             }
  27.         </style>
  28.     </head>
  29. <body>
  30.     <div style="float:left;margin-right:15px;">
  31.         <ul>
  32.             <li><a href="http://m.baidu.com" target="content">系统设置</a></li>
  33.             <li><a href="http://m.baidu.com" target="content">用户管理</a></li>
  34.         </ul>
  35.     </div>
  36.     <div class="phone">
  37.         <iframe srcdoc="<h2>欢迎使用管理后台</h2>" class="web" frameborder="1" name="content"></iframe>
  38.     </div>
  39. </body>
  40. </html>

demo7运行截图

demo7
图7 内联框架

8.表单<form>

用户通过表单来传递数据给服务器，表单在页面中负责采集数据功能，表单的重要性不用多说，下面就进行表单元素进行介绍

demo8示例

  1. <body>
  2.     <form action="" method="post">
  3.         <p>
  4.             <label for="user">账号：</label>
  5.             <input type="text" name="username" id="user" placeholder="6-10位中英文字符" required>
  6.         </p>
  7.         <p>
  8.             <label for="psd">密码：</label>
  9.             <input type="text" name="password" id="psd" placeholder="密码不少于6位">
  10.         </p>
  11.         <p>
  12.             <label for="female">性别：</label>
  13.             <label for="male">男</label>
  14.             <input type="radio" name="gender" id="male" value="1">
  15.             <label for="female">女</label>
  16.             <input type="radio" name="gender" id="female" value="2">
  17.             <label for="secret">保密</label>
  18.             <input type="radio" name="gender" id="secret" value="3">
  19.         </p>
  20.         <p>
  21.             <label for="programme">爱好：</label>
  22.             <input type="checkbox" name="hobby[]" value="game" id="game">
  23.             <label for="">玩游戏</label>
  24.             <input type="checkbox" checked name="hobby[]" value="movie" id="movie">
  25.             <label for="">看电影</label>
  26.             <input type="checkbox" name="hobby[]" value="game" id="programme">
  27.             <label for="">写代码</label>
  28.         </p>
  29.         <p>
  30.             <label for="dw">段位：</label>
  31.             <select name="dw" id="dw">
  32.                 <option value="1" label="王者"></option>
  33.                 <option value="2" label="钻石"></option>
  34.                 <option value="3" label="青铜"></option>
  35.             </select>
  36.         </p>
  37.         <p>
  38.             <label for="brand">手机品牌：</label>
  39.             <input type="search" list="phone" name="" id="brand">
  40.             <datalist id="phone">
  41.             <option value="apple" label="小米"></option>
  42.             <option value="hw"></option>
  43.             <option value="mi"></option>
  44.             </datalist>
  45.         </p>
  46.         <p>
  47.             <label for="uploads">上传：</label>
  48.             <input type="file" name="img" id="uploads" accept="image/png,image/jpeg,image/gif">
  49.         </p>
  50.         <p>
  51.             <label for="time">日期：</label>
  52.             <input type="date" id="time" name="time">
  53.         </p>
  54.         <button type="submit">提交</button>
  55.         <button type="reset">重置</button>
  56.     </form>
  57. </body>

demo8 运行截图

demo8截图
图8 表单

表单作为页面的数据采集工具，是后面与服务器交互的重点，以下是表单的知识点：

表单知识点手稿

<center>（表单知识点手稿）</center>

1.表单元素类型

序号 元素 名称 描述
1 <form> 表单容器 表单应该放在该标签内提交
2 <input> 输入控件 由type属性指定控件类型
3 <label> 控件标签 用于控件功能描述与内容关联
4 <select> 下拉列表 用于选择预置的输入内容
5 <datalist> 预置列表 用于展示预置的输入内容
6 <option> 预置选项 与<select>,<datalist>配合
7 <textarea> 文本域 多行文本框，常与富文本编辑器配合
8 <button> 按钮 用于提交表单

2. 表单元素属性

序号 元素 属性
1 <form> action, method
2 <label> for
3 <input> type, name,value,placeholder…
4 <select> name
5 <datalist> id,与<input list="">关联
6 <option> value, label,selected
7 <textarea> cols, rows,name…
8 <button> type,name

表单元素的公共属性(并非所有元素都具备)

序号 属性 描述
1 name 元素/控件名称,用做服务器端脚本的变量名称
2 value 提交到服务器端的数据
3 placeholder 输入框的提示信息
4 form 所属的表单,与<form name="">对应
5 autofocus 页面加载时,自动获取焦点
6 required 必填 / 必选项
7 readonly 该控件内容只读
8 disabled 是否禁用

3. <input>的type类型

3.1 常用的type类型

序号 属性 名称 描述
1 type="text" 文本框 默认值
2 type="password" 密码框 输入内容显示为*,不显示明文
3 type="radio" 单选按钮 多个选项中仅允许提交一个(应提供默认选项)
4 type="checkbox" 复选框 允许同时提交一个或多个选项(应提供默认选项)
5 type="hidden" 隐藏域 页面不显示,但数据仍会被提交
6 type="file" 文件上传 本地文件上传,有accept,multiple属性
7 type="submit" 提交按钮 点击后会提交按钮所在的表单
8 type="reset" 重置按钮 点击后会重置输入控件中的内容为默认值
9 type="button" 自定义按钮 使用JS脚本定义按钮点击后的行为

3.2 其它type类型(部分)

序号 属性 名称 描述
1 type="email" 邮箱 输入必须是邮箱格式
2 type="number" 整数 输入必须是整数,可设置范围min,max
3 type="url" URL地址 输入内容必须是有效的URL格式文本
4 type="search" 搜索框 通常与autocomplete配合
5 type="hidden" 隐藏域 页面不显示,但数据仍会被提交
6 type="date" 日期控件 不同浏览器显示略有不同,但功能一致
7 type="color" 调色板 可直接选择颜色, 不同平台略有不同
8 type="tel" 电话号码 手机端会弹出数字小键盘

4. 注意事项

  • 添加disabled禁用属性的字段数据不会被提交,但是readonly只读属性的字段允许提交
  • 隐藏域的内容不会在HTML页面中显示,但是value属性的数据会被提交
上一条：12月20日—属性选择器和表单选择器下一条：CSS学习用table和float+position两种方式进行网页布局-PHP第十期线上培训班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多