zoukankan      html  css  js  c++  java
  • HTML学习总结&基础篇

    何为坚持?一个“勤”,一个“忍”。

    年前给自己定的目标,今年一定要坚持多逛园子,多看一些大佬的帖子,然后自己也尽量能够分享自己学习的收获,让自己进步快些,但是多逛园子是做到了,写博客这个东西,今年好像还没分享了一篇,想想真是惭愧。仔细想想,主要原因是自己懒,文笔差,感觉自己技术掌握的东西太少了,对学习到的东西理解不深入,不知道该写些啥......,所以就没有去做,不过在接下来,自己也反复思考,觉得还是希望自己能够勤快点,通过博客记录自己学习的东西,多和大家讨论学习。

    今天主要分享的是自己这两天学习HTML的一些知识点,由于自己在学校没有好好学,导致前端的知识点学的是一团糟,所以想趁着最近项目不是很赶,找点时间来补补重新去学习一下。

    1.0何为HTML?

    HTML(超文本标记语言)是一种用于创建网页的标准标记语言,HTML不需要编译,可以直接由浏览器执行,它的解析依赖于浏览器的内核。它不是一种编程语言,而是一种标记语言。

    2.0HTML骨架

    <!DOCTYPE>       //文档声明头
    
    <html>                //html标签
    
    <head>               //head标签的开始
    
    <meta charset="utf-8"> //meta标签,设置编码,编码种类有很多,但是常见的是utf-8和gb2312
    
    <title>HelloWord</title> //title标签
    
    </head>              //head标签结束
    
    <body>              //body标签开始,主要是包含了可见页面内容
    
    </body>             //body标签结束
    
    </html>             //html标签结束

    3.0两类标签

    1、 容器级标签,代表:h系类标签,h标签有六种h1,h2,h3,h4,h5,h6

    2、 文本级标签,代表p标签

    4.0图片标签

    HTML的图像是通过标签<img>来定义的。

    语法: <img src=”01.jpg” />

    src 图片地址   alt图片无法显示时显示文字  title 悬停文字, 当鼠标停在图片上禁止不动时, 出现的补充说明

    5.0图片的相对路径

    一、图片和html文件在同一个文件夹中, 则src="01.jpg" 或者src=”./01.jpg”

    二、图片在上一层文件夹中, 则  src=”../01.jpg”

    三、图片在下一层文件夹中, 则 src="./images/01. jpg"

    四、 图片在上一层的上一层文件夹中, 则  src=”../../01.jpg”

    注意:超链接的相对路径和图片的相对路径基本一样

    6.0给图片添加超链接的语义

    意思就是我们点击一张图片可以跳转到一个网页

    <a href=”http://www.taobao.com”><img src=”./images/02.jpg” /></a>

    7.0页面内的锚点

    回到顶部:<a href=”#” >回到顶部</a>

    8.0无序列表

    无序列表是一个组合标签(缺一不可)

    <ul>
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
    </ul>

    9.0有序列表

    有序列表是一个组合标签(缺一不可)
    
    <ol>
    <li>冠军</li>
    <li>亚军</li>
    <li>季军</li>
    </ol>

    10.0自定义列表

    <dl>

    <dt></dt>

    <dd></dd>

    <dd></dd>

    <dd></dd>

    </dl>

    11.0 div和span

    HTML可以通过<div>和<span>将元素组合到一起。

    div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。
    span是一个内联元素,没有实际意义,它的存在纯粹是为了应用样式,给一段内容加上<span></span>标记可以通过在span上定义样式来设定其内容的样式。

    12.0表单元素

    表单主要获取用户填写的数据,然后通过浏览器向服务器传送。

    表单使用的标签(<form></form>)

    12.1文本框

    <form>
    <input type="text" name=”username”>
    </form>

    Input  就是输入的意思  type是类型  text就是文本 name是元素的名称 value是input元素的值

    12.2密码框

    <form>
    <input type=”password” name=”pwd”>
    </form>

    Input  就是输入的意思  type是类型  password就是密码,密码字段不会以明文形式显示,而是以星号或者原点代替

    12.3单选框

    <form>
    <input type="radio" name="sex"  value=”male”><input type="radio" name="sex"  value=”female”></form>

     要实现单选功能, 必须使用name属性, 让该属性具有相同的值, 那么就成组, 就可以实现单选功能。

    12.4复选框

    <form>
    <input type="checkbox" name="hobby” value="basketball">打篮球
    <input type="checkbox" name="hobby” value="football">踢足球
    </form>

    12.5 label标签

    <form>
    <input type="checkbox" name="sex" id=”male” value="1"><label for=”male”></label>
    </form>

    12.6下拉列表

    <form>
    <select>
    <option>C#</option>
    <option>Java </option>
    <option>PHP</option>
    </select>
    </form>

    12.7多行文本域

    <form>
    <textarea cols=”20” rows=”10” name=”content”></textarea>
    </form>

    name 是元素的名称 rows是指定文本框的高度 cols  是指定文本框的宽度

    12.8隐藏域

    <form>
    <input type="hidden” name="id” value="1”/>
    </form>

    12.9上传文件

    <form>
    <input type="file” name="image"/>
    </form>

    利用这项功能时,在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。

     multiple     控制是否上传多文件

    12.10三种按钮标签

    普通标签

    <form>
    <input type="button" value="登录" />
    </form>

    提交按钮

    <form>
    <input type="submit" value="提交"/>
    </form>

    重置按钮

    <form>
    <input type="reset" value="重置"/>
    </form>

    13.0 <iframe>内嵌框架

    语法:<iframe src="url" name="框架名"></iframe>
    <iframe src="http://www.taobao.com" name="taobao" height="800" width="1080"></iframe>

    主要属性:

     width 指定框架的宽度 属性值:px ,%

    heigh 指定框架的宽度 属性值:px ,%

    scrolling 是否显示滚动条 属性值:yes,no,auto

    frameborder 是否显示边框属性值:1, 0  

     14.0表格

    表格是由<table>标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)

    15.0杂项

    15.1文本格式,设置文本字体元素

      <b>加粗</b><br />

      <i> 斜体 </i><br />

      <del>删除线</del><br />

      <sup>上标</sup><br />

      <sub>下标</sub>

      <br />换行

      <hr />水平线

    15.2注释

    主要功能是用于解释说明代码,让阅读起来更方便

    语法:

    <table border="1">
        <tr>
            <td>12</td>
            <td>12</td>
        </tr>
        <tr>
            <td>21</td>
            <td>21</td>
        </tr>
    </table>

     这就是这两天学习总结的内容,也许写的不好,希望大家能够谅解和指正。路漫漫其修远兮,吾将上下而求索.

  • 相关阅读:
    tips for Flask
    REST
    数据结构与算法分析 in C语言
    大学环境对大学生学习心态的影响
    Qpython_文本读写_工作目录
    The Zen of Python
    SQL SERVER数据库中DDL语句
    sql server创建序列sequence
    macbook 安装redis流程及问题总结
    mac系统chrome浏览器快捷键
  • 原文地址:https://www.cnblogs.com/Erhao/p/10489031.html
Copyright © 2011-2022 走看看