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

嵌入图片

<img>

嵌入图片
<img>
    src="" 图片地址
    width="" 宽度
    height="" 高度
    alt="" 图片备用内容
创建响应分区
<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://blog.gdmeca.com/archives/6.html
1 + 4 =
快来做第一个评论的人吧~