H5学习笔记——基本知识

今天开始学习H5的知识，当然也是基础的，并不是非常系统。这两天同事一直吵吵这让给做抢号软件。。弄得我一脸懵逼，不会啊，努力学习新知识吧。

---

1、基础标签&知识

1. 换行：<br />
2. 空格： 
3. 大于号：>
4. 小于号：<
5. 标题：<h1 - h5></h1 - h5>
6. 段落表示（段落后有空行）：<p></p>
7. 块：<div></div>
8. 行内块：<span></span>
9. 强调：<em></em>（斜体）
10. 专业名词：<i></i>（斜体）
11. 关键字或产品名称：<b></b>（粗体）
12. 强调：<strong></strong>（粗体）

---

2、图片标签

<img src="相对路径/绝对路径" alt="图片错误时显示的文字提示">

alt是在图片无法显示时候，给出的文字提示，

严格要求必须写alt属性，否则会引发搜索引擎和盲人语音识别方面的问题。

---

3、链接标签

<a href="https://www.baidu.com" title="鼠标放在图片上的提示" target="_self/_blank">百度</a>

a标签是链接标签，href表示链接到的地址，title表示鼠标停留在此控件上时显示的文字提示
target属性为_self时，当前页面跳转到链接地址，为_blank时候，新开页面并跳转到链接页面

当然可以结合图片使用，如下：

<a href="https://www.baidu.com" title="鼠标放在图片上的提示">
    <img src="相对路径/绝对路径" alt="图片错误时显示的文字提示">
</a>

也可以利用属性id进行页内跳转，如下：

<h1 id="biaoti2">标题2</h1>
<a href="#biaoti1">标题1</a>
<a href="#biaoti2">标题2</a>
<a href="#biaoti3">标题3</a>
<a href="#biaoti4">标题4</a>

当然可以跳转到文章开头，如下：

<a href="#">回到顶部</a>
或者
<a href="">回到顶部</a>

如果什么都不想做，也可以实现：

<a href="javascript:;">什么都不做</a>

：与；之间是JavaScript语句，语句为空，没有任何功能。

---

4、列表

快捷键安装与查询
有序列表：(ol>li*3)

    <ol>
        <li>学习h5</li>
        <li>学习css</li>
        <li>学习js</li>
    </ol>

无序列表：(ul>(li>a))*4

    <ul>
        <li><a href="#">新闻标题1</a></li>
        <li><a href="#">新闻标题1</a></li>
        <li><a href="#">新闻标题1</a></li>
        <li><a href="#">新闻标题1</a></li>
    </ul>

自定义列表：dl>(dt+dd)*3

    <dl>
          <dt>html</dt>
          <dd>负责页面结构</dd>

          <dt>css</dt>
          <dd>负责页面表现</dd>

          <dt>js</dt>
          <dd>负责页面行为</dd>
     </dl>  

---

5、表格

<table border="1" width="500" height="300">
        <tr>
            <th valign="bottom">序号</th>
            <th>名称</th>
            <th>价格</th>
            <th>数量</th>
        </tr>
        <tr>
            <td align="center">1</td>
            <td>苹果</td>
            <td>10</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>梨</td>
            <td>8</td>
            <td>10</td>
        </tr>
        <tr>
            <td>3</td>
            <td>香蕉</td>
            <td>5</td>
            <td>20</td>
        </tr>
    </table>

常用属性：

1. border 定义表格边框
2. cellpadding 单元格内边距
3. cellspacing 单元格间距离
4. align 内容水平对齐方式 left center right
5. valign 内容垂直对其方式 top middle bottom
6. colspan 设置单元格水平合并
7. rowspan 设置单元格垂直合并

例子：

<table border="1" width="600" height="300">
        <tr>
            <th colspan="5" align="left">基本情况</th>
        </tr>
        <tr>
            <td width="18%">姓名</td>
            <td width="18%"></td>
            <td width="18%">性别</td>
            <td width="18%"></td>
            <td rowspan="5" width="28%"><img width="100" src="p" alt="图片"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>

        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>

        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>

        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>

        </tr>
    </table>

---