zoukankan      html  css  js  c++  java
  • html基础-标签

    html 页面跟标签:<html 页面跟标签lang=‘zh’告诉浏览器页面语言为中文></html>

    head 头标签:页面编码、页面标签标题、页面样式、页面脚本

    <head>
        <!--页面编码-->
        <meta charset="utf-8">
        <!--页面标签标题-->
        <tItlE>标签</tItlE>
        <!--页面样式-->
        <style></style>
        <!--页面脚本-->
        <script></script>
    </head>

    body 体标签 :页面内容、页面脚本,用于内容显示的标签全部书写在body中

     标题:h1~h6

    <h1 id="top">一级标题</h1> <!-- 一般一个页面只出现一次,代表该页面的主内容解释 -->
    <h2>二级标题</h2>
    <h6>六级标题</h6>

    段落p标签:<p>段落</p>

        文本相关:一般会被p标签嵌套

    加粗标签b:

    <b>加粗标签</b>

        效果:加粗标签

    以加粗方式强调的标签:strong

    <strong>以加粗方式强调的标签</strong>

        效果:以加粗方式强调的标签

    斜体标签:i

    <i>斜体标签</i>

        效果:斜体标签

    以斜体方式强调的标签:em

    <em>以斜体方式强调的标签</em>

        效果:以斜体方式强调的标签

    上角标、下角标:sup、sub

    <sup>上角标</sup>
    <sub>下角标</sub>

        效果:上角标 下角标

    功能标签

    换行:<br />

    分割线:<hr>

    超链接:<a href="域名" target="_self">用户看到的</a>

      例:<a href="https://www.baidu.com" target="_self">前往百度</a>

      ps:target="_self"表示在当前页面打开,target="_blank"在新页面打开

    图片标签:< img src:图片源  alt:资源加载失败的文本提示 title:鼠标悬浮的文本提示 >

      例:<img title="你是它" alt="二哈" src="https://ss3.bdstatic.com  /70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1925405117,207445978&fm=26&gp=0.jpg">
    组合标签

    列表:

      无序列表ul:

    <ul>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>
    效果:
    • 列表项
    • 列表项
    • 列表项

      有序列表:ol

    <ol>
        <li>第1项</li>
        <li>第2项</li>
        <li>第3项</li>
    </ol>
    效果:
        1.第1项
        2.第2项
        3.第3项

    表格标签

    tr: 行  th: 标题单元格  td:内容单元格 cellpadding:单元格内部间距  cellspacing:单元格间的间距

    <table border="1" width="500" height="300" cellpadding="10" cellspacing="0">
        <thead>
            <tr >
                <th>标题</th>
                <th>标题</th>
                <th>标题</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>

    效果:

    标题标题标题
    单元格 单元格 单元格
    <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>

    效果:

    标题标题标题
    单元格 单元格 单元格
    单元格 单元格
    单元格 单元格

    表单标签: 完成前后台交互的 - 将前台用户输入的内容提交给后台

    form  action:提交后台的接口地址  method:提交方式 get 、post

    在客户机和服务器之间进行请求-响应时,两种最常被用到的方法是:get 和 post

    GET - 从指定的资源请求数据

    POST - 向指定的资源提交要被处理的数据

    GET 方法

    注意查询字符串(名称/值对)是在 GET 请求的 URL 中发送的:

    例如:file:///G:/study/7.1/01.html?user=213123&sex=on&cless=on&like=m&like=f

    POST 方法

    注意查询字符串(名称/值对)是在 POST 请求的 HTTP 消息主体中发送的:

    POST /test/demo_form.asp HTTP/1.1
    Host: w3schools.com
    name1=value1&name2=value2

     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">

    效果:

    单选框:radio

    <input type="radio" name="sex" checked> checked为默认选项<input type="radio" name="sex">
    一班<input type="radio" name="cless">
    二班<input type="radio" name="cless" checked>

    效果:

    复选框:checkbox

    <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>填充文本</textarea>

    效果:

    三个按钮

    <button type="button">按钮</button>
    <button type="reset">重置</button>
    <button type="submit">提交</button>
    <input type="submit" value="登陆">

    效果:

  • 相关阅读:
    MATLAB GUI制作快速入门
    JavaFX Chart设置数值显示
    Unity查找物体的四大主流方法及区别
    Matlab 图像转极坐标系
    使用python获得N个区分度较高的RGB颜色值
    Arduino学习笔记30
    Arduino学习笔记27
    Arduino学习笔记26
    Arduino学习笔记25
    Arduino学习笔记24
  • 原文地址:https://www.cnblogs.com/duGD/p/11116243.html
Copyright © 2011-2022 走看看