行内块标签

行内块标签

img标签

作用：在页面插入图片

img是一个自结束标签

四个属性

src：设置引入图片的地址(路径)

alt：当图片加载失败的时候，显示alt值 alt值通常是对图片的描述

alt值的作用：

1、给用户良好的提示功能，具有占位功能

2、可以帮助浏览器检索

 <img src='' alt="零食">

width：设置图片的宽度，只设置宽度时，高度自适应

height：设置图片的高度，只设置高度时，宽度自适应

 <img scr="tupiandizhi" alt="huahai" width="属性值" height="属性值"> ==>属性="属性值"
 <img scr="tupiandizhi" alt="huahai" style="width: 样式值 height: 样式值"> ==> 样式: 样式值

表单类标签

先创建一个表单，再用input作为表单项

 创建表单
 <form action="">
   表单项 input
   <input type="" value="" name="" id="">
   下拉框
   <select>
     <option></option>
   </select>
   内容框
   <textarea cols="列数 控制宽度" rows="行数 控制高度">
   按钮
   <button type=""></button>
 </form>

input 表单项 属性和属性值

默认样式：有边框，聚焦时也有默认边框

去除边框线方法：

border: none;==>去除边框线

outline: none;==>去除聚焦后的边框线

属性：type、value、name、placeholder

type值：text文本框、password密码框、number数字框、radio单选框，需要配合name属性使用、checkbox复选框、reset重置按钮 配合value值更改按钮名字 默认‘重置’、submit提交按钮 配合value值更改按钮名字 默认‘提交’、button 普通按钮 没有具体语义，需要程序员自己写功能，value值默认为空

value值：设置表单的值，后期结合js收集用户输入的内容

name值：设置提交给服务器的数据名称

id属性……

placeholder属性：设置提示信息

checked属性：设置选中

disabled属性：表示禁用

readonly属性：只读

下拉表单项(select)配合option使用

option标签selected属性：设置选中

 <select>
   <option>15</option>
   <option selected>14</option>==>选中的是此标签 表示下拉框默认显示的内容是 14
 </select>

内容框textarea

属性：cols、rows

cols：代表列数，用于控制内容框的宽度

rows：代表行数，用于控制内容框的高度

按钮button

普通按钮有两种写法

 <input type="button" value="按钮">==>写法一
 <button>按钮</button>==>写法二，默认属性是submit

属性：type

type：

可选值：submit 提交按钮(默认值)

reset 重置按钮

button 普通按钮

音频标签和视频标签

audio：音频标签

video：视频标签

属性：src、controls、loop

src：指向音频、视频的地址

controls属性：控制是否开始播放，默认是不播放

loop属性：控制是否循环播放