HTML的基础标签，用法以及详解

在学习前端webstorm的时候，肯定需要接触很多的标签来实现需要用到的方法，让网页变得更加美观。

下面，我就来介绍一下webstorm所需要用到的基础标签吧。

由于此网页如果直接上代码的话会自动编程上代码过后的直接形态，所以我只能在<- >标签里加-来区分了。

常用的块元素有：<-div>、<-p>、<-h1>…<-h6>、<-ol>、<-ul>、<-dl>、<-table>、
<-address>、<-blockquote> 、<-form>
blockquote是块级元素，默认带有左右40px的外间距，不带【“”】。
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）

常用的内联元素有：<-a>、<-span>、<-br>、<-i>、<-em>、<-strong>、<-label>、<-q>
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

<--标题类标签  h1-h6-->由字体大到小
 <--段落标签   p-->

<em>这是一个斜体文本</em><!--内联元素-em->
    <strong>醒目显示标签</strong><!--内联元素-strong->

<p>这是一个p标签<-p->
        <span style="color:red">这是一个内联元素</span> <-span->
    </p>


<del>这是一个删除标签</del><-del->

    <!--下标字sub和上标字sup-->
    <p>X<sup>2</sup><sub>2</sub></p>

a标签 内联元素，不换行，指向一个连接的地址
    a属性：href的连接的地址  target="_blank" 在新的窗口打开,没有加target="_blank" 则在本页上继续显示出来。
  <-a href = "http://www.baidu.com" target="_blank">度娘一下就知道</a>
    <-a href = "http://www.sina.com">新浪</a>

 	. 表示同一级目录
   	.. 表示上一级目录**
无序列表ul和li   有序列表ol和li   自定义列表dl dt dd**

    <!--最常用的标签-->
    <ul style="list-style-type: decimal">
        <li>诸葛亮</li>
        <li>司马缸</li>
        <li>军师联盟</li>
    </ul>

    <ol>
        <li>东吴</li>
        <li>大秦</li>
        <li>大魏</li>
    </ol>

    <!--自定义标签  有一个层次展现形式-->
    <dl>
        <dt>动物园里有什么？</dt>
        <dd>猴子</dd>
        <dd>老虎</dd>
        <dt>菜园子里面有什么</dt>
        <dd>博彩</dd>
        <dd>萝卜</dd>
    </dl>

**当然了，要看一个注册网页，肯定需要<-form->标签咯,method表示提交的方式，分为get和post提交，下面说明一下他们的区别。**
客户端   给服务端提交数据  表单中组件必须要有name和value属性
    目的：用于服务器更方便的数组的操作
    action提交的地址
    method提交方式：get个post
    get提交：  提交的数据全部都在地址栏   格式：name=value&
                数据不安全
                适用的情况：数据量小
                中文乱码
    post提交：
            提交的数据在请求体
            数据安全
            适用情况：数据量大，有隐藏数据的能力

<!--做一个注册的表单-->
    <-form action="http://taobao.com" method="get">
        <!--input文本输入框 type  name value-->
        用户名<input type="text" name = "name" value = ""/><br/>

        密码<input type="password" name = "" value=""/><br/>

        性别<input type ="radio" name = "sex" value="man"/>男
            <input type = "radio" name="sex" value=""/>女<br/>

        爱好<input type = "checkbox" name ="like" value="" />java
            <input type = "checkbox" name ="like" value="" />html
            <input type = "checkbox" name ="like" value="" />python
            <input type = "checkbox" name ="like" value="" />php<br>
        文件<input type="file" name="file" value=""><br>

       图片 <input type="image" src="img/ruhua.jpg" width="100">

        <input type="submit" value="注册"/><br>

        <input type="reset" value="重置"/><br>

	日期： <input type="date" />
   	时间： <input type="time" />
   	邮箱： <input type="email" />
  	 电话： <input type="number" step="2" />

        <!--onclick 事件  -->
        <input type="button" value="按钮" onclick="alert('有个按钮')"/>
        <!--id对用户没有实际的意义  就要隐藏起来-->
        <input type="hidden" name="id" value="0001"/>

 家庭住址：<-br>
    <-select name="city">
        <-optgroup label="湖南省">
            <-option>长沙市</option>
            <-option>岳阳市</option>
            <-option>临湘市</option>
            <-option>娄底市</option>
        <-/optgroup>

    <-/select>
    <-br />

  <--属性type：
    text:文本
    password:密码
    radio:单选
    checkbox:多选(复选)
    file:文件
    image:图片
    button：按钮
    hidden：隐藏
    submit：提交
    reset：重置

