Html主要内容
网页组成: 文本、图片、音频、视频、超链接等相关元素组成
web标准:结构(html)、表现(css)、行为(javaScript)
基本骨架:<html><head><title></title></head><body></body></html>
文本格式化标签(双标签):加粗(strong)、倾斜(em)、(ins)、(del)
插入图片: <img src="https://blog.csdn.net/Dongles/article/details/图片的路径" alt="替换文本" title="鼠标悬停时的提示文本">
路径:绝对路径:
<!-- 盘符开头 -->
<img src="D:\web83\day01\02-案例\baby.jpg" alt="">
<!-- 网络地址 -->
<!-- 如果绝对路径是以网络地址
必须以http://开头或者https://-->
<img src="http://www.itheima.com/images/logo.png" alt="">)
相对路径:
同级目录
方法一: 目标文件名称
方法二:./目标文件名称
下级目录
方法一: 目标文件夹/目标文件名称
方法二:./目标文件夹/目标文件名称
上级目录
上一级
../目标文件名称
上两级
../../目标文件名称
音频插入:<audio src="https://blog.csdn.net/Dongles/article/details/05-素材/music.mp3" controls autoplay loop></audio>
src 音频的播放路径(必写属性)
controls 显示播放控件
autoplay 音频加载完毕会自动播放(部分浏览器不支持)
loop 循环播放
视频标签:<video src="https://blog.csdn.net/Dongles/article/details/05-素材/video.mp4" controls width="400" autoplay muted loop></video>
src 视频的路径(必写属性)
controls 显示视频的播放控件
width:设置宽度
autoplay:视频加载完毕自动播放 需要配合muted属性实现静音播放
loop:循环播放
插入超级链接标签:<a href="https://blog.csdn.net/Dongles/article/details/链接地址">链接文本</a>
<a href="https://blog.csdn.net/Dongles/article/details/123773658">空链接</a>
target:设置连接的跳转方式
取值
_self:默认值 当前窗口跳转
_blank:保留当前窗口,从新打开新的窗口
列表标签:无序列表(默认小圆点) 有序列表 (默认前面有数字) 自定义列表(dt比dd靠左)
无序列表:ul包含多个li 【消除默认样式:list-style:none】
有序列表: ol包含多个li 【消除默认样式:list-style:none】
自定义列表:dl包含dt(靠左)和dd 【消除默认样式:通配符中的margin:0和padding:0即可消除】
表格:<table>
<tr>
<td></td>
<td></td>
...
</tr>
...
</table>
table 表格整体
tr 表格的每一行
td 单元格
表头单元格:<th>表头单元格</th> 默认加粗居中效果【写在第一行】
<caption>学生信息管理表</caption> 表格的大标题【表示表格的大标题 放在table标签里面】
表格合并:跨行合并(rowspan)或者跨列合并(colspan)【 上下合并→只保留最上的,删除其他 左右合并→只保留最左的,删除其他 】
表单:input系列:【placeholder和value区别主要是placeholder在鼠标放置后文字后自动消失】
文本框<input type="text" placeholder="占位符" >
密码框<input type="password" placeholder="占位符">
单选框
需要设置相同的name属性 实现多选一的效果
checked 默认选中
<input type="radio">
复选框
checked 默认选中
<input type="checkbox">
文件上传 <!-- multiple 多文件上传 -->
<input type="file" multiple>
提交按钮
<input type="submit" value="提交按钮">
重置按钮
<input type="reset" value="重置按钮">
普通按钮(后期配合js一起使用-)
<input type="button" value="普通按钮">
搜索
<input type="search">
<input type="text" name="取名字" value="显示内容">
button按钮
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
后期配合js一起使用-
<button type="button">普通按钮</button>
select下拉菜单
<select>
<option value="">--请选择所在城市--</option>
<option value="" selected>武汉</option>
</select>
文本域
留言板:<textarea placeholder="请您留言"></textarea>
label标签
作用:提升用户体验
使用方法①:
1.使用label标签把内容(如:文本)包裹起来
2.在表单标签上添加id属性
3.在label标签的for属性中设置对应的id属性值
使用方法②:
1.直接使用label标签把内容(如:文本)和表单标签一起包裹起来
2.需要把label标签的for属性删除即可
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbciig
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01