Wherelse Blog

HTML语法笔记

2020-03-08 · 5 min read
笔记 编程

HTML Grammar notes

基本元素

省略

表格元素

<table>表格样式:
-<thead>``<tbody>``<tfoot>
<tr>表格行
<td>表格列
<th>表头
colspan水平合并单元格
rowspan垂直合并单元格

<table border="1px">
    <thead>
        <th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

列表元素

<ol>有序列表
-type设置样式,reversed降序
<ul>无序列表
<li>放在<ol>``<ul>列表中的项

表单元素

<form>表单样式

<input>输入框

type属性,单行输入框:

  1. text,默认属性
  • value,默认填充内容
  • placeholder,占位显示,不影响输入
  • maxlength,输入最大长度控制
  • size,输入框长度控制,拓宽单行输入框的长度
  • readonly,只读不可编辑标签
  1. password,密码属性,隐藏输入内容,单行文本框
  2. submit,按钮
  3. email,邮箱
  4. date,时间
  5. url,链接
  6. tel,电话,在移动端会弹出数字键盘
  7. color,获取颜色
  8. hidden,隐藏该表单内容
  9. image,图片按钮
  10. file,文件选择框
<form>
    <input type="text" value="HTML语法笔记">
    <br>
    <input type="text" placeholder="占位符">
</form>

textarea,多行输入框:

  • rows,输入框宽度
  • cols,输入框长度

button,按钮属性

<input type="button" value="按钮">
<button>按钮</button><!--和js配合绑定事件-->
<input type="submit" value="按钮"><!--仅用于提交表单-->

range,数值滑动条

  • min,最小值
  • max,最大值
  • step,步进值
  • value,滑动条默认起始值

number,数字输入框

  • min,最小值
  • max,最大值
  • value,滑动条默认起始值

list,输入选框,具体见datalist
checkbox,复选框,可勾可选
radio,单选框

  • name,值
  • checked,默认选中
  • value,传递出去的结果
<input type="radio" name="test"  checked>a<!--实现类似填表单选效果,同name只能用一个选中-->
<input type="radio" name="test">b
<input type="radio" name="test">c

select下拉列表

<select>
    <option>test1</option>
    <option>test2</option>
    <option>test3</option>
</select>

效果:

datalist下拉输入框

datalist需要配合input使用

    <input type="text" list="list1" value="test"/>
    <datalist id="list1">
      <option>test1</option>
      <option>test2</option>
      <option>test3</option>
    </datalist>

图片

img标签

src,图片链接,图片地址
width height高度宽度
alt备选内容,当图片内容丢失时显示的值
href跳转链接地址

<img src="xxxxx.jpg" width="80px" alt="图片丢失">

视频

video标签

src,视频链接,视频地址
width height高度宽度
controls视频控制控件
autoplay自动播放
preload预载视频,有none,auto
loop循环播放
poster视频载入时显示封面图片
muted视频静音

<vedio src="xxxxx.mp4" height="800px" controls preload="auto" poster="xxx.img"></vedio>