html的笔记

HTML

WEB标准

结构（html）、表现（css）、行为（javaScript）

基本结构标签

<!DOCTYPE html>
<html lang="en">

<head>
    <title>标题</title>
    <meta charset="utf-8">
</head>

<body>
    网站内容
</body>

</html>

<!DOCTYPE html>文档类型声明标签

lang 当前文档的显示语言 en英文 zh-CN中文

<meta charset="utf-8">定义字符集不写容易乱码

标签属性

标签属性是指标签的特性
class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式（inline style）
title 描述了元素的额外信息 (作为工具条使用)

HTML常用标签

<h1>-<h6>标题标签
<p></p>段落标签
<br />换行标签

<div></div>定义了文档的区域，块级 (block-level) 独占一行
<span></span>用来组合文档中的行内元素，内联元素(inline)

<img src="" alt="">图像标签 src是该标签的必须属性
<a href="" target="目标窗口的弹出方式" ></a>超链接标签 target属性 "_self"在当前窗口打开 "_blank"在新窗口打开

文本格式化标签

<strong></strong>and<b></b>文本加粗标签
<em></em>and<i></i>文本倾斜
<del></del>and<s></s>删除线
<ins></ins>and<u></u>下划线

表格标签

  <!--表格-->
    <table align="center" border="1px" cellspacing="0">
        <!-- 表格头部区域 -->
        <thead>
            <!--行-->
            <tr>
                <!--表头单元格 会居中 加粗-->
                <th> dd </th>
                <th> aa </th>
                <th> cc </th>
            </tr>
        </thead>
        <!-- 表格主体区域 -->
        <tbody>
            <tr>
                <!--列-->
                <td> d1 </td>
                <td> a1 </td>
                <td> c1 </td>
            </tr>
        </tbody>
    </table>

单元格的合并
属性：
colspan跨列合并
rowspan跨行合并单元格

列表

<!-- 定义无序列表 -->
    <ul>
        <!-- 每个元素 -->
        <li></li>
        <li></li>
    </ul>

    <!-- 定义有序列表 -->
    <ol>
        <li></li>
        <li></li>
    </ol>

 <!-- 自定义列表 -->
    <dl>
        <!-- 标题 -->
        <dt>名词</dt>
        <!-- 内容 -->
        <dd>解释</dd>
        <dd>解释</dd>
        <dd>解释</dd>
    </dl>

表单

表单标签

`<form></form>`

属性：
method
action

<input>
属性：

Type: 类型
- Type 的值所代表的效果
  - text:文本与<datalist>连用
  - password:输入的数据不可见
  - range：调节条形
```
    属性：min:设置最小值  
   *  max:设置最大值  
   *  step：设置单步调节大小  
   *  value:设置初始位置  
```
  - number：设置数字输入框
  - checkbox: 勾选框
  - radio:复选框
  - email:输入电子邮箱格式的数据
  - tel：输入电话的数据
  - url:输入url格式的数据
  - date：获取时间
  - color：获取颜色
  - image:图标按钮
    - file：上传文件
      特有属性：
```
*multiple：一次允许上传多个文件*  
*required：必须上传一个文件*  
```
    - hidden：隐藏表单会提交
    - submit:提交按钮
    - button:普通按钮
name：名字
value：设置与填充值
placeholder: 设置与填充或叫提示
maxlength: 设置最大数据长度
size: 设置输入框长度
readonly：只读效果
list：链接