菜鸟笔记1--HTML常用标签（块标签/行内标签/行内块标签）

HTML标签分为块级标签、行内标签以及行内块标签

块级标签：默认独占一行，可以设置它的宽高；如果不设置，宽度会默认为它的父级元素的宽度。

行内标签：默认由宽高由其内容撑开，直接设置宽高无效；一行可以放多个行内标签；

　　　　   通常块级标签内可以放置行内标签，但行内标签里不能放块级标签

　　　　（<a>标签除外，a标签虽然是行内标签，但是它可以放块级标签，但是a标签内不能放a标签）

行内块元素：行内块有块级标签和行内标签的特性，它可以设置宽高，也可以一行显示多个。

　　　　　   不过行内块会在标签前面留一个小缝隙，去除方法：

　　　　　　　　　　　　　　　　　　　　　　　　1.可以将上一个元素的闭合标签与行内块元素的开始标签写在同一行去除

　　　　　　　　　　　　　　　　　　　　　　　　2.将其父元素的字体大小改为0（font-size: 0），子元素单独设置字体大小

　　　　　　　　　　　　　　　　　　　　　　　　3.将本元素变成浮动（float:left 或者 float:right）

　　　　　　　　　　　　　　　　　　　　　　　　4.将其父元素变成弹性盒子（在css里面给它的父盒子加display:flex）

常用的标签：

　　块级标签：

　　　　<div>...</div> 　　无语义，就当做一个大盒子好了，是最典型的块级元素，网页中充满了各种div

　　　　<h1>...</h1>　　标题标签，一共有六级标签，从h1----h6，有默认的文字大小以及加粗，h1最大，h6最小；

　　　　　　　　　　　　 通常一个网页只有一个h1，一般是它的logo位置，用于突出其重要性

　　　　<ul>...</ul>　　无序列表，里面只能放li标签（当然，你放别的标签网页也会给你显示，但是不建议这么做，不符合规范）

　　　　<ol>...</ol>　　有序列表，在去除默认样式后，和ul一模一样，现在基本被ul取代了（可怜的娃）

　　　　<li>...</li>　　   ul和ol里面只能放li标签；<li>标签里面可以放任意元素

　　　　<dl>...</dl>　　自定义列表，里面只能放置<dt>和<dd>标签；<dt>和<dd>没有数量限制，但一般情况下就只放置一个<dt>,再放多个<dd>

　　　　<dt>...</dt>　　放在<dl>内

　　　　<dd>...</dd>　　放在<dl>内

　　　　<form>...</form>　　表单域，用来收集信息的页面，一般是注册页面之类的

　　　　<tr/>　　水平分割线，是单标签

 

　　行内标签：

　　　　<span>...</span>　　与<div>相对应，是一个典型的行内元素，无语义，就当做是一个小盒子

　　　　<strong>...<strong>　　加粗，写在标签里面的文字会加粗（同语义的还有<b>标签）

　　　　<em>...</em>　　倾斜，写在标签的文字会倾斜，其实没什么用，往往会用来加些小图标用，算是废物利用（同语义的还有<i>）

　　　　<del>...</del>　　删除线，（css中可以用  text-decoration: line-through;   来实现）

　　　    <ins>...</ins>　　下划线，（css中：  text-decoration: underline;   )

　　　 　<a>...</a>　　　　a标签是超链接标签，里面必填的就是href属性，也是要跳转的网址，

    　　　　　　　　　　　  如 <a href="https://www.baidu.com"></a>就会跳转到百度搜索页面，另一个常用属性就是target属性，

   　　　　　　　　　　　   如果设定 target="-black",那么点击链接会新创建一个窗口再跳转

   　　　　　　　　　　　　 <a href="https://www.baidu.com" target="-black">百度一下</a>

    

 

　　行内块元素：

    　　img标签是图片标签，src属性是必填的属性，写明图片的路径，以下面的代码为例，

   　　 alt属性是替换文本，指当文本不能正常显示的时候，

    　　网页上会显示一个裂开的图标，旁边显示“替换文本”这几个字，把鼠标放在图片上时，会显示“提示文本”这几个字

    　　<img src="./pic.jpg" alt="替换文本" title="提示文本">

 

　　　　<input>标签是输入表单元素，是个单标签，里面的type属性是必填属性

   　　　 <input type="属性值">

　　　　　　type属性值　　　　　　　　描述

　　　　　　button　　　　　　　　　　 普通的按钮

　　　　　　checkbox　　　　　　　　　复选框

　　　　　　radio　　　　　　　　　　　单选框（需要单选框用同一个name值，才能生效，不然单选框也能多选）

　　　　　　password　　　　　　　　　密码框

　　　　　　text　　　　　　　　　　  　文本框

　　　　　　reset　　　　　　　　　　　重置按钮

　　　　　　submit　　　　　       　　　 提交按钮

　　

　　　　input除了type属性外，还有其他属性

　　　　　　属性　　　　　　属性值　　　　描述

　　　　　　name　　　     　自定义　　　　自己取一个input的名称（注意：同一组的单选框或复选框要设置相同的name值）

　　　　　　value　　　　　 自定义　　　　 自己去一个input值

　　　　　　checked　　　　checked　　　 加上这个属性后，该选项会默认选中，主要针对单选框和复选框

  　　　　　 maxlength　　　 正整数　　　　规定输入文字的最大字数（用的少）

 

　　　　<button>...</button>　　　　普通按钮，和<input type="button">基本一样，不过是从单标签变成双标签

 

　　当然，无论行内元素还是块元素亦或者行内块元素，都不是完全固定的，他们之间是可以相互转换的，只需要在CSS里面加上：　　　　

　　　　　　 display: inline; 　　　　 转换为行内元素

           　　　 display: inline-block;　  转换为行内块元素

            　　　display: block;　　　　转换为块元素