0
点赞
收藏
分享

微信扫一扫

html标签使用、表单、表格

杏花疏影1 2022-06-28 阅读 39
htmlcss表单Html/CSS前端开发
加载失败


文章目录

  • ​​网页组成​​
  • ​​一、基本结构​​
  • ​​HTML介绍​​
  • ​​二、标签使用​​
  • ​​`2.1.文本标签`​​
  • ​​`2.2.列表标签`​​
  • ​​`2.3.超级链接`​​
  • ​​`2.4.锚点跳转`​​
  • ​​`2.5.图片标签`​​
  • ​​`2.6.div标签`​​
  • ​​三、表单/表格​​
  • ​​`3.1.表单标签`​​
  • ​​`3.2.单选按钮组`​​
  • ​​`3.3.下拉菜单`​​
  • ​​`3.4.文本框`​​
  • ​​`3.5.复选框`​​
  • ​​`3.6.表格`​​

参考视频：
​​​ https://edu.51cto.com//center/course/lesson/index?id=224246​​


网页组成

• HTML标记语言：组成网页架构的元素组件
• CSS 样式语言：美化网页的样式
• JavaScript 程式语言：控制网页的动态效果
• JQuery 程式语言：协助及加强JavaScript的实现

一、基本结构

<!DOCTYPE html>  <!-- 文档声明，此类型声明html5 */ -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首页</title>
  <meta name=""Keywords content="关键字">
  <meta name="Description" content="简介、描述">
  <link rel="stylesheet" href="./css/main.css">
  <style>
    /* css代码 */
  </style>
  <script type="text/javascript">
    // js代码
  </script>
</head>
<body>
  <!-- 内容 -->
</body>
<script type="text/javascript" src="./js/main.js"></script>
</html>

HTML介绍

HTML：是一种用于创建网页的标记语言, 可以使用HTML创建网页，用浏览器打开会自动解析。

HTML是由标签和内容构成。

二、标签使用

​​2.1.文本标签​​

html标签使用、表单、表格_表单

<!DOCTYPE html>
<html>
  <head>
    <title>我的第一个页面</title>
    <meta charset="utf-8">
  </head>
  <body>        <!--这是主体内容部分-->
    <h1 title="我是标题标签">标题1</h1>
    <hr>      <!--分隔线-->
    <p>
      我是内容 <br>
      我是内容
    </p>
    <hr>
    <b>我是b标签</b>
    <u>我是u标签</u>
    <s>我是s标签</s>
    <i>我是i标签</i>
    <hr>
    <h2 align="center">离思五首·其四</h2>
    <p align="center">
      曾经沧海难为水，除却巫山不是云。<br>
      取次花丛懒回顾，半缘修道半缘君。
    </p>
  </body>
</html>

html标签使用、表单、表格_html_02

​​2.2.列表标签​​

html标签使用、表单、表格_css_03

<!DOCTYPE html>
<html>
  <head>
    <title>列表标签</title>
    <meta charset="utf-8">
  </head>
  <body>          <!--这是主体内容部分-->
    <ol start="3">    <!--有序列表-->
      <li>列表1</li>
      <ul>
        <li>嵌套列表1</li>
        <li>嵌套列表2</li>
      </ul>
      <li>列表2</li>
      <li>列表3</li>
    </ol>
    <hr>
    <ul>        <!--无序列表-->
      <li>无序列表1</li>
      <li>无序列表2</li>
      <li>无序列表3</li>
    </ul>
    <hr>
    <dl>        <!--自定义列表-->
      <dt>列表头</dt>
      <dd>列表内容</dd>
      <dt>列表头</dt>
      <dd>列表内容</dd>
    </dl>
  </body>
</html>

html标签使用、表单、表格_html_04

​​2.3.超级链接​​

超链接标签：<a href=“网址” ></a>
html标签使用、表单、表格_表单_05

<body>
  <a href="http://www.baidu.com" target="_blank">百度一下</a> <br>    <!--在新窗口打开跳转页面-->
  <a href="demo1.html">跳转到本地页面</a>
</body>

html标签使用、表单、表格_html_06

​​2.4.锚点跳转​​ 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>锚点跳转</title>
  <style type="test/css">
    a {
      font-size: 40px;    <!--设置字体大小-->
    }
  </style>
</head>
<body>
  <ul>
    <li id="t1" style="width:200px; height:400px; background-color:red">1</li>
    <li id="t2" style="width:200px; height:400px; background-color:blue">2</li>
    <li id="t3" style="width:200px; height:400px; background-color:green">3</li>
    <li id="t4" style="width:200px; height:400px; background-color:yellow">4</li>
  </ul>
  <hr>
  <a href="#t1">1</a>
  <a href="#t2">2</a>
  <a href="#t3">3</a>
  <a href="#t4">4</a>
