测开学习篇-html

测开学习篇-html

    • 1.标题 关键词 描述
    • 2.有序列表和无序列表
    • 3.div分区
    • 4.语义标签
    • 5.表格
    • 6.表单

1.标题 关键词 描述

DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="UTF-8">
    <meta name="Keywords" content="网页关键字,搜索引擎搜索关键字后找到这个网页">
    <meta name="Description" content="网页描述信息">
    <title>标题 关键词 描述title>
head>
<body>
    
    顶顶顶
body>
html>

2.有序列表和无序列表

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表和无序列表title>
head>
<body>
    有序列表
    <ol>
        
        <li>11li>
        <li>22li>
        <li>32li>
    ol>
    <ol type="A">
        
        <li>11li>
        <li>22li>
        <li>32li>
    ol>
    <hr>
    无序列表
    <ul>
        
        <li>11li>
        <li>22li>
        <li>32li>
    ul>

body>
html>

3.div分区

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div分区title>
head>
<body>
    <div class="header">
        <div class="logo">logo图片div>
        <nav>导航栏标签nav>
        
    div>
    <div class="banner">轮播图广告div>
    <div class="content">
        <div class="aside">左侧导航栏div>
        <div class="main">主要内容区域div>
    div>
    <footer>底部标签footer>
    
body>
html>

4.语义标签

div和span
对于div和span这两个元素,不少新手也不知道它们之间有什么区别,使用起来也很随便。因此,这里有必要简单介绍一下。

div和span没有任何语义,正是因为没有语义,这两个标签一般都是配合CSS来定义元素 样式的。

div和span区别如下:

(1 ) div是块元素,可以包含任何块元素和行内元素,不会与其他元素位于同一行;span 是行内元素,可以与其他行内元素位于同一行。

(2 ) div常用于页面中较大块的结构划分,然后配合CSS来操作;span 一般用来包含文字等, 它没有结构的意义,纯粹是应用样式。当其他行内元素都不适合的时候,可以用span来配合CSS 操作。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语义标签title>
head>
<body>
    <div>
        
        <span>姓名:span><span>李牧span>
    div>
body>
html>

5.表格

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格title>
head>
<body>
    
    <table>
        <tr>
            <td>第一行第一格td>
            <td>第一行第二格td>
            <td>第一行第三格td>
        tr>
        <tr>
            <td>第二行第一格td>
            <td>第二行第二格td>
            <td>第二行第三格td>
        tr>
    table>
    
    <table border="1">
        <caption>表格标题caption>
        
        <thead>
            <tr>
                <th>用例标题th>
                <th>预取结果th>
                <th>测试结果th>
            tr>
        thead>
        
        <tbody>
            <tr>
                <td>正确账号密码登录td>
                <td>登录成功td>
                <td>测试成功td>
            tr>
            <tr>
                <td>错误账号密码登录td>
                <td>登录失败td>
                <td>测试成功td>
            tr>
        
        <tfoot>
            <tr>
                <td>表脚1td>
                <td>表脚2td>
                <td>表脚3td>
            tr>
        tfoot>
        tbody>
    table>
body>
html>

6.表单

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>表单title>
head>

<body>
    <form action="http://127.0.0.1/login" method="post">
        <p>
            姓名 <input type="text">
        p>
        <p>
            年龄 <input type="text">
        p>
        <p>
            
            <input type="radio" name="sex" value="1"><input type="radio" name="sex" value="2">p>
        <p>
            
            <input type="checkbox" name="game" checked>lol
            <input type="checkbox" name="game" checked>部落冲突
            <input type="checkbox" name="game">原神
        p>
        <p>
            <input type="submit"> 
        p>
    form>

body>

html>

测开学习篇-html_第1张图片

你可能感兴趣的:(学习,html,前端)