HTML标签
1.h标签
<h1>主题一</h1> <!-- 只能出现一次，利于搜索引擎爬取得到 -->
<h2>主题二</h2>
<h3>主题三</h3>
<h4>主题四</h4>
<h5>主题五</h5>
<h6>主题六</h6>
2.p段落标签
<p>
内容...
</p>
3.加粗
<b>this is big tag</b><br>
strong标签：<strong>this is strong</strong><br>
注：strong标签不仅可以加粗，还可以被检索，类似一个关键字
4.a标签
<a href="#">不会跳转</a>
href属性：跳转的链接，可用互联网的url地址或本地的html文件路径，javascript:viod(0),不跳转
5.img图片标签
<img src="" alt="" />
src 相对路径、绝对路径、http网络图片、../当前目录跳上层
alt 用来描述图片内容，仅供HTML识别该图片内容，另方面供搜索引擎识别图片
width 按照此宽度显示、当失去比例则会拉伸
height 按照此高度显示、当失去比例则会拉伸
title 鼠标在图片上时候，显示文字信息
注：width/height宽高强调根据图片宽高来给定，如果没有宽高则会去计算图片的宽高度，计算的时候会浪费一些时间，虽然不是很明显
图片格式说明：
BMP 占用空间大，色彩丰富(网页原设计的时候会采用这种格式)
JPEG 压缩方式通常是破坏数据性压缩，在压缩过程中图像的质量会遭受到课件的破坏，主要让文件变小，提高加载速度
GIF 对 透明色 和 多帧动画 的支持
PNG 无损压缩的位图 格式，支持Alpha通道的 透明/半透明 特性
6.列表
有序列表：
<ol type="A">
<li>type值为数字：默认按数字列表排序</li>
<li>type="a":按小写字母排序</li>
<li>type="A":按大写字母顺序排列</li>
<li>type="i"按小写罗马字母排序</li>
<li>type="I"按大写罗马字母排序</li>
</ol>
无序列表：
<ul type="square">
<li>disc:默认，实心小圆圈</li>
<li>square：实心方块</li>
<li>circle：空心圆</li>
</ul>
自定义列表：
<dl>
<dt>title</dt>
<dd>date</dd>
<dl>description</dl>
<dd>date</dd>
</dl>
7.特殊符号
| 符号 |
作用 |
|   |
空格 |
| < |
小写 |
| > |
大写 |
| © |
版权 |
| × |
X符号 |
| & |
& |
表格&表单
1.表格table
<table>
<tr border="1">
<td></td>
<td></td>
</tr>
</table>
<form action="" method="">
表单域，当提交时会将此域的数据收集并发送给服务器
</form>
| 属性 |
描述 |
| action |
指定提交到某个url |
| method |
提交方式,get:URL地址栏上作拼接？再加参数；post:隐式提交方式，看不到，可以抓包 |
| input标签：赋予不同的type值可实现不同的控件 |
|
<input type="" /> |
|
| type类型 |
描述 |
| text |
文本输入框，maxlength最大长度、onlyready只读、 disabled禁止 |
| password |
暗码显示 |
| email |
邮箱格式 |
| radio |
单选按钮，checked默认选择 |
| checkbox |
多选框 |
| submit |
提交选项，收集表单内name数据，提交到服务器 |
| reset |
重置表单选项 |
| button |
按钮 |
| hidden |
隐藏域 |
| 多选框select |
|
<select>
<option value="">0</option>
<option value="">1</option>
<option value="">2</option>
</select>
快捷语法：option[value="$@0"]{$@0}*3，按tab键执行
| 属性 |
描述 |
| selected |
默认选中 |
| size |
实现多行下拉 |
| disabled |
禁止选择 |
| 多行文本输入框textarea |
|
<textarea cols="" raws=""></textarea>
| 属性 |
描述 |
| cols |
显示列数 |
| raws |
显示行数 |
div标签
div特点
<div></div>
1.默认宽度，自动将盒子拉伸的最宽
2.默认高度为0，单个不给高度的盒子是没有任何效果的，但如果有子元素的话会把父元素撑起来，父元素始终包括子元素
3.独占一行空间
块级元素（display:block）：独占一行空间，前后元素都会被换行html,body,div,p,form,h,br,ul,ol,di,li,table都为块级元素
内联元素：前后元素不会被换行，没有宽高度和外边距
外边距：元素与元素之间的距离
| css |
desc |
| margin-top |
距离顶部的距离，允许负值 |
| margin-right |
距离右边的距离，允许负值 |
| margin-bottom |
距离底部的距离，允许负值 |
| margin-left |
距离左边的距离，允许负值 |
| margin |
上右下左，垂直 水平, 上 水平 下,允许负值,auto:自适应居中 |
| 注：块元素没有宽度让它自适应的话才有右边距；有宽度就没有右边距（右边自动填满内容，不允许更改） |
|
内联元素没有宽高度，没有垂直方向外边距，只有margin-left,margin-right |
|
| 内边距 |
|
| css |
desc |
| --- |
--- |
| padding |
垂直 水平； 上 右 下 左； 上 水平 下；没有auto属性 |
| 特点： |
|
| 1.撑大自身体积 |
|
| 2.不改变有宽度的内容区域 |
|
| 3.内边距不能居中 |
|
边框
| css |
desc |
| border-width |
边框宽度 |
| border-color |
边框颜色 |
| border-style |
边框风格 |
| border-top |
上边框 |
| border-right |
右边框 |
| border-bottom |
下边框 |
| border-left |
左边框 |
| border |
边框简写，可包含以上所有样式 |
| 边框风格 |
|
| css值 |
desc |
| solid |
实线 |
| dashed |
虚线 |
| double |
双实线 |
| doted |
点状分布 |
外边距重合
同级元素：
当一个块级元素的下外边距和下面一个块级元素的上外边距同时含有边距值，则只显示值大的边距值（只针对块级元素的上下方向）
父子型元素：
在子元素内添加上外边距会，父级元素会跟随一起下来。
1.若是二者属性不一致则不会产生这种情况，父级为border,子级为background;
2.为父级元素加上overflow属性也可以
附：margin:auto属性配合display:flex（加在父级元素中），可以达到上下左右居中的效果。
浙公网安备 33010602011771号