HTML标签基础

文件夹命名规则

1.英文字母开头，能包含数字，下划线，中划线，美元符号
2.不能以数字开头，不能包含中文符号及特殊符号、空格
3.见名知意
4.驼峰命名法（匈牙利命名法），分为大驼峰（BoxName）、小驼峰（boxName）

一、html 语法：

单标签：<标签 属性="值" />      -->空标签
对标签：<标签 属性="值"></标签> -->常规标签

1、常用标签

• h1-h6

标题标签，单独占据一行，文本加粗变大，依次变小，h1在一个页面中有且仅有一个，不能多次出现，通常用在大标题或logo中，其他的可以多次出现。

• a

超链接标签，只占据自己内容大小的位置，实现页面与页面之间的跳转，默认文本蓝色带有下划线，可使用：text-decoration:none来取消下划线。

属性：href=“跳转到哪里去”，target=“跳转方式”
跳转方式：_self 在当前窗口刷新
     _blank 不断打开新窗口
     _new 在新窗口刷新

• ul->li

无序列表标签，单独占据一行，每一个li前方默认都有一个小黑点修饰，通常用来做导航、列表，type=“修饰符号”

disc ：小黑点（默认值）
circle：空心圆
square：空心方块

可使用list-style:none来清除默认的小黑点

• dl->dt dd

自定义列表,单独占据一行，默认带有缩进
如：

<dl>
	<dt>消费者保障</dt>
	<dd>举报中心</dd>
	<dd>联系电话</dd>
</dl>

dt只需要有一个，dd允许有多个

• ol->li

有序列表，独占一行，前面带有顺序，这个我们后面再补充！

• img

图片标签，只占据自己图片大小的位置，往页面中插入图片
 .jpg 普通格式 .png 背景透明格式 .gif 动态图
相关属性：

src=“图片地址”
alt=“图片描述”
【注】1、 alt图片加载成功时不显示，图片加载失败时显示
   2、alt主要是提供给搜索引擎查看

width=“宽度”
height-“高度”
【注】只写高度或宽度，另一边等比例缩放，不会改变原图大小，只会改变展示大小。

• div

盒子标签，单独占据一行，没有特殊视觉效果，用来搭建页面结构。

• span

文本节点标签，只占据自己内容大小的位置，没有特殊效果，配合css展示视觉效果。

【注】不支持给span设置宽高和margin-top/bottom，可以给其设置padding，但文字位置不会发生改变，只改变了span的大小（如下图），因为是行内元素，如果需要设置，需要将其浮动

• br

• 换行标签

• input

表单元素，type=“类型”

text ：单行文本输入框
password ：密码框
submit ：提交按钮，默认有提交功能

如果需要取消输入框的边框线，可以使用css控制：

border:none;/*取消边框*/
outline:none;/*取消选中后的边框*/

• form

<form action="提交到哪里去" method="提交方式"></form>

表单，独占一行，用于收集用户资料
method=“提交方式”

get：

1、在地址栏明文提交
2、不安全
3、在地址栏提交有长度限制，有可能造成数据丢失
4、通常向数据库获取数据，不会改变数据库数据

post：

1、不在地址栏提交
2、安全
3、没有长度限制，不会造成数据丢失
4、提交的数据较大，速度慢
5、通常向数据库发送数据，会改变数据库数据

• 文本加粗

<b></b>和<strong></strong>都可以使文本加粗，但strong针对盲人语音会重度。

• 文本倾斜

<i></i>和<em></em>都可以使文本倾斜，但em加强语义，方便搜索引擎搜索，优先曝光

• 删除线

<s></s>和<del></del>都可以使文本带删除线，但s标签已经弃用

• 下划线

<u></u>—>全名underline，下划线，使文本带下划线

• 角标

<sup></sup>上角标，<sub></sub>下角标

另外html最小文本大小是12px，默认文本大小是16px