• HTML基础系列


    HTML基础系列

    image.png

    HTML标记语言,网页制作的第一步。
    什么是HTML呢?查百度
    基础语法
    常用标签

    HTML是超文本标记语言,HTML不用编译,直接在浏览器中执行,HTML是一个文本文件。

    HTML基本结构,标签,元素,属性,注解

    <html>
    <head>
     <title>标题</title>
    </head>
    <body>
    </body>
    </html>
    

    标签属性格式:

    <标签名 属性名=“属性值”></标签名>
    

    文档类型声明:

    <!DOCTYPE> 声明必须放在html文档第一行,不是html标签
    

    编码文件

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    

    标题标签,段落标签,预格式化标签,水平线

    <h1></h1> <p> <pre></pre> <hr/>
    
    <i></i>
    <b></b>
    <ins>
    <del>
    <sub>
    <sup>
    

    无序列表:

    <ul>
     <li></li>
    </ul>
    
    disc 圆点
    square 正方形
    circle 空心圆
    

    有序列表:

    <ol>
     <li></li>
    </ol>
    
    <dl>
    <dt>
    <dd>
    </dl>
    

    结构,表现,行为

    图片标签

    <img src="" alt=""/>
    

    相对路径,绝对路径

    超链接标签:

    <a href=""> 内容 </a>
    href target title name
    _self _blank _top _parent
    

    定义锚:

    <a href="#锚名"></a>
    <a name="锚名" ></a>
    

    邮件链接:

    <a href="mailto:邮件地址"></a>
    

    下载:

    <a href="xxx.rar"></a>
    

    表格的基本结构,操作表格,属性,跨行,嵌套

    <table>
    <tr>
    <td>
    
    <table>
     <tr>
      <td></td>
     </tr>
    </table>
    

    添加标题

    <caption></caption>
    

    加载过长,内容过多

    表格分:表头,主体,脚注

    thead tbody tfoot
    
    <table>
     <caption><caption>
     <thead>
     <tr>
      <th></th>
     </tr>
     </thead>
     <tbody>
     <tr>
     <td></td>
     </tr>
     </tbody>
     <tfoot>
     </tfoot>
    </table>
    

    表格属性

    width表格宽度,align对齐方式,border表格边框的宽度,Bgcolor表格背景颜色,cellpadding内容之间的空白,cellspacing单元格之间的空白,frame和rules。

    跨列属性: colspan
    跨行属性: rowspan

    表格嵌套:

    <table>
     <tr>
    <td></td>
    <td>
    <table>
    <tr>
    <td></td>
    <td></td>
    <tr>
    </table>
    </td>
    </tr>
    </table>
    

    表单结构,表单常用元素,表单交互属性

    语法:文本域,单选框,复选框,按钮,列表

    <form>
    ...
    </form>
    
    input
    select
    option
    textarea
    optgroup
    
    <input type="" name=""/>
    text password file checkbox radio button submit reset hidden image
    
    name maxlength size value placeholder
    
    <input type="image" name="" src="imageurl" />
    
    <input type="hidden" name="" value="" />
    传输给服务器
    

    下拉菜单和列表标签

    <select>
     <option value=""></option>
     <option value=""></option>
    </select>
    
    name multiple可以多选 size显示条目
    
    <option>标签属性
    selected value
    

    分组下拉菜单

    <select name="">
     <optgroup label="组1">
      <option value=""></option>
     </optgroup>
     <optgroup label="组2">
      <option value=""></option>
     </optgroup>
    </select>
    

    多行文本域

    <textarea name="" rows="" cols="">
    </textarea>
    
    name placeholder rows cols
    
    <form action="" method="" name="" >
    </form>
    
    action method name target enctype
    

    网页结构:

    <body>
    // 头部
    <div></div>
    // 主体
    <div></div>
    // 页脚
    <div></div>
    </body>
    
    <div>
    <dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
    </dl>
    </div>
    

    总结:

    html表单,表单应用场景,表单工作原理

    <input type="" name="" />
    text password file checkbox radio button submit reset hidden image
    <form>
    <input type="text" name=""/>
    </form>
    
    name, maxlength, size, value, placeholder
    <form>
    <input type="password" name=""/>
    </form>
    
    <form>
    <input type="file" name=""/>
    </form>
    
    <form>
    <input type="radio" name="" value="" checked/>
    </form>
    
    <form>
    <input type="checkbox" name="" value="" checked/>
    </form>
    
    <input type="button" name="" value=""/>
    type="submit"
    type="reset"
    <input type="image" name="" src="imageurl"/>
    
    <input type="hidden" name="" value=""/>
    
    html表单
    input select option optgroup textarea
    
    <select>
     <option value=""></option>
    </select>
    
    name multiple size
    selected value
    
    <textarea name="" rows="" cols="" >
    </textarea>
    
    name placeholder rows cols
    
    <form action="" method="" name="">
    </form>
    action method name targer enctype
    url get,post form_name _blank,_self,_parent,_top
    text/plain
    multipart/form-data
    

    image.png

    image.png

    image.png

    <!DOCTYPE html>
    <html>
    <head>
         <!-- 网页头部内容 -->
    <title>标题</title>
    </head>
    <body>
         <!-- 网页主体内容 -->  
    </body>
    </html>
    

    结言

    好了,欢迎在留言区留言,与大家分享你的经验和心得。

    感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。

    作者简介

    达叔,理工男,简书作者&全栈工程师,感性理性兼备的写作者,个人独立开发者,我相信你也可以!阅读他的文章,会上瘾!,帮你成为更好的自己。长按下方二维码可关注,欢迎分享,置顶尤佳。

    感谢!承蒙关照!您真诚的赞赏是我前进的最大动力!

    这是一个有质量,有态度的公众号

    喜欢本文的朋友们

    欢迎长按下图关注订阅号

    收看更多精彩内容

    image

    image

  • 相关阅读:
    【C++】浅谈三大特性之一继承(三)
    【C语言】两种方式实现冒泡排序算法
    【C++】浅谈三大特性之一继承(二)
    【C++】浅谈三大特性之一继承(一)
    【C语言】浅谈可变参数与printf函数
    【C语言】gets()和scanf()函数的区别
    【C语言】模拟实现printf函数(可变参数)
    【C语言】printf()函数详解
    数据分析必备思维之:结构化思维
    手游运营基本功:数据分析工作的内容与要求
  • 原文地址:https://www.cnblogs.com/dashucoding/p/11140293.html
Copyright © 2020-2023  润新知