表格的方式有：
<--表格标签 ：  table   tr行   th标题   td单元格cell  capion标题-->
    <--属性： border边框   cellpadding单元格填充   cellspading单元格边距-->

 <--行合并rowspan   列合并colspan-->
    <-hr/><--横线的分隔符-->

<--table border="1" cellpadding="10" cellspacing="0">
        <-caption>列合并演示</caption>
      <-  <tr><-td colspan="2">个人信息<-/td><-/tr>
        <-tr><-td>张无忌<-/td><-td>110<-/td><-/tr> 
    <-/table>



    <table border="1" cellpadding="10" cellspacing="0" width="200">
        <caption>行合并演示</caption>
        <tr><td rowspan="2">个人信息</td><td>张无忌</td></tr>
        <tr><td>110</td></tr>
    </table>

border-bottom：设置下边框的样式


背景的基本设置有：
	    background-color:背景颜色
background-image: url("../img/defult.jpg"); 图片作为背景时候默认水平平铺
            background-repeat: repeat-x 图片水平平铺  最常用；
            background-repeat: repeat-y; 垂直平铺
            background-repeat: no-repeat; 不平铺 常用
            background-attachment: fixed; 固定位置
	    background-size: 200px;
            background-position: right; 定位
	    width: 100%;大小
            height: 100%;长度

格式的基本设置有：
	    text-align: center;居中
	    text-align: justify;水平对齐
            text-indent: 1cm;缩进
 	    text-transform: lowercase;小写
	    text-transform: capitalize;首字母大写
	    text-shadow: 2px 2px red;文字阴影
	    line-height: 1.5rem;行高并据中

字体的基本设置有：
	    font-size: 30px;设置字体大小
            font-family: '宋体';
            font-family: '微软雅黑';
            font-weight: 600;
            font-family: Tahoma,Geneva,sans-serif;更容易阅读

**css的引入方式有：1.链接式  2. 导入式  3.行内式  4. 内嵌式
CSS定义样式在相同的情况下会发生覆盖
     行内式  -> 内嵌式 ->  导入式 -> 链接式   就近原则**

**选择器有：**
 id选择器   一般用于单个标签的定义
        #
类选择器  比较常用
         .
元素选择器，大括号内可以有一条或者多条css语    
         p{}

子元素选择器
       >
兄弟选择器
       +
选择器
       ~
下级选择器  用空格表示

**链接的状态分为：**
	链接的状态
        a{
            display: block;
        }
        未访问的状态
        a:link{
           
        }
        已访问的状态
        a:visited{
        }
        鼠标移动到链接上的状态
        a:hover{
        }
        鼠标点击时的状态
        a:active{
        }
        注意：
        active必须要在hover之后   hover必须要在visited之后

**相对位置分别有**：
 	position: relative;相对位置  相对于自己
  	position: absolute;绝对定位
 	position: fixed;相对定位   相对于浏览器窗口

overflow：溢出

悬浮显示是：display：block  悬浮隐藏是：display：none 
另一个隐藏是：visibility:hidden
display属性设置一个元素如何显示，visibitily属性指定一个元素是否隐藏
当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。

**自适应布局：**
	    display: -webkit-box;自适应布局开始
            -webkit-box-orient: horizontal;代表水平布局
            -webkit-box-orient: vertical;垂直布局
            -webkit-box-flex: 5;单位
            -webkit-box-align: center;左右居中
            -webkit-box-pack: center;上下居中

这就是webstorm的基本标签和用法，还有一些方法没有写上来，大家试试就知道了，谢谢观看，望采纳！！