当前位置:网站首页>HTM5学习:第一阶段02

HTM5学习:第一阶段02

2022-08-11 10:56:00 諾卡先生

一、列表

列表示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 无序列表 -->
    <!-- ul>li*6{hello}   再按tab补全 -->
    <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>  
    </ul>


    <!-- 有序列表 -->
    <ol type="a" start="3">
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ol>


    <!-- 自定义列表 -->
    <!-- dl>dt+dd -->
    <dl>
        <dt>孙walker</dt>
        <dd>永远18岁~~~</dd>
    </dl>




</body>
</html>

<!-- 
    1.无序列表
      <ul>  
          <li></li>
          <li></li>
      </ul>
      默认:有实心的小圆点    
      使用场景:新闻列表、主导航


    2.有序列表
       <ol>
           <li></li>
           <li></li>
       </ol>   
       默认:数字依次增大
       定义列表符号的属性:
           type=""
              取值:1  a A i I 
        start="3" 取值:只能是数字

    3.自定义列表
       <dl>
           <dt>名词</dt>
           <dd>对名词的解释</dd>
       </dl>
       
 -->

二、超链接(a)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="http://www.baidu.com" target="_self" title="我要去百度了吗">去百度吧~~~</a>
    <!-- <a href="#">我是空链接吗</a> -->

</body>
</html>

<!-- 
    <a></a>:
       属性:
           1.href="url"   url:跳转地址
             href="#"     空链接

           2.target=""    控制是否在新页面打开
                取值:_blank   新页面打开
                      _self    在当前页面,默认值

           3.title=""    提示作用

        特点:默认有蓝色、有下划线

 -->

三、图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="../images/a.jpg" alt="这是一个帅帅的凹凸曼" title="这是丑丑的" width="200px" height="700px" border="10px">
</body>
</html>


<!-- 
    <img>:
         html属性:
           src="图片的路径"     必须存在 
           alt=""              必须存在
              作用:
                  文本替换图片(当图片显示不出来的时候,显示alt里面的文字)
                  搜索引擎检测不到图片上的文字,会查找alt里面的文字,利于seo 
                  
          title=""  提示作用
          width=""  宽
          height=""  高度
          border=""   边框

         
 -->

四、相对路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 同级找同级 -->
    <img src="a.jpg">
    <img src="./a.jpg">


    <!--子级找父级 -->
    <img src="../b.jpg">

    <!-- 父级找子级 -->
    <img src="./jiaoshi/c.jpg">


    <!-- 如何找imgages里面的 -->
    <img src="../images/a.jpg">
</body>
</html>

<!-- 
    1.同级找同级     直接写文件名   或者  ./写文件名
    2.子级找父级      ../ 返回上一级
    3.父级找子级     ./文件夹名字/图片名字
 -->

五、表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table width="300px" height="300px" border="1px" bordercolor="yellow" cellspacing="0" >
        <tr valign="top">
            <td align="center">啊哈哈哈</td>
            <td>啊哈哈哈</td>
            <td>啊哈哈哈</td>
        </tr>
        <tr>
            <td>啊哈哈哈</td>
            <td>啊哈哈哈</td>
            <td>啊哈哈哈</td>
        </tr>
        <tr>
            <td>啊哈哈哈</td>
            <td>啊哈哈哈</td>
            <td>啊哈哈哈</td>
        </tr>
    </table>
</body>
</html>
<!-- 
    表格的作用:显示数据;

    表格标签:
         table    表格
         tr       行
         td       列(单元格)


    表格的html属性:
        *width=""   表格的宽
        *height=""  表格的高
        *border=""  边框
        bordercolor=""  边框颜色
        cellpadding=""   内容与边框的距离
        *cellspacing="0"   边框与边框之间的距离
        align=""   水平方向对齐方式:left right center,设置给tr或者td上
        valign=""  垂直方向对齐方式:top middle bottom,设置给tr或者td上


 -->

 

六、合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 合并列 -->
    <table width="500px" height="200px" border="1px" cellspacing="0">
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2"></td>
            <!-- <td></td> -->
        </tr>
    </table>

    <br>
    <br>
    <br>



    <!-- 合并行 -->
    <table width="500px" height="200px" border="1px" cellspacing="0">
        <tr>
            <td rowspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <!-- <td></td> -->
            <td></td>
        </tr>
    </table>
