文章目录

  • 1. html 骨架（页面固定结构）
  • 2. html 注释
  • 3. html 标题标签
  • 4. 换行标签
  • 5. 水平线标签
  • 6. 文本格式化标签
  • 7. 图片标签
    • 7.1 图片标签的使用
    • 7.2 图片标签的属性
  • 8. 路径
    • 8.1 绝对路径
    • 8.2 相对路径
  • 9. 音频标签
  • 10. 视频标签
  • 11. 链接标签
  • 12. 段落标签
  • 13. 列表
    • 13.1 无序列表
    • 13.2 有序列表
    • 13.3 自定义列表
  • 14. 表格
    • 14.1 基本标签
    • 14.2 表格属性
    • 14.3 表格标题和表头单元格标签
    • 14.4 结构标签
    • 14.5 合并单元格
  • 15. 表单
    • 15.1 input 系列标签
    • 15.2 button 按钮标签
    • 15.3 select 下拉菜单标签
    • 15.4 textarea 文本域标签
    • 15.5 label 标签
  • 16. 语义化标签
    • 16.1 没有语义的布局标签 - div 和 span
    • 16.2 有语义的布局标签（了解）
  • 17. 字符实体
  • 18. 综合案例
    • 18.1 优秀学生信息表
    • 18.2 相亲会员注册表单

1. html 骨架（页面固定结构）

整体、头部、标题、主体

<html><head><title>网页的标题</title></head><body>网页的主体内容</body>
</html>

  • html 标签：网页的整体

  • head 标签：网页的头部

  • body 标签：网页的身体

  • title 标签：网页的标题

2. html 注释

注释格式

<!-- 这是注释的内容 -->

3. html 标题标签

格式：h 系列标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

标题大小根据级别逐渐缩小，标题标签写在 body 标签中。

4. 换行标签

格式：

<br>

换行标签让文字强制换行显示，是单标签。

5. 水平线标签

格式：

<hr>

单标签，在页面中显示一条水平线。

6. 文本格式化标签

文本格式化标签完成文字的加粗、下划线、倾斜、删除线等效果。

标签 说明
b/strong 加粗
u/ins 下划线
i/em 倾斜
s/del 删除线

7. 图片标签

7.1 图片标签的使用

在网页中显示图片需要用到图片标签。

格式：

<img src="URL" alt="">// src 为属性名，后面跟属性值。
// URL 可以是本地地址，也可以是公网上的地址。
// alt 属性用来为图像定义一串预备的可替换的文本。

是单标签，展示对应的效果需要借助标签的属性进行设置。

7.2 图片标签的属性

必需的属性

属性 值 描述
alt text 规定图像的替代文本，当图片加载失败会显示替换的内容。
src URL 规定显示图像的 URL。

可选的属性

属性 值 描述
title 提示文本 鼠标悬停时显示的文本。
align top/bottom/middle/left/right 不推荐使用。规定如何根据周围的文本来排列图像。
border pixels 不推荐使用。定义图像周围的边框。
height pixels*%* 定义图像的高度。
hspace pixels 不推荐使用。定义图像左侧和右侧的空白。
ismap URL 将图像定义为服务器端图像映射。
longdesc URL 指向包含长的图像描述文档的 URL。
usemap URL 将图像定义为客户器端图像映射。
vspace pixels 不推荐使用。定义图像顶部和底部的空白。
width pixels*%* 设置图像的宽度。

示例

<img src="./cat.gif" alt="图片加载失败" title="这是一只猫" width="500" height="500">

8. 路径

8.1 绝对路径

示例：

<img src="D:\图片素材\表情包\2020_1111.png" alt="图片加载失败">
<img src="http://101.34.22.188/tupian/girl-01.jpg" alt="图片加载失败">

8.2 相对路径

示例：

<img src="./test.jpg" src="图片加载失败">

9. 音频标签

音频标签用于在页面中插入音频，支持的格式：MP3、Wav、Ogg。

格式：

<audio src="./music.mp3" controls></audio>

常用属性：

属性名 功能
loop 循环播放
autoplay 自动播放（部分浏览器不支持）
controls 显示播放的控件
src 音频的路径

示例：

<audio src="http://music.163.com/song/media/outer/url?id=4873075.mp3" controls autoplay loop></audio>

10. 视频标签

