HTML入门

1、meta标签又称元标签

<meta charset="UTF-8">  <!--按照utf-8编码-->
<meta name="keywords" content="我是关键字">  <!--做SEO-->
<meta name="description" content="我是网站的描述信息">  <!--网站介绍-->
<meta http-equiv="Refresh" content="2; URL=www.baidu.com">  <!--刷新之后2秒到url的网站。没有url只会完成2秒刷新的功能。定时刷新功能-->
<meta http-equiv="X-UA-Compatible"  content="IE=EmulateIE7">  <!--兼容性标签  兼容IE7-->

2、head其他标签：

<link rel="icon" href="">  <!--title旁边的小图标-->

 3、img标签：

<img src="123.png" alt="图片加载失败时看见我" title="悬浮时显示的信息">

4、a 标签

<a href="https://www.baidu.com" target="_self">超链接</a>
- target的值
  1. _blank代表新页面打开 
  2. _self是默认值 在当前页面打开

- href的值  
  1. # 调回到顶部
  2. https://www.baidu.com 跳转到目标网址
  3. "# + me(id值)" 跳转到页面中 id为me的地方

5、table标签：

如果没有创建tbody标签，则会默认创建 tbody，并将 tr 全部放进去，所以呀tr不是table的子元素。

<!--  cellpadding 内边距， cellspeacing 外边距 -->
<table border="1" cellpadding="50px" cellspacing="30px">
    <thead>   
        <tr>
            <th>aaaa</th>  # 表头标签
            <th>bbbb</th>
            <th>cccc</th>
        </tr>
    </thead>
    <tbody> 
        <tr>
            # rowspan 按行合并 合并上下两个单元格
            <td rowspan="2">1111</td>
            <td>2222</td>
            <td>3333</td>
        </tr>
        <tr>
            <td>5555</td>
            <td>6666</td>
        </tr>
        <tr>
            <td>7777</td>
            # colspan 按列合并 合并左右两个单元格
            <td colspan="2">8888</td>
        </tr>
    </tbody>
</table>

※：<tbody> 和 <thead> 标签一般情况下不使用，这两种标签是给人看的，并不是给机器看的。

6、列表：分为三类，其中无序列表最为重要。

有序列表：

<ol>
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
</ol>

无序列表：

<ul>
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
</ul>

自定义列表：

<dl>
    <dt>一级目录</dt>  # 标题
    <dd>子目录</dd>
    <dd>子目录</dd>
    <dd>子目录</dd>
</dl>

7、字体

font-size: 30px;  字体的大小
font-family："Arial", "Microsoft YaHei"  指定字体族 按照顺序优先级使用
color: red 前景色
font-style: 字体的风格
font-weight: 字体的粗度

/* 复合属性设置字体 */
font: [font-style, font-weight]，字体大小[/行高(默认会自带一个行高 如果要自己指定一个行高就需要写在后面)]，字体族

自定义字体以及使用：@font-face 将服务器的字体提供给用户使用

@font-face {
    font-family: "myFont";  /* 指定字体名称 自定义的*/
    src: url("../font/mystyle.tff"),  /* 服务器字体路径 */
         url("../font/myBoard.tff");   
}
p{
    font-family: myFont; /* 引用刚才自定义字体的名称 */
}

使用 iconFont , 需要引用字体的css

三种方式使用iconFont：
1. 引用类名
    <div class = "icon-shibai"></div>

2. 实体的形式
    <div>&#xe63a;</div>

3. 伪类的形式
    p::after{
       content: "\e632";  /* 直接引用编码 */
    }

8、form标签及input标签：

<form action="路径" method="post" enctype="multipart/form-data"> 
   <lable for="name">姓名</span>
    <input id="name" type="text" name="name" readonly></br></br>
    密码:<input type="password" name="password" disabled></br></br>
    数学：<input type="checkbox" name="hobby" value="math">
    电影：<input type="checkbox" name="hobby" value="movie">
    跑步：<input type="checkbox" name="hobby" value="running"></br></br>
    男：<input type="radio" name="gender" value="male">
    女：<input type="radio" name="gender" value="female">
    <select name="sel">
        <optgroup label="中国"></optgroup>
        <option value="河北省" selected>河北省</option>
        <option value="河南省">河南省</option>  <!--如果不写value，那么value的值默认是text的内容-->
        <option value="青海省">青海省</option>
        <option value="山东省">山东省</option>
    </select></br></br>
    <input type="file"></br>
    <select name="sel" multiple size="2">
        <option value="河北省">河北省</option>
        <option value="河南省">河南省</option>
        <option value="青海省">青海省</option>
        <option value="山东省">山东省</option>
    </select></br></br></br>
    <textarea rows="10" cols="20"></textarea></br></br>
    <input type="submit" value="提交">
</form>

※：type=‘file’ 表示要上传文件，在input中必须加上name属性，enctype属性表示上传文件时分段传送数据。

<select>表签：下拉菜单，size属性：最大显示个数 (会出现滚动条) ，mutipule：多选 (没有下拉的样式) ，两种属性一般配合使用。

<optgroup lable=" ">标签：对<option>进行分组。    当属性名和属性值都一样写一个就行。

<textarea rows="10" cols="20"> 文本域 rows 行数  cols列数。

当<input>标签的 type 属性值为button时，在点击时并不会触发action属性，只有为submit时才会触发action属性。

<lable> 和 <input>标签 一起使用时，单击lable文字，文本框会获得焦点。<lable>标签的for属性的值等于input的id值。

name属性的作用就是当前输入框的内容和name属性值组成键值对。

9、常用的特殊字符：

&gt; 大于字符。&lt;  小于字符。  &copy、&reg  版权符。一般格式是 "& + 实体的名字"。

10、em、rem、px、百分比

em：是根据当前区域的字体大小变化的，例如10em，就是10 * font-size的大小。
rem：rem  是根据根样式的font-size大小变化的，移动端缩放需求会用到字体展示。
px：像素。不同分辨率的显示器会展示出效果不一样。
百分比：按照百分比占据空间。

11、 <div>和<span>标签

块级标签：总是在新行开始、默认占全屏、可以容纳其他块级标签。

内联标签：只能嵌套内联标签。 

<div>属于块级标签、<span>属于内联标签。 一般块级标签不和内联标签并列， 例如<a>标签。 

对于块级元素，要达到垂直居中的效果，通过设置行高和div的高度一样时就会出现文字垂直居中效果。如果想要通过vertical-align设置元素垂直对齐方式，只对行内元素有效，块级元素无效。

12、文件上传

文件上传的按钮是去不掉的无论你用什么方法，但是我们可以修改其透明度并添加新的按钮来达到遮盖的目的，使样式更加的好看。

<div style="position: relative">
    <a>NB上传</a>
    <input type="file" name="img" style="opacity: 0.2;position: absolute;left:0px">
</div>