H5学习笔记——基本知识

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

---

1、基础标签&知识

1. 换行：

2. 空格： 
3. 大于号：>
4. 小于号：<
5. 标题：

6. 段落表示（段落后有空行）：

7. 块：
8. 行内块：
9. 强调：（斜体）
10. 专业名词：（斜体）
11. 关键字或产品名称：（粗体）
12. 强调：（粗体）

---

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">标题2h1>
<a href="#biaoti1">标题1a>
<a href="#biaoti2">标题2a>
<a href="#biaoti3">标题3a>
<a href="#biaoti4">标题4a>

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

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

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

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

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

---

4、列表

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

    <ol>
        <li>学习h5li>
        <li>学习cssli>
        <li>学习jsli>
    ol>

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

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

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

    <dl>
          <dt>htmldt>
          <dd>负责页面结构dd>

          <dt>cssdt>
          <dd>负责页面表现dd>

          <dt>jsdt>
          <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">1td>
            <td>苹果td>
            <td>10td>
            <td>1td>
        tr>
        <tr>
            <td>2td>
            <td>梨td>
            <td>8td>
            <td>10td>
        tr>
        <tr>
            <td>3td>
            <td>香蕉td>
            <td>5td>
            <td>20td>
        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>

---