如何去学习html及笔记和概述

最新推荐文章于 2024-10-16 11:23:07 发布

「已注销」

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量216

点赞数 3

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/qq_42756989/article/details/85010366

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

如何去学习html及笔记和概述

学习html之前我先说下我的学习html的方法，我学html的时候就花了半个小时。我并没有去看各种视频什么什么的，太多了也是太烦了。于是我就去百度查看各种资料先是通过w3c，又查了视频及资料，总结一套属于自己理解出来的html笔记。

学习web，必不可少的入门课就是学习html，它其实没我们想象那么难，只要记住开发时最常用的标签即可。

HTML概念：

html是超文本标记语言(不是编程语言，是一种标记语言，拥有一套自己的标记标签)

接下来我会通过两个案例将所有常用的标签展现出来（部分标签放尾部单独解释）。

注释的地方根据意思自己跟着敲一遍，我相信一个小时你能轻松掌握html?。

<!--此部分代码为h5的标准格式-->
<!--!DOCTYPE:定义文档类型-->
<!DOCTYPE html>
<!--html标签创建一个HTML文档 是成对存在的-->
<html lang="en">
   <!--head标签设置文档标题和其它在网页中不显示的信息-->
<head>
    <meta charset="UTF-8">
    <!--title标签 在浏览器显示标题(设置文档的标题) -->
    <title>Title</title>
</head>
   <!--body标签之间显示网页的内容 是成对存在的-->
<body>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>标题</title>
</head>
<body>
<!-- table 表单标签 成对存在-->
        <table  width="100%" >
           <!--tr标签表示表单中间的行（横） 成对存在-->
            <tr>
               <!-- td定义表单中的单元（纵）成对存在-->
                <td>
                <table  width="100%">
                    <tr>
                         <td>
                            <!--img标签 插图图片标签 通过src的路径导入图片 单个存在-->
                        <img src="../传智 h5版/img/logo.jpg"/>
                         </td>
                         <td >
                          <img src="../传智 h5版/img/header.png" >   
                         </td>
                         <td>
                            <!-- a标签成对存在 定义锚 通过href导入路径 实现网页跳转 #意为空连接-->
                            <a href="#">登录</a>
                            <a href="#">注册</a>
                            <a href="#">购物车</a>
                        </td>
                    </tr>
                </table>
                </td>
            </tr>
        <!--第二部分: 导航栏部分 : 放置5个超链接-->
           <!--bgcolor 背景颜色 在引号内写入颜色-->
        <tr bgcolor="black">
            <!--height 高 引号内写入像素 用px结尾-->
            <td height="50px">
               <!--select 下拉标签 成对存在 和option配套使用-->
                    <select >
                       <!--option 选项标签 value属性值 不同的输入类型，value属性用法也不同-->
                            <option value ="all">所有品牌</option>
                            <option value ="ADIDAS">adidas</option>
                            <option value="NIKE">nike</option>
                    </select>
               <!--font标签定义文字字体，尺寸和颜色 color定义颜色-->
                <a href="#"><font color="white">首页</font></a>
                <a href="#"><font color="white">上装</font></a>
            </td>
        </tr>
        <!--第三部分: 轮播图 -->
         <tr>
             <td>
                <!--name属性 定义名字 方便 css js调用使用 -->
           <img name="pic" src="../传智 h5版/img/zhongtu.jpg"wighet="100%"/>      
            </td>
         </tr>
        <!--第四部分: 导航栏部分-->
     <tr bgcolor="gray">
        <!--align属性 center为居中 可以将center换成左右 -->
         <td height="100px" align="center">
            <!--h1 h2 h3 h4 h5 h6 分别为标题字体大小 从大变小-->
             <h1><font color="black">AIR JORDAN</font></h1> <br />
            <!--p标签 段落标签 分段-->
             <p>--飞人乔丹--</p>
         </td>
     </tr>
     <!--第五部分: 嵌套一个2行2列表格  下部分为商品样式 省略-->
     <tr>
         <td>
            <table>
                <tr>
                    <td >
                        <img src="../传智 h5版/aj/aj1.jpg"  width="211px" height="200px"  />
                        <p>aj5</p>
                        <p><font color="red">¥800</font></p>
                    </td>
               </tr>
               <!--...........省略重复代码-->
            </table>
         </td>
     </tr>
    <!--第五部分: 导航栏部分-->
    <tr bgcolor="gray">
            <td height="100px" align="center">
                <h1><font color="black">NIKE</font></h1> <br />
                <p>--air more--</p>
            </td>
    </tr>
        <!--第六部分: 嵌套一个2行2列表格-->
        <tr>
                <td>
                   <table>
                       <tr>
                           <td align = "center">
                               <img src="../传智 h5版/aj/aj1.jpg"  />
                               <p>aj5</p>
                               <p><font color="red">¥800</font></p>
                          </td>
                          <!--…………省略重复代码-->
                       </tr>
                   </table>
                </td>
            </tr>     
            <!--第七部分: 导航栏部分-->
    <tr bgcolor="gray">
            <td height="100px" align="center">
                <h1><font color="black">ADIDAS</font></h1> <br />
                <p>----</p>
            </td>
    </tr>
        <!--第八部分: 嵌套一个2行2列表格-->
        <tr>
                <td>
                   <table>
                       <tr>
                           <td align = "center">
                               <img src="../传智 h5版/aj/aj1.jpg"  />
                               <p>aj5</p>
                               <p><font color="red">¥800</font></p>
                          </td>
                 </td>
           </tr>
        </tr> 
     <!--第九部分:收尾-->
        <tr>
            <td align="center" >
                    <a href="#">关于我们</a>
               <a href="#">联系我们</a>
           			 <!--.....省略-->
               <br />
               <!-- 没有标签可以直接打印在浏览网页-->