视频标签用于在网页中插入视频。

格式：

<video src="./video.mp4" controls></video>

常用属性：

属性名 功能
loop 循环播放
autoplay 自动播放（谷歌浏览器需配合muted实现静音播放）
controls 显示播放的控件
src 视频的路径

示例：

<video src="https://video.699pic.com/videos/79/59/32/a_JTV8yrQGFrNy1613795932.mp4" controls autoplay muted loop></video>

11. 链接标签

  • 场景：点击之后，从一个页面跳转到另一个页面。

  • 称呼：a 标签、超链接、锚链接。

  • 特点：双标签，需要设置 a 标签的 href 属性。

格式：

<a href="./destination.html">超链接</a>

target 属性：目标网页的打开形式

取值 效果
_self 默认值，当前窗口跳转（覆盖原网页）
_blank 在新窗口跳转（保留原网页）

示例：

<a href="https://blog.csdn.net/shenyuanhaojie?spm=1000.2115.3001.5343">我的博客</a>
<a href="https://www.baidu.com/" target="_blank">百度一下</a>

当开发网站初期，我们还不知道跳转地址的时候， href 的值书写为 # ，是空链接的意思。

12. 段落标签

p 标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，也可以在样式表中规定。所有主流浏览器都支持 p 标签。

格式：

<p>This is some text in a very short paragraph</p>

可选属性：

属性 值 描述
align left/right/center/justify 不赞成使用。请使用样式取代它。规定段落中文本的对齐方式。

示例：

<p>秦时明月主题曲《情动》，旋律优美，扣人心弦，推荐收听！<a href="http://www.zgei.com/?name=%E6%83%85%E5%8A%A8&type=netease">《情动》</a>
</p>

13. 列表

  • 列表的使用场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等。

  • 特点：按照行的方式，整齐的显示内容。

  • 种类：无序列表、有序列表、自定义列表。

13.1 无序列表

标签组成：

标签名 说明
ul 表示无序列表的整体，用于包裹标签
li 表示无序列表的每一项，用于包含每一行的内容

列表的每一项前默认显示圆点标识；ul 标签中只允许包含 li 标签，li 标签可以包含任意内容。

示例：

<ul><li>香蕉</li><li>苹果</li><li>榴莲</li>
</ul>

13.2 有序列表

标签组成：

标签名 说明
ol 表示有序列表的整体，用于包裹 li 标签
li 表示有序列表的每一项，用于包含每一行的内容

列表的每一项前默认显示序号标识；ol 标签中只允许包含 li 标签，li 标签可以包含任意内容。

示例：

<ol><li>香蕉</li><li>苹果</li><li>榴莲</li>
</ol>

13.3 自定义列表

标签组成：

标签名 说明
dl 表示自定义列表的整体，用于包裹 dt/dd 标签
dt 表示自定义列表的主题
dd 表示自定义列表的针对主题的每一项内容

dd 前会默认显示缩进效果；dl 标签中只允许包含 dt/dd 标签，dt/dd 标签可以包含任意内容。

示例：

<dl><dt>帮助中心</dt><dd>账户管理</dd><dd>购物指南</dd><dd>订单操作</dd>
</dl>

14. 表格

14.1 基本标签

标签名 说明
table 表格整体，可用于包裹多个 tr
tr 表格每行，用于包裹 td
td 表格单元格，可用于包裹内容

嵌套关系：table > tr > td

示例：

<table><tr><td>姓名</td><td>成绩</td><td>评语</td></tr><tr><td>小红</td><td>100</td><td>优秀</td></tr><tr><td>小蓝</td><td>90</td><td>优秀</td></tr>
</table>

上面示例显示效果是没有边框的，需要设置属性。

14.2 表格属性

相关属性：

属性名称 属性值 效果
align left/center/right 规定表格相对周围元素的对齐方式
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素
cellspacing 像素值 规定单元格之间的空白，默认2像素
border 数字 边框宽度
width 数字 表格宽度
height 数字 表格高度

PS：在实际开发中样式效果推荐用 CSS 设置。

示例：

<table border="1" width="500" height="500"><tr><td>姓名</td><td>成绩</td><td>评语</td></tr><tr><td>小红</td><td>100</td><td>优秀</td></tr><tr><td>小蓝</td><td>90</td><td>优秀</td></tr>
</table>

