HTML基础

HTML
字数统计: 1.6k   |   阅读时长≈ 8 分钟

  • <!DOCTYPE html>
    说明使用的web页面标准和规范

  • head标签
    1.<head></head>标签为html的头部，内部编写一些基本信息（主动闭合标签）
    2.title标签=>标题
    3.字符编码<meta chartset="UTF-8" />(自闭合标签)
    4.刷新和跳转

    • <meta http-equiv="Refresh" Content="3" />3秒刷新一次页面
    • <meta http-equiv="Refresh" Content="3; url=http://www.baidu.com"> 3秒后跳转到指定页面
  1. 关键字<meta name="keywords" content="萝莉,御姐,少妇,武sir" />
  2. 描述<meta name="description" content="这是网站的描述信息" />
  3. 设置IE兼容性<meta http-equiv="X-UA-Compatible" Content="IE=IE9;IE=IE8" />按顺序向下兼容
    • body标签
  4. 符号&nbsp; &gt; &lt;等
  5. p标签，段落
  6. br标签，换行
  • 所有标签分为：
    • 块级标签，直接占一行，作为一个块，如：div h系列（h1~h6） p标签
    • 行内标签：有多大占多大，在一行之内，如：a标签，span标签
  • input 系列标签
    • input type=’text’ 文本框 -name属性，定义提交数据的key
    • input type=’password’ 密码输入框 -name属性，定义提交数据的key
    • input type=’submit’ 提交按钮 -value属性定义按钮显示的文字，和表单配合使用
    • input type=’button’ 按钮，-value属性定义按钮文字，在表单中无效果，和js配合使用
    • input type=’radio’ 单选框，value为选中后的值，checked=”checked”(默认选中设置)，name属性为提交数据的key，相同name的单选框互斥，数据提交为{name:value}
    • input type=’checkbox’ 复选框 ，value为选中后的值， checked=”checked”(默认选中设置)，每个name对应一个value，用于批量数据获取
    • input type=’file’ 文件域，依赖form表单的一个属性 enctype=”multipart/form-data”
    • input type=’rest’ 重置按钮，重置表单中填写的值
    • <textarea name='提交后台数据的key'>默认值</textarea>文本域，默认值放标签之间
    • select 标签，下拉框，option标签之间的值是显示给用户看的，后台提交的是option的value属性
1
2
3
4
5
6
<select name='后台数据key'>
  <option value ="volvo(后台数据的值)">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi" selectde="selected">Audi</option>
</select>
  • selectde="selected"默认选中 ，option属性
  • size=1默认size=1，size值表示直接显示几条option，select属性
  • multiple="multiple"，设置多选，select属性
  • ‘‘分组显示
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <select name='后台数据key'>
        <optgrout label="云南省">
            <option>昆明</option>
            <option>楚雄</option>
        </optgroup>
        <optgrout label="四川省">
            <option>成都</option>
            <option>眉山</option>
        </optgroup>
    </select>

  • a标签，链接
    <a herf="www.baidu.com" target="_blank" >跳转
    <a herf="#id">当页跳转，跳转到herf中id标识的标签，标签的ID属性不允许重复

  • img标签，图片
    <img src="1.jpg">放置图片，设置高宽可控制大小style="height:200px;width:300px;"
    将img包含在a标签中可设置跳转
    alt属性，设置图片显示不出来时的文字
    title属性，设置鼠标放在图片上时的提示

  • 列表

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <!--无序列表-->
    <ul>
      <li>123</li>
      <li>123</li>
      <li>123</li>
      <li>123</li>
    </ul>
    <!--有序列表-->
    <ol>
      <li>123</li>
      <li>123</li>
      <li>123</li>
      <li>123</li>
    </ol>
    <!--分组列表-->
    <dl>
      <dt>一组</dt>
      <dd>123</dd>
      <dd>123</dd>
      <dd>123</dd>
      <dt>二组</dt>
      <dd>123</dd>
      <dd>123</dd>
      <dd>123</dd>
    </ol>

  • 表格

    • 标准形式
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      <table border="1"> <!--border设置边框-->
          <thead><!--表头-->
              <tr>
                  <th>姓名</th>
                  <th>年龄</th>
                  <th>性别</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>小明</td>
                  <td>18</td>
                  <td>男</td>
              </tr>
              <tr>
                  <td>小红</td>
                  <td>17</td>
                  <td>女</td>
              </tr>
          </tbody>
      </table>
    • 合并单元格
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      <table border="1"> <!--border设置边框-->
          <thead><!--表头-->
              <tr>
                  <th>表头1</th>
                  <th>表头2</th>
                  <th>表头3</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>1</td>
                  <td colspan="2">2</td> <!--合并2，3列,colspan值表示横跨几列-->
              </tr>
              <tr>
                  <td rowspan="2">1</td> <!--合并2，3行,rowspan值表示合并几行-->
                  <td>2</td>
                  <td>3</td>
              </tr>
              <tr>
                  <td>2</td>
                  <td>3</td>
              </tr>
          </tbody>
      </table>

  • label标签

    1
    2
    3
    <label for="username">用户名</label>
    <input id="username" type="text" name="user" />
    <!--label的for属性关联input的id，点击label此input获得焦点-->

  • em强调

1
<p>今天特别<em>热</em></p>
  • strong 粗体
1
<p>这个<strong>非常非常</strong>好吃</p>
  • 上标下标
1
2
<p>2<sup>2</sup>=4</p>
<p>H<sub>2</sub>O是水</p>
  • 拼音
1
2
3
4
5
6
<p>
    <ruby>
        长<rp>(</rp><rt>chang</rt><rp>)</rp>
    </ruby>

</p>
  • 删除线
1
<del>这句话被删除了</del>
  • 下划线
1
<u>带下划线的文字</u>
  • mark标记
1
<p>这是一个<mark>标记</mark></p>
  • 图表图示
1
2
3
4
5
6
7
8
9
10
11
<figure>
        <figcaption>
            示例代码
        </figcaption>
        <pre>
            <code>
                def main():
                    pass
            </code>
        </pre>
    </figure>
  • fieldset带标题的边框
    1
    2
    3
    4
    5
    6
    7
    8
    <fieldset>
        <legend>标题</legend>
        <label for="username">用户名</label>
        <input id="username" type="text" name="user" />   
        </br>
        <label for="password">密码</label>
        <input id="password" type="password" name="pwd" />   
    </fieldset>
打赏
  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！

请我喝杯咖啡吧~

支付宝
微信