HTML代码中英文对照




   <h1>标题一(heading 1)h1. Bootstrap heading</h1>
   <h2>标题二(heading 2)h2. Bootstrap heading</h2>
   <h3>标题三(heading 3)h3. Bootstrap heading</h3>
   <h4>标题四(heading 4)h4. Bootstrap heading</h4>
   <h5>标题五(heading 5)h5. Bootstrap heading</h5>
   <h6>标题六(heading 6)h6. Bootstrap heading</h6>
   <div class="h1">div.Bootstrap heading</div>
   
   <p>段落(paragraph) 这样看起来十分有美感
    </p>   
    <ul> 无序的(unordered)清单列表(list)
        <li>列表项目(list Item) Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipiscing elit</li>
        <li>Integer molestie lorem at massa</li>
        <li>Facilisis in pretium nisl aliquet</li>
        <li>Nulla volutpat aliquam velit
            <ul>
                <li>Phasellus iaculis neque</li>
                <li>Purus sodales ultricies</li>
                <li>Vestibulum laoreet porttitor sem</li>
                <li>Ac tristique libero volutpat at</li>
            </ul>
        </li>
        <li>Faucibus porta lacus fringilla vel</li>
        <li>Aenean sit amet erat nunc</li>
        <li>Eget porttitor lorem</li>
    </ul>
    <ol>有序的(ordered)清单(list)
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipiscing elit</li>
        <li>Integer molestie lorem at massa</li>
        <li>Facilisis in pretium nisl aliquet</li>
        <li>Nulla volutpat aliquam velit</li>
        <li>Faucibus porta lacus fringilla vel</li>
        <li>Aenean sit amet erat nunc</li>
        <li>Eget porttitor lorem</li>
    </ol>
    <dl>描述列表(Description lists)
        <dt>Description lists</dt>
        <dd>A description list is perfect for defining terms.</dd>
        <dt>Euismod</dt>
        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
        <dd>Donec id elit non mi porta gravida at eget metus.</dd>
        <dt>Malesuada porta</dt>
        <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
    </dl>

   <pre>预格式化(Pre-formatting)
       1
       2
       3
       a  b  c
     </pre>
   <table>表格
    <caption>说明文字
        This is an example table, and this is its caption to describe the contents.
    </caption>
    <thead>表头(table head)
        <tr>表的行(table row)
            <th>表格标题Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
        </tr>
    </thead>
    <tbody>表的主体(Table body)
        <tr>
            <td>表的单元格Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
        <tr>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
        <tr>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
    </tbody>
</table>

表单<form class="bd-example">
    <fieldset>字段(field)集(set)
        <legend>图例Example legend</legend>

        <p>
          标签<label for="input">姓名</label>
          输入<input type="text" id="input" placeholder="Example input">占位符(placeholder)
        </p>

        <p>
            <label for="select">Example select</label>
            选择 <select id="select">
               选项 <option value="">Choose...</option>值(value)
               opt=option 组(group) <optgroup label="Option group 1">
                    <option value="">Option 1</option>
                    <option value="">Option 2</option>
                    <option value="">Option 3</option>
                </optgroup>
                <optgroup label="Option group 2">
                    <option value="">Option 4</option>
                    <option value="">Option 5</option>
                    <option value="">Option 6</option>
                </optgroup>
            </select>
        </p>

        <p>
            <label>
                <input type="checkbox" value="">检查框(checkbox)
                Check this checkbox
            </label>
        </p>

        <p>
            <label>
               无线按钮(radio) <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
                Option one is this and that
            </label>
            <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
            </label>
            <label>
                <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled="">
                Option three is disabled
            </label>
        </p>

        <p>
            文本区域(textarea) <label for="textarea">Example textarea</label>
            <textarea id="textarea" rows="3"></textarea>
        </p>

        <p>
            <label for="date">Example date</label>
            日期(date)<input type="date" id="date">
        </p>

        <p>
            <label for="time">Example time</label>
            时间 <input type="time" id="time">
        </p>

        <p>
            <label for="output">Example output</label>
            输出(output)<output name="result" id="output">100</output>
        </p>

        <p>
           按钮(button)<button type="submit">Button submit</button>
           提交(submit) <input type="submit" value="Input submit button">
            <input type="button" value="Input button">
        </p>

        <p>
            禁用(disabled)<button type="submit" disabled="">Button submit</button>
            <input type="submit" value="Input submit button" disabled="">
            <input type="button" value="Input button" disabled="">
        </p>
    </fieldset>
</form>


发表评论