14.3 表格标题和表头单元格标签

用处：在表格中表示整体大标题和一系列小标题。

其他标签：

标签名 名称 说明
caption 表格大标题 表示表格整体大标题，默认在表格整体顶部居中位置显示
th 表头单元格 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

PS：caption 标签书写在 table 标签内部；th 标签书写在 tr 标签内部（用于替换 td 标签）。

示例：

<table border="1"><caption><strong>学生成绩单</strong></caption><tr><th>姓名</th><th>成绩</th><th>评语</th></tr><tr><td>小红</td><td>100</td><td>优秀</td></tr><tr><td>小蓝</td><td>90</td><td>优秀</td></tr>
</table>

14.4 结构标签

用处：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰。

结构标签：

标签名 名称
thead 表格头部
tbody 表格主题
tfoot 表格底部

PS：表格结构标签内部用于包裹 tr 标签，表格的结构标签可以省略。

示例：

<table border="1"><caption><strong>学生成绩单</strong></caption><thead><tr><th>姓名</th><th>成绩</th><th>评语</th></tr></thead><tbody><tr><td>小红</td><td>100</td><td>优秀</td></tr><tr><td>小蓝</td><td>90</td><td>优秀</td></tr></tbody><tfoot><tr><td>总结</td><td>非常优秀</td><td>非常优秀</td></tr></tfoot>
</table>

14.5 合并单元格

合并单元格方式：

  • 跨行合并：rowspan=“合并单元格的个数” ；最上侧单元格为目标单元格, 写合并代码。

  • 跨列合并：colspan=“合并单元格的个数”；最左侧单元格为目标单元格, 写合并代码。

合并单元格三步曲：

  • 先确定是跨行还是跨列合并。

  • 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan=“2”></td>。

  • 删除多余的单元格。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>合并单元格</title>
</head>
<body><table width="500" height="249" border="1" cellspacing="0"><tr><td></td><td colspan="2"></td></tr><tr><td rowspan="2"></td><td></td><td></td></tr><tr><td></td><td></td></tr></table>
</body>
</html>

效果：

15. 表单

15.1 input 系列标签

  • 用处：在网页中显示收集用户信息的表单效果，如：登录页、注册页。

  • input 标签可以通过 type 属性值的不同展示不同的效果。

type 属性值

示例

请输入内容：<input type="text">
<br>
请输入密码：<input type="password">   <!--输入的内容会隐藏-->
<br>
单选框：<input type="radio">
<br>
多选框：<input type="checkbox">
<br>
上传文件：<input type="file">

input 按钮系列标签

标签名 type 属性值 说明
input submit 提交按钮，点击之后提交数据给后端服务器
input reset 重置按钮，点击之后恢复表单默认值
input button 普通按钮，默认无功能，之后配合 js 添加功能

PS：如果需要实现以上按钮功能，需要配合 form 标签使用。form 使用方法：用 form 标签把表单标签一起包裹起来即可。

示例：

<form action="">    <!--表单域标签，框定范围，action 后跟提交地址-->用户名：<input type="text"><br>密码：<input type="password"><br><!--按钮--><input type="submit" value="免费注册"><input type="reset"><input type="button" value="普通按钮，暂无功能">
</form>

15.2 button 按钮标签

button 标签用于在网页中显示用户点击的按钮。

type 属性值同 input

标签名 type 属性值 说明
input submit 提交按钮，点击之后提交数据给后端服务器
input reset 重置按钮，点击之后恢复表单默认值
input button 普通按钮，默认无功能，之后配合 js 添加功能

PS：谷歌浏览器中 button 默认是提交按钮，button 标签是双标签，便于包裹其他内容：文字、图片等。

示例：

<button>我是按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>

15.3 select 下拉菜单标签

场景：在网页中提供多个选择项的下拉菜单表单控件

标签组成：

  • select标签：下拉菜单的整体

  • option标签：下拉菜单的每一项

常见属性：

  • selected：下拉菜单的默认选中

示例：

<select><option selected>北京</option><option>上海</option><option>广州</option><option>深圳</option>
</select>

15.4 textarea 文本域标签

场景：在网页中提供可输入多行文本的表单控件。

常见属性：

  • cols：规定了文本域内可见宽度

  • rows：规定了文本域内可见行数

