HTML (总结黑马的)

<br>换行

<hr>水平线

div 独占一行

span 不换行

header 网页头部

nav 网页导航

footer 网页底部

aside 网页侧边栏

section 网页区块

article 网页文章

&nbsp; 空格

&lt; 小于号

&gt; 大于号

图片:

<img src="./cat.jpg" alt="替换文本" title="提示文本"> 替换文本是图片没有显示的时候显示对应的文字;提示文本是鼠标悬停上面的时候显示的文字

超链接:

<a href="https://www.baidu.com">跳转到百度</a>

href 超链接的跳转地址

开发初期不确定跳转地址,#表示空链接,页面不会跳转,在当前页面刷新一次

target="_blank" 实现在新窗口打开页面

音频:

<audio src="音频的 URL"></audio> 支持这三种格式:MP3、ogg、wav

controls 显示音频播放面板

loop 循环播放

autoplay 自动播放(为提升用户体验,浏览器一般会禁用自动播放功能)

视频:

<video src="视频的 URL"></video> 支持格式:MP4、Ogg、WebM

controls 显示音频播放面板

loop 循环播放

muted 静音播放

autoplay 自动播放(为提升用户体验,浏览器支持在静音状态下自动播放)

列表:(有三种)

无序列表: ul 申明是无序列表 li:写列表条目 (最总效果类似于微博热搜的展示)

<ul>

<li>第一项</li>

<li>第二项</li>

<li>第三项</li> ......

</ul>

有序列表: 标签:ol 嵌套 li,ol 是有序列表,li 是列表条目。 类似于word的缩进

<ol>

<li>第一项</li>

<li>第二项</li>

<li>第三项</li> ......

</ol>

定义列表: 标签:dl 嵌套 dt 和 dd,dl 是定义列表,dt 是定义列表的标题,dd 是定义列表的描述 / 详情 类似于苹果官网最下面的那个效果

<dl>

<dt>列表标题</dt>

<dd>列表描述 / 详情</dd> ......

</dl>

表格: 标签:table 嵌套 tr,tr 嵌套 td / th

table 表格

tr 行

th 表头单元格

td 内容单元格

提示:在网页中,表格默认没有边框线,使用 border 属性可以为表格添加边框线。

表格结构标签:

thead 表头内部 表格头部内容

tbody 表头主体 主要内容区域

tfood 表格底部 汇总信息区域

合并单元格:

rowspan 跨行合并 保留最上面的单元格

colspan 跨列合并 保留最做的单元格

表单:

<input type="..." >

<input type="..." placeholder="提示信息">

placeHoder 占位文本

text 文本框,用于输入单行文本

password 密码框

radio 单选框

name 控件名称 (控件分组,同组中只能选中一个(单选功能))

checked 默认选中 属性名和属性值相同时,简写为一个单词

checkbox 多选框

checked 默认选中

file 上传文件

multiple 上传文件时实现多选

<input type="file" multiple> 默认情况下,文件上传表单控件只能上传一个文件,添加 multiple 属性可以实现文件多选功能。

<input type="radio" name="gender" checked> 男

<input type="radio" name="gender"> 女

下拉菜单: 标签:select 嵌套 option,select 是下拉菜单整体,option是下拉菜单的每一项。 默认显示第一项,selected 属性实现默认选中功能

<select>

<option>北京</option>

<option>上海</option>

<option>广州</option>

<option>深圳</option>

<option selected>武汉</option>

</select>

文本域:

<textarea>默认提示文字</textarea>

• 实际开发中,使用 CSS 设置 文本域的尺寸

• 实际开发中,一般禁用右下角的拖拽功能

lable标签:

写法一:

<input type="radio" id="man">

<label for="man">男</label>

写法二:

<label><input type="radio"> 女</label>

按钮:

<button type="">按钮</button>

submit 提交按钮,点击之后提交数据到后台

reset 重置按钮,点击后表单控件恢复默认值

button 普通按钮,默认没有功能,一般配合JS使用

拓展:属性名和属性值相同时,可以简写为一个单词

相关推荐
ji_shuke11 分钟前
远程排查 Web 系统问题:如何导出 HAR 文件协助定位
前端·问题排查
程序员爱钓鱼39 分钟前
Rust String 与 &str 详解:字符串所有权、借用与转换
前端·后端·rust
码农学院44 分钟前
GEO与SEO协同:从传统搜索到生成式搜索的平滑迁移路径
服务器·前端·python
咩咩啃树皮9 小时前
第40篇:Vue3组件化开发精讲——组件拆分、复用、父子通信、工程化架构
java·前端·架构
阳光是sunny9 小时前
LangGraph中的Reducer是什么
前端·人工智能·后端
触底反弹9 小时前
一文搞懂 Tailwind CSS 弹性布局:从原理到实战
前端·css·html
阳光是sunny9 小时前
从链到图:LangGraph 入门基础全解析
前端·人工智能·后端
小林ixn10 小时前
从 ??= 到 onKeyDown:一个 React 组件的“自我修养”
前端·javascript·react.js
REDcker10 小时前
显示分辨率标准对照详解
前端·网络·分辨率·显示·屏幕
এ慕ོ冬℘゜11 小时前
前端实战:jQuery 多条件联合搜索(标题模糊查询 + 日历时间段筛选)
前端·javascript·jquery