• 前端-常用HTML基础篇


    HTML

    介绍:

    HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。

    由来:

    HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言,它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX, Windows等)。使用HTML,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件“翻译”成可以识别的信息,即现在所见到的网页。

    发展历程:

    HTML历史上有如下版本:
    ①HTML 1.0:在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 
    ②HTML 2.0:1995年1 1月作为RFC 1866发布,于2000年6月发布之后被宣布已经过时。 
    ③HTML 3.2:1997年1月14日,W3C推荐标准。 
    ④HTML 4.0:1997年12月18日,W3C推荐标准。
    ⑤HTML 4.01(微小改进):1999年12月24日,W3C推荐标准。
    ⑥HTML5:HTML5是公认的下一代Web语言,极大地提升了Web在富媒体、富内容和富应用等方面的能力,被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。
     
    常用操作:
    table1:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>python3</title>
    </head>
    <body>
    <!--段落-->
    <p>这个是一个普通段落,不会换行
    第二行</p>


    <!--标题-->
    <h1>一级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
    <h7>7只有6级标题</h7>


    <!--换行br-->
    <p>自2013年开始,连续7年全国两会,***每年都会到6个团组参加审议、讨论。<br>2020年全国两会因疫情影响会期缩短至8天,***“下团组”次数也减少到4次。</p>


    <!--水平分割线hr-->
    <h1>AI看两会</h1>
    <hr>


    <!--块标签div,表示一块 可以放置任何内容-->
    <div style="height: 80px; 150px;background-color: aquamarine">div标签
    <h6>6级标题</h6></div>
    <div style="height: 80px; 150px;background-color: bisque">两个div之间会自动换行</div>

    <!--span:行内块元素-->
    <span style="background-color: aquamarine">行内元素</span>
    <span style="background-color: blueviolet">两个span之间不会换行</span>

    <!--em、strong:表示强调,表示比较重要-->
    <!--i、em:行内元素,字体倾斜,行内元素不会换行-->
    <i>python</i>
    <em>python1</em>


    <!--b、strong:字体加粗-->
    <b>python2</b>
    <strong>python3</strong>
    <br>


    <!--img:图片标签
    scr:图片路径
    alt:图片描述
    height:定义图片的高度
    width:设置图片的宽度-->
    <img src="./图片.jpg" width="500px" height="300px" alt="测试">
    <br>

    <!--audio:音乐和视频标签
    controls:播放器-->
    <!--audio:链接音乐-->
    <audio src="" controls="controls"></audio>
    <br>


    <!--video:链接视频-->
    <video src="./adnroid多个字段null崩溃.mp4" height="300px" width="500px" controls="controls"></video>
    <br>


    <!--a:超链接-->
    <a href="https://www.baidu.com">百度</a>
    <a href="http://www.taobao.com">淘宝</a>

    </body>
    </html>

    table2:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <!--ol:有序列表,会自动在每一列前加上序号-->
    <ol>
    <li>第一列</li>
    <li>第二列</li>
    <li>第三列</li>
    <li>第四列</li>
    <li>第五列</li>
    </ol>


    <!--ul:无序列表-->
    <ul>
    <li>第一列</li>
    <li>第二列</li>
    <li>第三列</li>
    <li>第四列</li>
    <li>第五列</li>
    </ul>


    <!--table:表格。th:表头,td:格子,表格样式:border-->
    <table border="2">
    <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性格</th>
    </tr>
    <tr>
    <td>小红</td>
    <td>18</td>
    <td>活泼</td>
    </tr>
    <tr>
    <td>小子</td>
    <td>19</td>
    <td>闷骚</td>
    </tr>
    </table>
    </body>
    </html>

    table3:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>html表单</title>
    </head>
    <body>
    <!--from:表单标签-->
    <from action="" methon="post">
    账号<input type="text" name="user">
    <br>
    密码<input type="password" name="pwd">
    <br>
    <input type="submit">
    </from>>


    <h1>注册</h1>
    <form action="">
    <!-- input:输入框,value:定义表单元素的值、name:定义表单元素的名称,此名称是提交数据时的键名,id:是唯一的标识;placeholder:输入框提示信息-->
    <!-- label:绑定某个输入框,在点击该输入框文字时激活表单(表现是:点击标签名光标激活了)for:放需要绑定的标签的id-->
    <label for="user">账号:</label>
    <input type="text" id="user" name="user" placeholder="请输入账号">
    <br>
    <label for="password">密码:</label>
    <input type="password" id="password" name="pwd" placeholder="请输入密码">
    <br>
    确认密码:<input type="password" name="pwd2" placeholder="请输入确认密码">
    选择性别:
    <!-- 单选框-->
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <br>
    选择语言:
    <!-- 多选框-->
    <input type="checkbox" name="skill">python
    <input type="checkbox" name="skill">java
    <input type="checkbox" name="skill">c+
    <br>
    上传头像:
    <!-- 上传文件-->
    <input type="file">
    <br>
    <!-- 按钮-->
    <!-- submit:提交-->
    <input type="submit">
    <!-- button:普通按钮,点击没反应。一般触发css操作-->
    <input type="button" value="普通按钮">
    <br>
    <!-- reset:重置按钮-->
    <input type="reset" value="重置按钮">
    <br>
    <!-- image:图片按钮,以图片作为提交按钮-->
    <input type="image" src="./图片.jpg">
    <br>
    <!-- hidden:隐藏表单域,把隐藏的name值在点击提交时进行默认提交-->
    <input type="hidden" name="token" value="JAJAKSKKS$KAKA@">
    <br>


    个人介绍:
    <!-- textarea: 文本输入框,一行30个字符,总共可以输入10行-->
    <textarea name="desc" id="" cols="30" rows="10"></textarea>
    <br>

    <!-- select:选择框-->
    省份:
    <select name="" id="1">
    <option value="">河南省</option>
    <option value="">广东省</option>
    <option value="">山东省</option>
    </select>
    城市:
    <select name="" id="2">
    <option value="">郑州</option>
    <option value="">深圳</option>
    <option value="">青岛</option>
    </select>

    </form>
    iframe:内联框架,会创建包含另一个文档的内联框架(既行内框架)
    <iframe src="http://www.baidu.com" frameborder="0"></iframe>
    <iframe src="http://www.taobao.com" frameborder="0"></iframe>
    </body>
    </html>

    CSS

    JavaScript

    jquery

    爱折腾的小测试
  • 相关阅读:
    hadoop再次集群搭建(3)-如何选择相应的hadoop版本
    48. Rotate Image
    352. Data Stream as Disjoint Interval
    163. Missing Ranges
    228. Summary Ranges
    147. Insertion Sort List
    324. Wiggle Sort II
    215. Kth Largest Element in an Array
    快速排序
    280. Wiggle Sort
  • 原文地址:https://www.cnblogs.com/newsss/p/14471488.html
Copyright © 2020-2023  润新知