Html超文本标记语言,用来描述网页的一种语言。一个HTML文件有开始和结束标签,代码不区分大小写。
HTML文件包含两部分<head>和<body>。
<head>:用来设置头信息。
<body>:用来设置在页面上显示的内容。
一、Head标签:
<!DOCTYPE html> <!-- HTML5版本-->
<html lang="zh-CN"> <!-- 文档语言 -->
<head>
<title>网页标题</title>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Refresh" content="0;url=http://www.com"><!-- 多少秒刷新-->
<meta http-equiv="Expires" content="">
<meta http-equiv="Pragma" content="no-cache"><!-- 禁用缓存 -->
<link rel="shorcut icon" href="xxx.ico"><!-- 网站小图标 -->
<link rel="stylesheet" href="css/base.css">
</head>
二、Body标签:
1、表单
<form action="表单提交地址" method="get" name="表单名称" id="">
<fieldset>
<legend>表单分类说明</legend>
<!-- 点击标签内的文本时,浏览器会自动将焦点转到对应表单元素上-->
<label for="username">用户名</label>
<!-- 文本框 -->
<input type="text" name="文本框名称" id="username" size="文本框宽度" maxlength="最多字符" value="初始值">
<input type="text" list="address">
<!-- 定义选项列表与input元素配合使用 -->
<datalist id="address">
<option value="江苏扬州">江苏扬州</option>
<option value="江苏泰州">江苏泰州</option>
</datalist>
<!-- 密码框 -->
<input type="password" name="文本框名称">
<!-- 隐藏框 -->
<input type="hidden" name="文本框名称">
<!-- 复选框 -->
<input type="checkbox" name="复选文本框名称" value="值">复选内容1
<input type="checkbox" name="复选框名称必须一致" value="值">复选内容2
<input type="checkbox" name="复选框名称必须一致" value="值">复选内容3
<!-- 单选框 -->
<input type="radio" name="单选文本框名称" value="值" checked="checked">单选内容1
<input type="radio" name="单选文本框名称" value="值">单选内容2
<!--下拉选择-->
<select name="" size="">
<option value="" selected>下拉列表内容1</option>
<option value="">下拉列表内容2</option>
</select>
<!-- 文本域,禁止拖拽文本域:textarea{resize:none;} -->
<textarea name="" id="" cols="列" rows="行" wrap="是否换行"></textarea>
<!-- 提交按钮 -->
<input type="submit" name="按钮名称" value="按钮文字">
<!-- 重置按钮 -->
<input type="reset" name="按钮名称" value="按钮文字">
<!-- 普通按钮 -->
<input type="button" name="按钮名称" value="按钮文字">
<!-- 图片按钮 -->
<input type="image" src="图片路径" alt="">
</fieldset>
</form>
HTML5为input、textarea等标签增加了spellcheck属性,为true时,浏览器会对用户输入的文本内容执行输入检查,为表单新增form属性,用于定义该表单控件所属的表单,该属性值应为属表单的表单ID。
autofocus:自动获取焦点,当浏览器打开时,该组件自动获取焦点。
placeholder:文本域提示信息。
required:值为required,不能为空,为必填项。
autocomplete:是否显示之前输入过的值。
<input type="text" name="username" autofocus="autofocus" required="required" autocomplete="true" placeholder="请输入用户名">
2、图像标签
<img src="图片路径" alt="提示内容" width="图像宽度" height="图像高度" border="边框宽度" title="图片提示符">
3、超链接
<a href="链接地址" target="目标打开方式"></a>
4、列表标签
(1)无序列表
<ul type="指定列表项目符号类型">
<li>无序列表元素1</li>
<li>无序列表元素2</li>
<li>无序列表元素3</li>
</ul>
<!--disc:实心圆,circle:空心圆,square:实心方块-->
(2)有序列表
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
(3)自定义列表
<dl>
<dt>定义标题列表项</dt>
<dd>定义普通列表</dd>
</dl>
5、表格标签
<table border="边框宽度" bgcolor="背景颜色" align="表格对齐方式" cellpadding="" cellspacing="">
<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>
<!--
cellpadding:单元格与内容之间距离默认1像素。
cellspacing:单元格之间距离默认2像素。
rowspan:跨行显示。
colspan:跨列显示。
th:表头,会加粗,居中显示。
thead:表格的头部区域。
tbody:表格的主体区域。
-->
6、音频
<audio src="文件路径" controls="controls"></audio>
<!--
autoplay:值autoplay,是否自动播放。
controls:值controls,是否显示播放控件。
loop:值为loop,自动播放
muted:值为muted,表示静音。
-->
7、视频
<video src="文件路径" controls="controls"></video>
<!--
poster:加载等待的图片。
-->
三、常用标签
<div>:层元素,用来将页面内容分割成多个独立的部分,在默认情况下,<div>元素所包含的内容将在一行显示。
<span>:行元素,一行可以显示多个span。
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>:标题元素。
<p>:段落元素,用来定义一个段落,段落与段落之间有大的空隙。
<br/>:换行。
<blockquote>:缩进。
<pre>:保留格式。
<nobr>:取消换行元素。
<strong>:加粗。
<big>:放大元素。
<small>:缩小元素。
<del>:删除线。
<ins>:下划线。
<em>:斜体显示。
<sub>:下标元素。
<sup>:上标元素。
四、H5新增语义化标签
<header>:头部标签。
<nav>:导航标签。
<article>:内容。
<section>:定义某个文档区域。
<aside>:侧边栏。
<footer>:尾部。