基本概念
内联元素(inline)
特点:动态分配
分类:链接元素;文本元素;图片元素;范围元素
注意:内联元素不可嵌套块级元素
块级元素(block)
特点:独占一行
分类:标题元素;段落元素;列表元素;表格元素;分块元素
基本格式
<!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>
</body>
</html>
基本标签
标题标签
<h1>一级标题文字</h1><!--最大标题-->
<h2>二级标题文字</h2>
<h3>三级标题文字</h3>
<h4>四级标题文字</h4>
<h5>五级标题文字</h5>
<h6>六级标题文字</h6><!--最小标题-->
段落标签
<p>段落文字</p>
<!--空格占位符-->  <!--中文文字占位符-->
<br><!--换行标签符-->
图片标签
<img src="图片路径" alt="图片加载失败提示信息" title="鼠标滑入提示信息">
链接标签
<!--target:(1)_self:当前窗口打开链接页面;(2)_blankL:新窗口打开链接页面-->
<a href="链接地址" target="链接页面打开方式">链接文字</a>
锚点标签
<a href="#跳转目标ID名">链接文字</a>
<p id="ID名称">段落文字<br></p>
文本标签
加粗标签
<b>加粗文字</b>
<!--单纯加粗文字-->
<strong>加粗强调文字</strong>
<!--加粗文字并表示强调-->
倾斜标签
<i>倾斜文字</i>
<!--单纯倾斜文字-->
<em>倾斜强调文字</em>
<!--倾斜文字并表示强调-->
删除线标签
<s>删除线文字</s>
<!--单纯文字上加入删除线(html中已淘汰)-->
<del>删除线文字</del>
<!--单纯文字上加入删除线-->
下划线标签
<u>下划线文字</u>
角标标签
<sup>上角标文字</sup>
<sub>下角标文字</sub>
列表标签
有序列表标签
<!--type:(1)A:大写英文字母格式
(2)a:小写英文字母格式
(3)I:大写罗马字母格式
(4)i:小些罗马字母格式
(5)1:阿拉伯数字的格式-->
<ol type="列表格式" start="起始数字">
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
<li>列表四</li>
<li>列表五</li>
</ol>
无序列表标签
<!--type:(1)disc :实心圆点
(2)circle:空心圆点
(3)none :隐藏格式
(4)square:实心方块-->
<ul type="列表格式">
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
<li>列表四</li>
</ul>
自定义列表标签
<dl>
<dt>列表标题文字</dt>
<dd>列表一</dd>
<dd>列表二</dd>
<dd>列表三</dd>
</dl>
表格标签
<!--align (table):(1)left:表格位置在页面左边
(2)right:表格位置在页面右侧
(3)center:表格位置在页面中间-->
<!--align (tr/td):(1)left:靠左对齐
(2)right:靠右对齐
(3)center:居中对齐-->
<!--valign(tr/td):(1)top:顶部对齐
(2)bottom:底部对球
(3)middle:居中对齐-->
<table border="表格边框宽度" cellspacing="单元格之间间距"
cellpadding="文字与单元格之间间距" height="表格高度"
widht="表格宽度" align="表格位置" bgcolor="表格背景颜色"
bordercolor="边框颜色">
<caption>表格标题</caption>
<thead>
<tr align="表格行文字水平对齐方式" valign="表格行文字垂直对齐方式"
height="行高"><!--表格行-->
<th></th><!--表头单元格-->
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td height="单元格高度" width="单元格宽度"
align="单元格文字水平对齐方式"
valign="单元格文字垂直对齐方式"></td><!--表格单元格-->
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td rowspan="单元格行合并数目(纵向变大)"
colspan="单元格列合并数目(横向变大)"></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
分块标签
<div>分块内容</div><!--典型分块元素-用作容器-->
范围标签
<span>包含内容</span><!--典型内联元素-用作容器-->
表单标签
表单框架标签
<!--method:(1)get:表单数据直接加在服务器地址后面明文传输
(2)post:表单数据不会加在服务器地址后面暗文传输-->
<form action-="数据提交地址" method="数据提交方式">表单内容</form>
输入信息标签
<!--type:(1)text:文本信息
(2)password:密码信息
(3)radio:单选框
(4)checkbox:多选框
(5)file:选择文件
(6)submit:提交按钮
(7)reset:重置按钮
(8)button:普通按钮
(9)image:图像按钮-->
<!--单选框必须成组使用,使用name属性分组-->
<!--使用checked属性设置吗默认选项框为选中状态-->
<!--readonly:设置输入框默认内容只读 disabled:设置表单控件禁用-->
<input type="单行文本输入框输入类型" name="名称" value="输入框默认内容"
readonly disabled/>
文本区域标签
<textarea cols="多行文本输入框显示列数" rows="多行文本输入框显示行数"></textarea>
下拉选择框标签
<!--multiple:设置可以多选-->
<select multiple size="设置显示行数">
<option>选择内容一</option>
<option selected>选择内容二</option><!--设置默认选择-->
<option>选择内容三</option>
</select>
绑定标签
<form action="">
<label for="关联输入框ID">解释信息</label>
<input type="text" id="输入框标识符">
</form>
分组标签
<fieldset>
<legend>表单分组标题</legend>
</fieldset>
按钮标签
<button>按钮内容</button>
分割标签
<!--noshade:消除水平线阴影-->
<hr width="设置所画水平线宽度" size="设置所画水平线高度"
noshade color="水平线颜色" align="水平线对齐方式">
格式标签
<pre>文本内容(原格式显示)</pre>
映射标签
<!--shape:(1)default:所有区域;(2)rect:矩形;(3)circle:圆形;(4)poly:多边形-->
<img src="图片地址" usemap="#映射mpa的name">
<map name="名称">
<area shape="定义区域形状" coords="定于区域坐标"
href="定义热点区域链接的目标地址">
</map>
嵌入标签
<!---scrolling:(1)auto:自动显示滚动条;(2)yes:显示滚动条;(3)no:不显示滚动条-->
<iframe src="嵌入网页地址" frameborder="嵌入网页边框" width="嵌入网页框度"
height="嵌入网页高度" scrolling="设置滚动条"></iframe>
绘画标签
SVG 矩形绘制
<svg width="svg画布宽度" height="svg画布高度">
<rect width="矩形宽度" height="矩形高度" x="矩形左边框位置" y="矩形上边框位置"
fill="矩形的填充颜色" stroke-width="矩形边框宽度" stroke="矩形边框颜色
fill-opacity="矩形不透明度(0-1:越小越透明)"
stoke-opacity="矩形边框不透明度(0-1:越小越透明)"
opacity="整个元素不透明度(0-1:越小越透明)"
rx="圆角水平半径长度" ry="圆角垂直半径长度"/>
</svg>
SVG 圆形绘制
<!--矩形绘制中普遍属性同样适用-->
<svg width="svg画布宽度" height="svg画布高度">
<circle cx="圆心x坐标" cy="圆心y坐标" r="圆的半径"/>
</svg>
SVG 椭圆绘制
<!--矩形绘制中普遍属性同样适用-->
<svg width="svg画布宽度" height="svg画布高度">
<ellipse cx="椭圆心x坐标" cy="椭圆心y坐标" rx="椭圆水平半径" ry="椭圆垂直半径"/>
</svg>
SVG 线条绘制
<!--矩形绘制中普遍属性同样适用-->
<svg width="svg画布宽度" height="svg画布高度">
<line x1="起点x坐标" y1="起点y坐标" x2="终端x坐标" y2="终端y坐标"/>
</svg>
SVG 多边形绘制
<!--矩形绘制中普遍属性同样适用-->
<!--points格式:x1,y1 x2,y2 x3,y3-->
<svg width="svg画布宽度" height="svg画布高度">
<polygon points="多边形所有点坐标"/>
</svg>
SVG 多线条绘制
<!--矩形绘制中普遍属性同样适用-->
<!--points格式:x1,y1 x2,y2 x3,y3-->
<svg width="svg画布宽度" height="svg画布高度">
<polyline points="多线条所有点坐标"/>
</svg>
SVG 文本绘制
<!--矩形绘制中普遍属性同样适用-->
<!--rotate格式:num x,y-->
<svg width="svg画布宽度" height="svg画布高度">
<text x="起始位置水平坐标" y="起始位置垂直坐标"
transform="rotate(旋转角度 旋转中心点坐标)"></text>
</svg>
<!--矩形绘制中普遍属性同样适用-->
<!--rotate格式:num x,y-->
<svg width="svg画布宽度" height="svg画布高度">
<text x="起始位置水平坐标" y="起始位置垂直坐标"
transform="rotate(旋转角度 旋转中心点坐标)">
<tspan x="起始位置水平坐标" y="起始位置垂直坐标"
transform="rotate(旋转角度 旋转中心点坐标)">value</tspan>
<tspan x="起始位置水平坐标" y="起始位置垂直坐标"
transform="rotate(旋转角度 旋转中心点坐标)">value</tspan>
</text>
</svg>
<!--矩形绘制中普遍属性同样适用-->
<!--rotate格式:num x,y-->
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="svg画布宽度" height="svg画布高度">
<a xlink:href="链接地址">
<text x="起始位置水平坐标" y="起始位置垂直坐标"
transform="rotate(旋转角度 旋转中心点坐标)"></text>
</a>
</svg>
SVG 路径绘制
<!--矩形绘制中普遍属性同样适用-->
<!--M:绝对定位 m:相当定位 L:绝对定位 l:相当定位-->
<!--stroke-linecap:(1)butt:无线帽;(2)round:圆形线帽;(3)square:方形线帽-->
<!--stroke-dasharray格式:length1 length2 length3 length4-->
<svg width="svg画布宽度" height="svg画布高度">
<path d="M 起始位置水平坐标 起始位置垂直坐标 L 终点位置水平坐标 终点位置垂直坐标 "
stoke="边框颜色" stoke-width="边框宽度" stroke-linecap="线帽样式"
stroke-dasharray="虚线空位距离(实线段长度 虚线段长度)"/>
</svg>