HTMl(超文本标记语言)
HTML 概述
超文本标记语言用来描述和定义网页的
内容
HTML
(超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦;它定义了网页内容的含义
和结构
“超文本
”(hypertext)是指连接单个网站内或多个网站间的网页的链接
1. HTML标签功能区分
<!DOCTYPE html>
<!-- * 语言设置 -->
<html lang="en">
<head>
<!-- ** 元信息 -->
<!-- * 字符集设置 -->
<meta charset="UTF-8" />
<!-- * IE 兼容 -->
<!--
? http-equiv="X-UA-Compatible" IE 特有属性
? content="IE=edge" 规定 IE 使用最新版本的标准模式渲染
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- * referrer 设置 -->
<meta name="referrer" content="no-referrer" />
<!-- * 移动端兼容 -->
<!--
? name="viewport" 移动端设置
? width=device-width 可视区域的宽度为设备宽度
? height=device-height 可视区域的高度为设备高度
? initial-scale=1.0 页面首次被显示时可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
? maximum-scale=1.0, minimum-scale=1.0 可视区域的缩放级别
? user-scalable 是否可对页面进行缩放,no 禁止缩放
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- * 标题 -->
<title>功能区分</title>
<!-- * 介绍 -->
<meta name="description" content="网页介绍" />
<!-- * 关键字 -->
<meta name="keywords" content="网页关键字" />
<!-- * 链接默认地址、默认打开方式 -->
<!--
? 1. href:url;
? 2. target:在何处打开链接;
? _blank:新窗口;_parent:上一级窗口;_self:当前窗口(默认);_top:在浏览器的整个窗口打开链接,忽略任何框架
-->
<base href="" target="_blank" />
<!-- * 引入首页样式 -->
<link rel="stylesheet" href="./css/index.css" />
<!-- * 引入首页脚本 -->
<script src="index.js" async></script>
</head>
<body>
<!-- ** 语义化标签 -->
<h1-h6>一 ~ 六级标题</h1-h6>
<p>段落</p>
<div>块</div>
<span>行内块</span>
<!-- ** HTML5 新增HTML语义化标签 -->
<header>头部</header>
<nav>导航</nav>
<main>主体</main>
<article>章</article>
<section>节</section>
<aside>侧边栏</aside>
<footer>底部</footer>
<!-- ** 超链接 -->
<a href="http://www.baidu.com" target="_blank"></a>
<!-- ** 图像 -->
<img src="./image/logo.png" alt="图像替换文本" />
<!-- * 列表 -->
<!-- * 有序列表 -->
<ul>
<li>列表项</li>
</ul>
<!-- * 无序列表 -->
<ol>
<li>列表项</li>
</ol>
<!-- * 定义列表 -->
<dl>
<dt>列表项目</dt>
<dd>列表项目描述</dd>
</dl>
<!-- ** 表格 -->
<!--
? border:边框
? cellpadding:单元格间距
? cellspacing:单元格内边距
-->
<table border="1" cellpadding="0" cellspacing="0">
<!-- * 表格头部 -->
<thead>
<tr>
<th>表头</th>
</tr>
</thead>
<!-- * 表格脚注 -->
<tfoot></tfoot>
<!-- * 表格主体 -->
<tbody>
<tr>
<td>单元格</td>
</tr>
</tbody>
</table>
<!-- ** 表单 -->
<!--
? action:提交地址;
? method:提交方式
-->
<form action="http://www.baidu.com" method="post">
<!--
? value="初始值"
? placeholder="提示文本"
? checked="加载时是否选中(true、false)"
? disabled 加载时输入字段禁用
? readonly 加载时输入字段只读
? autofocus 加载时自动获取焦点
-->
<!-- * input 输入框 -->
<input type="text" />
<!-- 输入框 -->
<input type="password" name="name" id="id" />
<!-- 密码框 -->
<input type="button" value="value" />
<!-- 按钮(不触发提交) -->
<input type="checkbox" name="name" id="id" />
<!-- 复选框 -->
<input type="radio" name="name" id="id" />
<!-- 单选框 -->
<label for="name">元素标注</label>
<!-- 元素标注 -->
<input type="file" name="name" id="id" />
<!-- 文件提交 -->
<input type="image" src="src" alt="alt" />
<!-- 图像形式文件提交 -->
<input type="reset" value="value" />
<!-- 表单重置 -->
<input type="submit" value="value" />
<!-- 表单提交 -->
<!-- * input HTML5新增属性 -->
<input type="search" name="name" id="id" />
<!-- 搜索框 -->
<input type="color" name="name" id="id" />
<!-- 颜色选择器 -->
<input type="range" name="name" id="id" />
<!-- 滑动选择框 -->
<input type="date" name="name" id="id" />
<!-- 日期选择框 -->
<input type="time" name="name" id="id" />
<!-- 时间选择框 -->
<input type="datetime-local" name="name" id="id" />
<!-- 日期,时间选择框 -->
<input type="url" name="name" id="id" />
<!-- url输入框:提交验证 -->
<input type="email" name="name" id="id" />
<!-- email输入框:提交验证 -->
<input type="number" name="name" id="id" />
<!-- 数字输入框:提交验证 -->
<input type="tel" name="name" id="id" />
<!-- 手机号码输入框:提交验证 -->
<!-- * button 按钮(触发提交操作) -->
<button></button>
<!-- * textarea 文本域 -->
<textarea name="name" id="id" cols="30" rows="10"></textarea>
<!-- * select 下拉框 -->
<select name="name" id="id"></select>
<!-- 下拉框选项 -->
<option value="value"></option>
</form>
<!-- ** 脚本 -->
<script src="./js/vue.js"></script>
<!-- ** 样式 -->
<style></style>
<!-- ** 音、视频 -->
<!--
? src:url地址
? autoplay:是否自动播放
? loop:重复播放
? muted:是否静音
? controls: 显示控件
-->
<audio src="url" autoplay loop muted controls></audio>
<video src="url" autoplay loop muted controls></video>
<!-- ** 图形 -->
<canvas></canvas>
<!-- ** 格式化标签(不推荐) -->
<i>斜体</i>
<em>强调文本</em>
<b>粗体</b>
<strong>强调文本</strong>
<u>下划线</u>
<ins>插入</ins>
<s>删除线</s>
<del>删除文本</del>
<sup>上标</sup>
<sub>下标</sub>
</body>
</html>
2. HTML标签显示区分
块元素
- 可设置“width”和“height”
- 默认情况下,元素的宽度会占满整行,这就意味着块级元素的宽度会受到父级元素的宽度影响,而且不管元素是否占满整行,它的兄弟元素都会另起一行
<div></div>
<h1-h6></h1-h6>
<p></p>
<ol></ol>
<ul></ul>
<dl></dl>
<table></table>
<form action=""></form>
内联元素(行内元素)
- 不能设置“width”和“height”
- 默认情况下,元素的默认宽度为content的宽度,高度由font-size决定,内联元素在未填满父级元素的时候会水平排列,一般只会用来承载内容
- 行内元素在水平方向上的padding、border、margin的特性和块元素一模一样
- 行内元素在垂直方向上的
padding和border可以设置,但是不参与布局,margin不能设置
除了a元素,行内元素不能包含块元素
行内元素脱离文档流后,会变成块元素
<a href=""></a>
<span></span>
<label for=""></label>
<code></code>
<!-- 格式化标签 -->
<i>斜体</i>
<em>强调文本</em>
<b>粗体</b>
<strong>强调文本</strong>
<u>下划线</u>