zoukankan      html  css  js  c++  java
  • 前端小基础

    <!DOCTYPE html>
    <!-- html:页面根标签 lang="zh"告诉浏览器页面的语言 -->
    <html lang="zh">
    <!-- head:头标签 - 页面编码、页面标签标题、页面样式、页面脚本 -->
    <head>
    <!--页面编码-->
    <meta charset="utf-8">
    <!--页面标签标题-->
    <tItlE>标签</tItlE>
    <!--页面样式-->
    <style></style>
    <!--页面脚本-->
    <script></script>
    </head>
    <!-- body:体标签 - 页面内容、页面脚本 -->
    <hr>

    <!-- 用于内容显示的标签全部书写在body中 -->
    <!-- 标题:h1~h6 -->
    <h1 id="top">一级标题</h1> <!-- 一般一个页面只出现一次,代表该页面的主内容解释 -->
    <h2>二级标题</h2>
    <h6>六级标题</h6>
    <!-- 段落:p -->
    <p>段落</p>
    <!-- 文本相关:一般会被p标签嵌套 -->
    <span>span标签</span>
    <b>加粗标签</b>
    <strong>以加粗方式强调的标签</strong>
    <i>斜体标签</i>
    <em>以斜体方式强调的标签</em>
    <sup>上角标</sup>
    <sub>下角标</sub>

    <!--功能标签-->
    <!--换行-->
    1<br />2
    <!--分割线-->
    <hr>

    <!--超链接: target: _self _blank-->
    <a href="https://www.baidu.com" target="_self">前往百度</a>
    <a href="1.第一个页面.html" target="_self">第一个页面</a>
    br*100
    <a href="#top">go top</a>

    <!-- 图片标签: src:图片源 alt:资源加载失败的文本提示 title:鼠标悬浮的文本提示 -->
    <img title="你是它" alt="二哈" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1925405117,207445978&fm=26&gp=0.jpg">

    <!-- 组合标签 -->
    <!-- 列表 -->
    <!--ul>li{列表项}*3-->
    <ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    </ul>
    <!--ol>li{第$项}*3-->
    <ol>
    <li>第1项</li>
    <li>第2项</li>
    <li>第3项</li>
    </ol>

    <!--表格标签-->
    <!-- tr: 行 th: 标题单元格 td:内容单元格 cellpadding:单元格内部间距 cellspacing:单元格间的间距 -->
    <table border="1" width="500" height="300" cellpadding="10" cellspacing="0">
    <thead>
    <tr style="height: 50px">
    <th>标题</th>
    <th>标题</th>
    <th>标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
    </tr>
    <tr>
    <td colspan="2">单元格</td>
    <!--<td>单元格</td>-->
    <td rowspan="2">单元格</td>
    </tr>
    <tr>
    <td>单元格</td>
    <td>单元格</td>
    <!--<td>单元格</td>-->
    </tr>
    </tbody>
    <tfoot>
    <!--<tr>-->
    <!--<td>单元格</td>-->
    <!--<td>单元格</td>-->
    <!--<td>单元格</td>-->
    <!--</tr>-->
    </tfoot>
    </table>

    <!-- 表单标签: 完成前后台交互的 - 将前台用户输入的内容提交给后台 -->
    <!-- form action:提交后台的接口地址 method:提交方式 get post -->
    <!-- input:name明确才会往后台提交,name是键,value是值(可以手动规定也可以用户输入) -->
    <form action="" method="">
    <input type="text" name="user" placeholder="文本占位符">
    <input type="password">
    <input type="color">
    <input type="number">
    <!--提交文件-->
    <input type="file">
    <!--单选框-->
    男<input type="radio" name="sex" checked>
    女<input type="radio" name="sex">
    一班<input type="radio" name="cless">
    二班<input type="radio" name="cless" checked>
    <br>
    <!--复选框-->
    男<input type="checkbox" value="m" name="like" checked>
    女<input type="checkbox" value="f" name="like" checked>
    人妖<input type="checkbox" value="mf" name="like">

    <!--选择列表 multiple:可以多项操作-->
    <select name="subject" multiple>
    <option value="chinese">语文</option>
    <option value="math">数学</option>
    <option value="python">python</option>
    </select>

    <!--文本域-->
    <textarea></textarea>

    <!--三个按钮-->
    <button type="button">按钮</button>
    <button type="reset">重置</button>
    <button type="submit">提交</button>
    <!--提交-->
    <!--<input type="submit" value="登陆">-->
    </form>

  • 相关阅读:
    xaml的margin和css的margin对比
    easyui datagrid连续删除问题
    面试常用的代码片段
    JS实现table表格在鼠标移动出现一行变色或者十字叉变色
    Ubuntu 18.04 LTS 64位Linux搭建Kubernetes 1.15.3并join子节点的完整过程
    Java定义队结构,实现入队、出队操作
    Java定义栈结构,实现入栈、出栈操作
    Java构造二叉树、树形结构先序遍历、中序遍历、后序遍历
    MySQL计算两个日期相差的天数、月数、年数
    Nginx(web服务器)与Tomcat(应用服务器)搭建集群
  • 原文地址:https://www.cnblogs.com/huanghongzheng/p/11151419.html
Copyright © 2011-2022 走看看