</body>
</html>

<!--
    合并单元格都是对td进行操作!!! 
        合并列:colspan="2"
        合并行:rowspan="2"
        口诀:合并列删自己行里面的td,合并行删别人行里面的td
 -->

 

七、表格案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table width="600px" height="400px" border="1" cellspacing="0" bordercolor="pink">
        <tr align="center">
            <td width="90px">会员姓名</td>
            <td></td>
            <td width="90px">出生日期</td>
            <td></td>
        </tr>
        <tr align="center">
            <td>身份证号</td>
            <td colspan="3"></td>
            
        </tr>
        <tr align="center">
            <td>通讯地址</td>
            <td colspan="3"></td>
          
        </tr>
        <tr align="center">
            <td>联系电话</td>
            <td colspan="3"></td>
            
        </tr>
        <tr align="center">
            <td>会员卡号</td>
            <td colspan="3"></td>
          
        </tr>
    </table>
</body>
</html>

 

八、表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="" name="">
        <!-- 文本框 -->
        姓名:<input type="text" name="username" maxlength="3" size="10">

        <!-- 密码框 -->
        密码:<input type="password" name="psd">

        <!-- 提交按钮 -->
        <input type="submit" >

        <!-- 重置按钮 -->
        <!-- <input type="reset"> -->

        <!-- 空按钮 -->
        <!-- <input type="button"> -->
    </form>
</body>
</html>

<!-- 
    表单的作用:收集用户的信息;
    <form></form>:
          属性:
              *action=""    接口(表单提交路径) 
              *method="get / post"    数据提交的方式
              name=""      表单的名称
    
    表单控件:
        大部分由input标签来实现的
           属性:
                *type=""  控制input显示的类型(文本框、密码框、提交按钮、单选按钮...)
                *value="" 根据控件类型不一样,作用不一样
                         value属性在文本框的作用:提示信息
                         value属性在按钮的作用:更改按钮文字
                ***name=""  表单控件的名称(开发中称为"字段名",与后端对接后在写)
                maxlength=""   能输入的最大长度
                size=""     控件的大小(以字符为单位)



        文本框:
            <input type="text">
        密码框:
            <input type="password">
        提交按钮:
            <input type="submit">
        重置按钮:
            <input type="reset">
        空按钮:
            <input type="button">
        
 -->

 

九、知识梳理

    1.列表

       无序列表

            <ul>

                <li></li>

            </ul>

        

        有序列表

            <ol>

                <li></li>

            </ol>

            属性:type="1 a A i I"

                 start="2" 取值只能是数字  

 

        自定义列表

            <dl>

                <dt>名词</dt>

                <dd>解释</dd>

                <dd>解释</dd>

                <dd>解释</dd>

            </dl>


 

    2.a超链接

        <a></a>

            href="跳转路径"     href="#"

            target="_blank/_self"

            title="提示信息"

 

    3.img图片:

        <img>

           src:图片路径

           alt=""  文本替代图片,有利于seo

           title=""

           width=""

           height=""

           border=""

 

    4.路径:

         同级找同级:  直接写文件名  或者  ./文件名

         子级找父级:  ../  返回上一级

         父级找子级:  ./文件夹名字/文件名

 

    5.表格:

         <table>

             <tr>

                 <td></td>

             </tr>

         </table>

         属性:

             width=""

             height=""

             border=""

             bordercolor=""

             cellspacing=""

             cellpadding=""

             align=""   水平对齐方式:  left center right

             valign=""  垂直对齐方式:   top middle bottom

 

        合并单元格:

            都是对td进行操作!!!

            合并列 : colspan="3"

            合并行:   rowspan="2"

            口诀:合并列删自己行里面的td,合并行删别人行里面的td

 

     6.表单

        <form></form>:

             *action=""   接口

             *method="get/post"

             name=""

 

        表单控件:

            input:

                属性:type=""

                      value=""

                      ***name=""

                      maxlength=""

                      size=""

 

            文本框(输入框):

                <input type="text">

 

            密码框:

                <input type="password">

 

            提交按钮:

                <input type="submit">

            重置按钮:

                <input type="reset">

            空按钮:

                <input type="button">

原网站

版权声明
本文为[諾卡先生]所创,转载请带上原文链接,感谢
https://blog.csdn.net/weixin_44202489/article/details/109899186