Copyright © 2005-2018 冯诺商城 版权所有
            </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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册页面</title>
</head>
<body>     
   <!--form表单标签 供用户输入html的表单 action属性 将注册页面提交之后跳转到引号内的链接 （规定当提交表单时，向何处发送表单数据）-->
   <form action="xxx.html">
      <tr>
         <!--colspan属性规定单元格可横跨的列数 数字是几就跨多少列 rowspan属性 跨纵-->
         <td colspan="2" align="center">
            <font color="bule" size="5">会员注册</font>USER REGISTER
         </td>
      </tr>
      <tr>
         <td>用户名: </td>
         <td>
            <!--语法 <input type="value"> -->
            <!--placeholder 属性提供可描述输入字段预期值的提示信息 当点提示性信息时显示内容消失 -->
            <!--text值定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符-->
            <!--file，输入字段和 "浏览"按钮，上传文件k-->
            <!--image值图像形式的提交按钮。-->
            <!--reset值重置按钮，重置按钮会清除表单中的所有数据-->
            <input type="text" placeholder="请输入用户名"/>
         </td>
      </tr>  
      <tr>
         <td>密  码: </td>
         <td>
            <!--password值 显示密码字段，内容不显示-->        
            <input type="password" placeholder="请输入密码"/>
         </td>
      </tr>
      <tr>
         <td>确认密码: </td>
         <td>
            <input type="password" placeholder="请再次输入密码"/>
         </td>
      </tr>
      <tr>
         <td>邮箱: </td>
         <td>
            <!--email值为邮箱-->
            <input type="email" placeholder="请输入邮箱"/>
         </td>
      </tr> 
      <tr>
         <td>姓名: </td>
         <td>
            <input type="text" placeholder="请输入真实姓名"/>
         </td>
      </tr> 
      <tr>
         <td>性别: </td>
         <td>
             <!--radio值	单选按钮 checkbox 复选框 -->
            <input type="radio" name="sex"/>男
            <input type="radio" name="sex"/>女
         </td>
      </tr> 
      <tr>
         <td>出生日期: </td>
         <td>
      <!--date值 日期 -->
            <input type="date" />
         </td>
      </tr>  
      <tr>
         <td>验证码: </td>
         <td>
            <input type="text" />
         </td>
      </tr>  
      <tr>
         <td>电话号码: </td>
         <td>
      <!--tel值 电话 -->
            <input type="tel" />
         </td>
      </tr> 
      <!--button	可点击按钮 value属性可以改变按钮名字 -->
      <tr>
         <td colspan="2" align="center">
            <input type="submit" value="注册"/>
         </td>
      </tr> 
   </form>
</body>
</html>

我这次用了两个案例将大部分常用html已经说完了，还有部分标签如下一一概括介绍：