首页 > 代码库 > H5-新手入门1

H5-新手入门1

2024-09-06 04:56:48   263人阅读

引言：对于一个计算机相关专业的，又一直对编程不太感冒的女生来说，h5是一门比较好上手的语言，适合女生，也适合还想在编程路上走一走的人。

   先贴几张我目前用h5做的东西，后面会给代码（学习过程会一直记录，本文为第一篇）

技术分享

技术分享

技术分享

接下来开始介绍H5入门该掌握的基础内容

一.html的基本结构

　　html主要包括head和body两个部分，网页中的几乎所有内容都在body中，然后这些内容是怎样布局的都是由head中的内容决定的。
技术分享
   

二.head中的标签及其属性

  　　　head常用标签主要有三个：title, meta, link。

           1.title：就是网页标题。

           2.meta：可提供有关页面的元信息，比如针对搜索引擎的描述和关键词。

            meta 标签常用属性：

           （1）charset：设置字符集编码格式。
           （2）http-equiv:将我们的信息写给浏览器看。如：content-type（文档类型），refresh（网页定时刷新），set-cookie(设置浏览器cookie缓存）。
           （3）name：将我们的信息写给搜索引擎看。
             其中name的应用如下：
             <meta name="auther" content="http://www.jredu100.com"/>
             <meta name="keywords" content=“HTML5,网页制作,杰瑞教育/>
             <meta name="description" content="这是我的第一个网页"/>
            3.link：定义文档资源与外部的关系，最常见的用途是链接样式表。
               link标签中的三个属性：
               （1）rel声明连接文件的类型。
               （2）type可省略。
               （3）href表示图片的路径地址。
              应用如下：
              <link rel="icon" type="image/x-icon href="http://www.mamicode.com/img/icon.png"/>
三.body中的标签及属性（此中内容比较多，是重点要多花时间）
      首先body中的标签分为行级标签和块级标签：
       块级标签：显示为块级，前后隔一行（自动换行）。
       行级标签：从左往右逐一显示。
1.常见块级标签：
技术分享
代码中使用如下：
  
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常见块级标签</title>
    </head>
    <body>
        <!--h1最大，h6最小。自动加粗-->
        <h1>h1标题标签</h1>
        <h2>h2标题标签</h2>
        <h3>h3标题标签</h3>
        <h4>h4标题标签</h4>
        <h5>h5标题标签</h5>
        <h6>h6标题标签</h6>
        <hr />
        <p>这是段落标签:<p/>
        <p>这是<br/>段落标签,水平线标签和换行标签这种中间不含内容的标签,都是自闭和<p/>
        <p>标题标签和段落标签都有俩</p>
        <!--引用标签-->
        <!--cite表示引用来源，这里面一般写网址-->
        <blockquote cite="http://www.jredu100.com">blockquote引用标签</blockquote>
        <!--预格式标签
            浏览器默认显示样式：
            1.显示等宽字体（里面的回车，空格都好使）
            2.代码中换行空格等元素在浏览器中都好使（可直接显示）
        -->
        <pre>1.显示    等宽字体
        2.代码中换行空格等元素&nbsp;在浏览器中都好使</pre>
        <!--&nbsp;不建议用，因为每个浏览器对空格大小表现不一样-->
        
        <!--有序列表-->
        <ol>
            <!--列表项-->
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
        </ol>
        
        <!--无序列表-->
        <ul>
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
        </ul>
        <!--定义列表-->
        <!--标题顶格写，描述项对标题进行缩进显示-->
        <dl>
            <dt>标题</dt>
            <dd>
                描述1
            </dd>
            <dd>
                描述2
            </dd>
        </dl>
          <!--组合标签：<figure></figure>用于显示图片及图片标题
              两个子标签：<img/>
                         <figcaption>这是图片标题</figcaption>
                         显示效果：图片下面一个标题，且俩都缩进。
          -->
        <figure>
            <img src="../img/icon.png"/>
            <figcaption>这是图片标题</figcaption>
        </figure>
        <!--分区标签-->
        <div style="">这是一个Div</div>
    </body>
</html>

运行效果如下：

技术分享

技术分享

2常用行级标签
span（文本）Day2-复习.note
img（图片）
em（强调）和i（倾斜）
strong（强调）和b（加粗）
q（短引用）blockquote(引用）
a（超链接）
small（缩小字体）
备注：
1 em和i的区别就是，前者有强调。
strong和b同上。strong的强调程度比em高
2 small可以多层嵌套，直到字号达到极限。（不常用，一般用font-site）
3.img中：
Src里面地址的写法：
①  直接写绝对路径，但是不建议。因为上传服务器后，绝对路径会变化；
② 相对路径： 指这幅图片相对于你所写的html文件的位置；文件夹的下一层用/表示，“文件夹名字/图片名字”，文件夹的上一层用“../文件夹名字/图片名字”；与图片同一级，直接写文件名。
③ 网络链接：直接将网上图片的地址放在src中。（网上图片删除的话，链接也会失效）
img中的属性：
src,alt,title,height,width,align(=“top”,bottom,center):图片周围文字相对于图片的位置。
 应用如下：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <a name="top"></a>
        <!--span(文本)无实际意义，用于包裹某部分内容，修改特别样式-->
        <span style="color:red;font-size: 36px;">Span</span>
        <br /><!--em（强调）-->
        <em>这是em中的标签</em>
        <br /><!--i（倾斜）-->
        <i>这是i中的标签</i>
        <br /><!--strong（强调）-->    
        <strong>这是strong中的标签</strong>
        <br /><!--b(加粗)-->
        <b>这是b中的标签</b>
        <br /><!--q（短引用）-->    
        <q cite="http://www.jredu100.com">这是短引用中的标签</q>
        <br /><!--small（缩小字体）-->
        <small>这是small中的标签</small>
        <br />
        <big>这是big中的标签</big>
        <br />
        <!--img(图片)-->    
        <!--<img src="file:///E:/icon.png"/>绝对路径，不建议-->
        <img src="../img/icon.png"/><!--上一级文件夹内部-->    
        <img src="icon.png" /><!--同级-->
        <img src="img/icon.png"/><!--同级文件夹内部-->
        <a name="you"></a>
        <img src="img/icon.png" height="20px" width="15px"/>
        <img src="img/icon.png" title="这是图片" alt="图片不显示"/>    
        <br />
        <!--a（超链接）-->    
        <!--本地文件也可以用-->
        <!--href-->
        <!--target（用来表示打开页面的位置）:_self自身（默认）,_blank新页面打开-->
        <!--title=“”鼠标指上去看到的文字；-->
        <a href="http://www.jredu100.com" target="_blank" title="这是一个超链接">这是一个超链接</a>
        <a href="#top" target="_self">跳转到指定位置</a>
        <a href="mailto://jianghao@jerei.com" target="_self">给指定邮箱发送邮件</a>    
    </body>
</html>

运行效果：

 技术分享

 下面重点介绍一下a标签：

1.href
2.target
3.title
4.rel:被连接文档与当前文档的关系(了解)
rel的属性值有:
(1)*icon
(2)prev
(3)next
(4)*stylesheet：被连接文档是当前文档的样式表。
(5)prefetch ：利用空余时间预加载
5.锚链接：
（1）本页面锚链接：a.设置锚点<a name="top"></a>
b.使用 <a href="http://www.mamicode.com/#top" target="_self">跳转到指定位置</a>
（2）页面间锚链接：
a：在即将跳转的页面，设置锚点<a name="top"></a>
b:使用页面地址.html#name:如下：
<a href="http://www.mamicode.com/常见的行级标签.html#top">跳转到常见行级标签页面</a>
6.功能性链接：
用于给指定邮箱发送邮件:mailto://jianghao@jerei.com
<a href="mailto://jianghao@jerei.com" target="_self">给指定邮箱发送邮件</a>
 3.表格
Table常用属性展示：
<table border="5" width="500" cellspacing="10" style="border-collapse:collapse;" cellpadding="10"
align="center" bgcolor="red" background="../img/computer.jpg" bordercolor="green">
<p>哈哈哈哈哈哈</p>
<!--border给表格添加边框，属性值变大时，只有外围增加，内部始终为一个像素-->
<!--cellspacing="10",单元格之间的缝隙，当其值为0时，间隙为0，是两条线的宽度叠加>
<!--style="border-collapse:collapse ;边框合并，这是样式，不是属性-->
<!--cellpadding单元格里的内容与边框线的距离（不常用）-->
<!--align="center",left，right:表格浮动，打破后面的元素的位置。（很常用，在Div）-->
<!--bgcolor="red"背景色，等同于style="background-color"-->
<!--background：背景图片，等同于style="background-image"-->
<!--bordercolor:边框颜色-->
练习：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <table  width="500">
        <tr>
            <td align="center">
                <h2 ><u>特别休假请假单</u></h2>                
            </td>
        </tr>
        </table>
        <h2 style="text-decoration: underline;text-align:center;width:500px;" >特别休假请假单</h2>    
        <br />
        <p>申请日期：&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;月&nbsp;&nbsp;日</p>
        <!-- <table border="1" cellspacing="0" width="500" height="300">-->
             <table border="1" style="border-collapse: collapse;" width="500" height="300">
           <col style="background-color: aquamarine;" />
           <colgroup style="background-color: gainsboro;">
               <col />
               <col />
               <col />
               <col />
               <col />
           </colgroup>
           <col style="background-color: yellowgreen;"/>
          <thead>
          <tr>
                 <td >所属单位</td>
                  <td >部组</td>
                  <td>职称</td>
                   <td>111</td>
                    <td >姓名</td>
                  <td >111</td>
                  <td>厂长</td>
            </tr>
              </thead>
            <tr>
         <td  rowspan="2">期间</td>
          <td colspan="3">年月日</td>
           <td colspan="2" rowspan="2">天数</td>
            <td>111</td>     
            </tr>            
            <tr>
                 <td colspan="3">年月日</td>
                  <td>主管</td>
            </tr>            
            <tr>
                 <td colspan="2">职务代理人</td>
                  <td colspan="4">盖章</td>
                   <td>111</td>
            </tr>            
            <tr>
              <td colspan="1">到期日期</td>
               <td colspan="3">年月日</td>
                <td colspan="2">审核意见</td>
                 <td>组长</td>
            </tr>            
            <tr>
                  <td colspan="2">全年特别休假</td>
                   <td colspan="2">天</td>
                    <td >111</td>
                     <td >111</td>
                      <td >111</td>
            </tr>            
            <tr>
                  <td colspan="2">已请假数</td>
                   <td colspan="2">天</td>
                    <td >人事主任</td>
                     <td >人事经办11</td>
                     <td>班长</td>
            </tr>            
            <tr>
                   <td colspan="2">本次申请日数</td>
                   <td colspan="2">天</td>
                    <td rowspan="2">111</td>
                     <td  rowspan="2">111</td>
                      <td rowspan="2">111</td>
            </tr>            
            <tr>
                  <td colspan="2">尚剩假期日数</td>
                   <td colspan="2">天</td>                     
            </tr>    
        </table>
        
        
    </body>
</html>

运行效果如下

技术分享

 

 后续内容及补充请见H5-新手入门2
 
 

 

 

 

 

 

    

 

H5-新手入门1


联系
我们