HTML笔记

做为WEB前端必须知道的是HTML,更多的相关HTML知识可以看W3school

<> 里面内容为标签
<> 下面的为该标签的相关属性
标签或属性后面的文字为注释内容

文件简述

<!doctype html>
<html lang="zh"> 语言
    <head> 头部
        <meta charset="utf-8"> 编码
        <title>标题</title> 标题
    </head>
    <body> 主体
        …………
    </body>
</html>

基本元素

<h1></h1> 一级标题
<h2></h2> 二级标题
    ...
<p></p> 段落
<b></b> 粗体
<em></em> 斜体
<u></u> 下划线
<s></s> 删除线
<br> 换行
<hr/> 分割线
<a></a> 超链接
    href="" 链接地址 
    target="_self" 当前窗口 默认
    target="_blank" 新窗口

表格元素

<table></table>

普通表格
<table>
    <tr> 第一行
        <td>00</td>
        <td>01</td>
    </tr>
    <tr> 第二行
        <td>10</td>
        <td>11</td>
    </tr>
</table>
带表头的表格
<table>
    <tr> 第一行
        <th>标1</th> 表头
        <th>标2</th> 表头
    </tr>
    <tr> 第二行
        <td>1</td>
        <td>2</td>
    </tr>
</table>
合并单元格
<table>
    <tr> 第一行
        <td rowspan="2">00</td> 竖向合并
        <td>01</td>
        <td>02</td>
    </tr>
    <tr> 第二行
        <td>11</td>
        <td>12</td>
    </tr>
    <tr> 第三行
        <td colspan="2">20</td> 横向合并
        <td>22</td>
    </tr>
</table>

列表元素

<ol></ol> <ul></ul>

有序列表
<ol type="" reversend>
    <li></li> 列表中的项
</ol>
    type="" 样式
    reversed 降序
无序列表
<ul>
    <li></li> 列表中的项
</ul>

表单元素

<form></form>

表单
<form></form>
    action="http://example.com" 提交表单地址
    autocomplete="" 是否启用表单的自动完成功能
        on 启用表单的自动完成功能
        off 关闭表单的自动完成功能
    method="" 请求方式
        GET 请求方式为GET
        POST 请求方式为POST
输入
<input type="">
    text 文本
    password 密码
    email 邮箱
    number 数字
    tel 电话
    url 网址
    date 日期
    color 颜色
    range 滑块
    checkbox 复选框
    radio 单选框
    hidden 隐藏的数据项
    button 按钮
    search 搜索
    submit 提交
    reset 重置
    file 文件
    image 图像按钮(点击图像时url后面显示点击坐标)
单行文本
<input type="text">
    value="a" 填写好了a
    placeholder="a" 提示内容a
    maxlength="5" 最大字符5
    size="5" 输入框可见大小为5
    readonly 只读
多行文本框
<textarea>
    rows="5" 可见宽度
    cols="5" 可见高度
</textarea>
输入数字
<input type="number">
    min="0" max="100" 最小值0 最大值100
    value="50" 起始值为50
数字滑动条
<input type="range">
    min="0" max="100" 最小值0 最大值100
    step="10" 一次滑动10个值
    value="50" 起始值为50 默认中间
选择框 
<input type="checkbox"> 复选框(勾选后可取消)
<input type="radio"> 选择框(选择后不可取消)
    name="a" 选项
    checked 进入网页默认选中
下拉选择列表
<select>
    <option>a</option> 选项
    <option>b</option> 选项
    <option>c</option> 选项
</select>
文本数据列表框
<input type="text" list="data">
<datalist id="data"> 需要配合文本一起
    <option>a</option> 选项
    <option>b</option> 选项
    <option>c</option> 选项
</datalist>
按钮
<input type="button" value="按钮"> 普通按钮
<input type="submit" value="按钮"> 提交表单 与form的method和action属性关联
<button onclick="">按钮</button> js绑定事件
    disabled 禁止点击
上传文件
<input type="file" > form属性加入enctype="multipart/form-data"
    multiple 上传多个文件
    required 上传单个文件

嵌入图片

<img>

嵌入图片
<img>
    src="" 图片地址
    width="" 宽度
    height="" 高度
    alt="" 图片替代文本
    title="" 鼠标悬停文本
创建响应分区
<img src="" usemap="#mi">
<map name="mi"> 创建分区
    <area href="" shape="" cords=""> 点击分区块1
    <area href="" shape="" cords=""> 点击分区块2
    <area href="" shape="" cords=""> 点击分区块3
</map>
shapecords
rect矩形区域 a,b,c,d
a:图片左边缘
b:图片上边缘
c:图片右边缘
d:图片下边缘
circle圆形区域 x,y,r
x,y:圆形坐标
r:圆形半径
poly多边形(至少6个数组)
每个数字代表多边形的一个顶点
default默认值(整个图像)

嵌入视频

<video></video>

嵌入视频
<video></video>
    src="" 视频地址
    width="" 宽度
    height="" 高度
    poster="" 封面图
    href 链接地址 
    target="_self" 当前窗口 默认
    target="_blank" 新窗口
    loop 循环播放
    autoplay 自动播放
    controls 播放控件
    muted 视频静音
    preload="" 当页面加载后载入视频
        auto 载入整个视频 默认
        metadata 只载入第一帧
        none 不载入
设置视频格式
<video>
    <source src="xx.ogg" type="video/ogg"/>
    <source src="xx.mp4" type="video/mpeg"/>
    无法播放ogg格式视频时则跳转到该mp4视频
</video>

嵌入音频

<audio></audio>

嵌入音频
<audio></audio>
    src="" 音频地址
    loop 循环播放
    autoplay 自动播放
    controls 播放控件
    preload="" 当页面加载后载入音频
        auto 载入整个音频 默认
        meta 只载入元数据
        none 不载入音频
设置音频格式
<audio>
    <source src="xx.ogg" type="audio/ogg" />
    <source src="xx.mp3" type="audio/mpeg" />
    无法播放ogg格式音频时则跳转到该mp3音频
</audio>

本文链接:

https://ponjs.com/archives/10.html
1 + 1 =
快来做第一个评论的人吧~