zoukankan      html  css  js  c++  java
  • html 常用标签及基本用法

    一个网页基本是由 结构(html) + 样式(css) + 脚本(js) 组成。
    学习的话 应该从最基本的标签开始, 结构清晰了, 再用css美化, 最后可以用脚本加上特效

    块级 和 行类标签

    特点:
    1. 宽度自适应父级,总是从新的一行开始。 行内的,不会折行。
    <div>
        <div>123</div>
        <div>123</div>
    </div>
    <a>行1</a>
    <a>行2</a>
    <a>行3</a>
    
    2. 高度,宽度...都可以自行控制. 而行类元素 则不能设置。
    <div style="300px;height:200px;"></div>
    // 无效
    <span  style="300px;height:200px;"></span>
    
    3.行内元素 和 块级元素是可以转变的
    // 比2多了 display:block 有效
    <span  style="300px;height:200px;display:block"></span>
    display: inline(行) / inline-block(行块--兼具二者好处) / block(块)

    常用块元素

    // 最基本的--div
    <div>我是最基本的标签div, 啥都能放,比如嵌套内容, 比如放图片, 段落...</div>
    
    // 段落--p
    <p>我是段落标签, 我一般放文字...</P>
    
    // 标题 h1,h2...h6
    <h3>一般用来放标题</h3>
    
    // 有序列表--ul 和 无序列表--ol 一般和li配合起来使用 有何不同?拿到浏览器上一看就知。
    <ul>
        <li>首页</li>
        <li>招聘</li>
        <li>关于</li>
    </ul>
    <ol>
        <li>首页</li>
        <li>招聘</li>
        <li>关于</li>
    </ol>
    
    // 表格--table
    // tr代表一行 td代表一格
    <table>
        // 表头--thead tabel(表单)的head(头)
        <thead>
            <tr>
                <td>岗位</td>
                <td>人数</td>
                <td>要求</td>
            <tr>
        <thead>
        // 表身--tbody
        <tbody>
            <tr>
                <td>设计</td>
                <td>1</td>
                <td>美女</td> 
            </tr>
            <tr>
                <td>前端</td>
                <td>1</td>
                <td>帅哥</td> 
            </tr>
        <tbody>   
    <table>

    常用的行类元素

    // 锚点--a 点击可以跳转到指定的链接
    <a href="http://www.baidu.com"></a>
    
    // 输入框--input
    <input type="text" placeholder="请输入文本">
    
    // 多行文本
    <textarea></textarea>
    
    // 图片--img
    <img src="https://img11.360buyimg.com/n4/s130x130_jfs/t5605/44/3506681813/377317/f4addf34/593e1209Nacbe2e64.jpg" alt="鼠标划入会显示的文字" />
    
    // 万能??--span
    <span>我经常被用到</span>
    
    // 还有一些其他的 如
    <em>斜体</em>
    <strong>加粗</strong>
    ...

    常用学校网站 w3c, 菜鸟教程... 有一定基础了 可以去慕课网...

  • 相关阅读:
    D. Babaei and Birthday Cake--- Codeforces Round #343 (Div. 2)
    Vijos P1389婚礼上的小杉
    AIM Tech Round (Div. 2) C. Graph and String
    HDU 5627Clarke and MST
    bzoj 3332 旧试题
    codeforces 842C Ilya And The Tree
    codesforces 671D Roads in Yusland
    Travelling
    codeforces 606C Sorting Railway Cars
    codeforces 651C Watchmen
  • 原文地址:https://www.cnblogs.com/10manongit/p/12207687.html
Copyright © 2011-2022 走看看