注意点：

  • 右下角可以拖拽改变大小

  • 实际开发时针对于样式效果推荐用 CSS 设置

示例：

<textarea cols="60" rows="30">默认内容</textarea>

15.5 label 标签

场景：常用于绑定内容与表单标签的关系。

使用方法一：

  1. 使用 label 标签把内容（如：文本）包裹起来

  2. 在表单标签上添加 id 属性

  3. 在 label 标签的 for 属性中设置对应的 id 属性值

使用方法二：

  1. 直接使用 label 标签把内容（如：文本）和表单标签一起包裹起来

  2. 需要把 label 标签的 for 属性删除即可

示例：

性别：
<input type="radio" name="sex" id=""> <label for="">男</label>
<label><input type="radio" name="sex">女</label>
<!--两种方式-->

16. 语义化标签

16.1 没有语义的布局标签 - div 和 span

  • 场景：实际开发网页时会大量频繁的使用到 div 和 span 这两个没语义的布局标签。

  • div 标签：一行只显示一个（独占一行） 。

  • span 标签：一行可以显示多个。

示例：

普通文字
<div>这是 div 标签</div>
<div>这是 div 标签</div>
<span>这是 span 标签</span>
<span>这是 span 标签</span>

16.2 有语义的布局标签（了解）

标签 语义
header 网页头部
nav 网页导航
footer 网页底部
aside 网页侧边栏
section 网页区块
article 网页文章

PS：以上标签显示特点和 div 一致，但是比 div 多了不同的语义。

示例：

<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>侧边栏</aside>
<section>网页区块</section>
<article>文章</article>

17. 字符实体

场景：在网页中展示特殊符号效果时，需要使用字符实体替代。

常见字符实体：

18. 综合案例

18.1 优秀学生信息表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1" width="400" height="400"><!-- 表格整体的大标题 --><caption><h3>优秀学生信息表格</h3></caption><!-- 表格的头部 --><thead><tr><th>年级</th><th>姓名</th><th>学号</th><th>班级</th></tr></thead><!-- 表格的主体 --><tbody><tr><!-- 保留 --><td rowspan="2">高三</td><td>张三</td><td>110</td><td>三年二班</td></tr><tr><!-- 删除 --><!-- <td>高三</td> --><td>赵四</td><td>120</td><td>三年三班</td></tr></tbody><!-- 表格的底部 --><tfoot><tr><td>评语</td><!-- 保留 --><td colspan="3">你们都很优秀</td><!-- 统统删除掉 --><!-- <td>你们都很优秀</td> --><!-- <td>你们都很优秀</td> --></tr></tfoot></table>
</body>
</html>

18.2 相亲会员注册表单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>青春不常在，抓紧谈恋爱</h1><hr><form>昵称：<input type="text" placeholder="请输入昵称"><br><br>性别：<label><input type="radio" name="sex" checked>男</label><label><input type="radio" name="sex">女</label><br><br>所在城市：<select><option>上海</option><option>北京</option><option>广州</option><option>深圳</option></select><br><br>婚姻状况：<input type="radio" name="marry" checked>未婚<input type="radio" name="marry">已婚<input type="radio" name="marry">保密<br><br>喜欢的类型：<input type="checkbox" checked>可爱<input type="checkbox" checked>性感<input type="checkbox">御姐<input type="checkbox">萝莉<input type="checkbox">小鲜肉<input type="checkbox">大叔<br><br>个人介绍：<br><br><textarea name="" id="" cols="60" rows="10"></textarea><h3>我承诺</h3><ul><li>年满18岁、单身</li><li>抱着严肃的态度</li><li>真诚寻找另一半</li></ul><input type="checkbox">我同意所有条款<br><br><input type="submit" value="免费注册"><input type="reset"></form>
</body>
</html>