</body>
</html>

点击网站下面的数字可以跳转到对应的颜色
html标签使用、表单、表格_html_07

​​2.5.图片标签​​ 

<img src=“图片文件路径”alt=“图片提示”>

html标签使用、表单、表格_html_08

<body>
  <a title="跳转到百度" href="http://www.baidu.com" target="_blank">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2835713736,365904859&fm=26&gp=0.jpg" alt="">
  </a>  
  <hr>
  <img height="200" src="img/1.jpg1" alt="alt提示信息，这是图片">
</body>

html标签使用、表单、表格_html_09

​​2.6.div标签​​ 

<div>标签用于在HTML文档中定义一个区块。
<div>标签常用于将标签集中起来，然后用样式对它们进行统一排版。
<div style="height: 100px;width: 100px;background-color: blue">
    <p>段落一</p>
    <p>段落二</p>
</div>

html标签使用、表单、表格_css_10

三、表单/表格

​​3.1.表单标签​​

html标签使用、表单、表格_表单_11
html标签使用、表单、表格_css_12
html标签使用、表单、表格_html_13

<body>
    <form action="index.html">
        <input type="text" placeholder="请输入用户名"> <br>
        <input type="password" placeholder="请输入密码"> <br>
        <input type="button" value="按钮"> <br>
        <input type="checkbox">打球         <!--复选框-->
        <input type="checkbox">看书
        <input type="checkbox" checked>跑步     <!--checked设置元素为选中状态-->
        <hr>
        <input type="radio">                <!--单选框-->
        <hr>
        <input type="file">                 <!--传递文件-->
        <input type="hidden">               <!--隐藏文本框-->
        <input type="reset">                <!--重置按钮-->
        <input type="submit">               <!--提交按钮-->

        <hr>
        <input type="text" disabled placeholder="不可用">
        <input type="text" readonly placeholder="只读">
    </form>
</body>

html标签使用、表单、表格_css_14

​​3.2.单选按钮组​​ 

<body>
    <form>
        请选择性别
        <input id="man" type="radio" name="gender">
        <label for="man">男</label>
        <input id="woman" type="radio" name="gender">
        <label for="woman">女</label>
    </form>
</body>

html标签使用、表单、表格_表单_15

​​3.3.下拉菜单​​

html标签使用、表单、表格_表单_16
html标签使用、表单、表格_css_17

<body>
    <select autofocus>              <!--autofocus自动获得焦点-->
        <option value="">长沙</option>
        <option value="">邵阳</option>
        <option value="">永州</option>
    </select>
</body>

html标签使用、表单、表格_css_18

​​3.4.文本框​​ 

<body>
    <textarea placeholder="请输入信息" cols="100" rows="50"></textarea>
</body>

html标签使用、表单、表格_表单_19

​​3.5.复选框​​ 

<body>
    <label for="">请输入爱好</label>
    <input type="checkbox" /><label for="">吃饭</label>
    <input type="checkbox" /><label for="">睡觉</label>
    <input type="checkbox" /><label for="">打豆豆</label>
</body>

html标签使用、表单、表格_html_20

​​3.6.表格​​ 

• table 表格标签
• thead 表格标题
• tr 行标签
• th 列名
• tbody 表格内容
• td 列内容
<body>
    <table border="5" cellpadding="10" cellspacing="2" align="center" width="500">
        <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
            </tr>
        </thead>
        <tbody>
            <tr align="center">
                <td colspan="2">单元格</td>         <!--合并列单元格-->
                <td>单元格</td>
            </tr>
            <tr align="center">
                <td>单元格</td>
                <td rowspan="2">单元格</td>         <!--合并行单元格-->
                <td>单元格</td>
            </tr>
            <tr align="center">
                <td>
                    <div>
                        内嵌的div元素
                    </div>
                    <span>
                        内嵌的span元素
                    </span>
                </td>
                <td>
                    <img src="img/1.jpg" alt="" width="100" height="100">
                </td>
            </tr>
        </tbody>
    </table>
</body>

html标签使用、表单、表格_html_21


举报

相关推荐

Html 表格标签和表单标签

html表单数据服务器办公效率

【3】HTML（列表标签、表格标签、表单、框架标签）

日记本视觉艺术

HTML_CSS学习：表格、表单、框架标签

前端html5

HTML表单标签

html前端javascript

HTML ——— 表单标签

前端html学习

html表单标签

html前端

HTML 表单标签

html前端大前端webhtml5

HTML标签的基本使用：表单

html前端javascript

HTML|表格标签

htmlHtml/CSS前端开发

表格标签（HTML）

htmlhtml5贴吧搜索OpenStack云计算
0 条评论
加载失败