HTML基础-CSDN博客

本文链接：https://blog.csdn.net/qq_22599905/article/details/98144410

<!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秒后跳转到指定页面

关键字<meta name="keywords" content="萝莉,御姐,少妇,武sir" />
描述<meta name="description" content="这是网站的描述信息" />
设置IE兼容性<meta http-equiv="X-UA-Compatible" Content="IE=IE9;IE=IE8" />按顺序向下兼容
- body标签
符号  > <等
p标签，段落
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属性

<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属性
''分组显示

<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属性，设置鼠标放在图片上时的提示
列表

<!--无序列表-->
<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>

表格
- 标准形式

<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>

合并单元格

<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标签

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

fieldset带标题的边框

<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>

<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">