HTML5 基础总结相关推荐

  1. html页面视频标签,html5基础标签(html5视频标签 html5新标签用法)

    点评:html5基础,包括html5视频标签和html5新标签等标签用法,大家参考使用吧 1.  声明的变化 2.  指定字符编码的变化,html5中建议使用utf-8 3.  Html5中允许 没有 ...

  2. html5基础知识文档,HTML5基础知识（1）

    原标题:HTML5基础知识(1) html5是万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改.2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力, ...

  3. html5实践开发教程,HTML5基础与实践教程

    HTML5基础与实践教程 语音 编辑 锁定 讨论 上传视频 <HTML5基础与实践教程>是2010年4月机械工业出版社出版的图书,作者是云翔,刘猛猛,欧阳植昊. 书    名 HTML5基 ...

  4. html5语言基础教程,HTML5基础教程，从入门到精通，零基础学HTML5

    随着互联网的快速发展,对前端开发方面的人才需求越来越大,其中Web前端领域的HTML5也受到许多人追捧 HTML5是构建Web内容的一种语言描述方式.HTML5是互联网的下一代标准,是构建以及呈现互联 ...

  5. 苹果7手机html5测试,HTML5 基础测试题

    HTML5 基础测试题 1.HTML5 之前的 HTML 版本是什么?() A.HTML 4.01 B.HTML 4 C.HTML 4.1 D.HTML 4.9 2.HTML5 的正确 doctype ...

  6. html5教学文档笔记,4.HTML 教程- (HTML5 基础）

    HTML 教程- (HTML5 基础) 1.HTML 标题 HTML 标题(Heading)是通过 - 标签来定义的. 2.HTML 段落 HTML 段落是通过标签 来定义的. 3.HTML 链接 H ...

  7. html5语句大全,html5基础语句（学习）

    起风了 兼容性问题 文档类型设定 字符设定 常用新标签 新增的input type属性值: 常用新属性 综合案例 兼容性问题 文档类型设定 document HTML http://blog.sina ...

  8. HTML5 基础知识

    HTML5 基础知识 什么是 HTML? HTML 是一种超文本标记语言,"超文本"就是指页面内可以包含图片.链接.深职音乐.视频.程序等非文字元素 HTML 不是一种编程语言 H ...

  9. html5从基础到入门,Html5从入门到精通系列2：Html5基础

    Html5从入门到精通系列2:Html5基础 (2015-04-04 11:36:53) 标签: html5 html5教程 html5视频教程 html5从入门到精通 2-1.1.HTML5简介.M ...

  10. HTML5基础之代码入门

    HTML5基础之代码入门 2016-11-12 15:24 515人阅读 评论(0) 收藏 举报 分类: HTML & HTML5(13) 作者同类文章 X 版权声明:本文为博主原创文章,如需 ...

最新文章

  1. 修改CentOS yum源
  2. zabbis监控mysql数据库
  3. Babel的配置和使用
  4. 角落的开发工具集之Vs（Visual Studio)2017插件推荐
  5. 24v开关电源维修技巧_康佳LED液晶彩电KPS+L1900C301电源板原理与维修
  6. ionic4 组件的使用（一）
  7. android中拷贝assets下的资源文件到SD卡中(可以超过1M)
  8. 基于nagios网络监控平台的实现--具体事例
  9. 明小子mysql_安全狗最新版SQL注入防护多种方式bypass(简简单单/各种数据库通用)...
  10. Android 鼠标键值列表,安卓键盘键值对照表
  11. 安装ubuntu系统中磁盘分区
  12. Soul App 高管被捕，恶意举报导致竞品被下架
  13. 淘宝客返利网的实现方法
  14. 百度地图 截图java_我从百度地图静态图API中通过url获取到的图片,用java有没有什么办法可以把图片上的百度logo去掉呢...
  15. 休闲食品线上与线下的差异化
  16. 嵌入式软件的调试工具
  17. Ridge Regression and Kernel Ridge Regression
  18. 后端程序员福音 -- TellMe 推送助手
  19. 金融IT的“困”与“道”
  20. 网络设备互联技术· 『1』

热门文章

  1. 谈一谈url实现文件下载
  2. 卓训教育：孩子不爱学习怎么办，如何让孩子将动力内化
  3. Python开发培训怎么选
  4. 使用逐浪CMS做网站如何引用Markdown编辑器
  5. 如何将原来Eclipse的一个工作空间设置好的界面复制到另外一个Eclipse里面
  6. 使用Cent Browser+Aria2+Bilibili Envolved下载b站视频--保姆级安装步骤
  7. 1.搭建普罗米休斯监控，实现可视化展示
  8. 使用七牛云存储解决app部署问题,免申请https认证
  9. U盘安装Fedora 24时出现的几个问题及解决办法
  10. Pr：导出设置之元数据