html标签

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.特殊符号

符号	作用
&nbsp	空格
&lt	小写
&gt	大写
&copy	版权
&times	X符号
&amp	&

表格&表单

1.表格table

<table>
    <tr border="1">
        <td></td>
        <td></td>
    </tr>
</table>

属性	描述
tr	行元素
td	列元素

2.表单form

<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（加在父级元素中），可以达到上下左右居中的效果。