【前端基础篇】HTML零基础速通1：https://developer.aliyun.com/article/1617295
表格标签
基本使用
- table 标签: 表示整个表格
- tr: 表示表格的一行
- td: 表示一个单元格
- th: 表示表头单元格. 会居中加粗
- thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
- tbody: 表格得到主体区域.
table 包含 tr , tr 包含 td 或者 th.
表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置.
这些属性都要放到 table 标签中.
align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)
border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框.
cellpadding: 内容距离边框的距离, 默认 1 像素
cellspacing: 单元格之间的距离. 默认为 2 像素
width / height: 设置尺寸.
注意, 这几个属性, vscode 都提示不出来.
<table border="1" width="500" height="300" cellspacing="0" cellpadding="50" align="left"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td>3</td> </tr> <tr> <td>李四</td> <td>男</td> <td>4</td> </tr> <tr> <td>王五</td> <td>女</td> <td>5</td> </tr> </tbody> </table>
合并单元格
- 跨行合并:
rowspan="n" - 跨列合并:
colspan="n"
步骤：
- 先确定跨行还是跨列
- 找好目标单元格(跨列合并, 左侧是目标单元格; 跨行合并, 上方是目标单元格)
- 删除的多余的单元格
<table align="center" border="10" cellpadding="20" cellspacing="0" width="500" height="500"> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr> <td>张三</td> <td colspan="2">男</td> </tr> <tr> <td>李四</td> <td>女</td> <td>11</td> </tr> </table>
列表标签
主要使用来布局的. 整齐好看.
- 无序列表[重要] ul li
- type决定样式
disc //默认黑圆圈 square //方形 circle //空心圆圈
- 有序列表[用的不多] ol li
- 自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的.
自定义列表(参考小米官网下方)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>这是无序列表</h1> <ul type="square"> <li>这是内容1</li> <li>这是内容2</li> <li>这是内容3</li> </ul> <h1>这是有序列表</h1> <!-- a 表示小写英文字母编号 A 表示大写英文字母编号 i 表示小写罗马数字编号 I 表示大写罗马数字编号 1 表示数字编号（默认） --> <ol type="a" start="2"> <li>这是有序列表1</li> <li>这是有序列表2</li> <li>这是有序列表3</li> <li>这是有序列表4</li> </ol> <h1>这是自定义列表</h1> <dl> <dt> 自定义列表显示内容 <dd>自定义列表内容1</dd> <dd>自定义列表内容2</dd> <dd>自定义列表内容3</dd> </dt> </dl> </body> </html>
表单标签
表单是让用户输入信息的重要途径.
分成两个部分:
- 表单域: 包含表单元素的区域. 重点是
form标签. - 表单控件: 输入框, 提交按钮等. 重点是
input标签.
form标签
<form action="test.html"> ... [form 的内容] </form>
描述了要把数据按照什么方式, 提交到哪个页面中.
input标签
各种输入控件, 单行文本框, 按钮, 单选框, 复选框.
- type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
- name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的name才能多选一.
- value: input 中的默认值.
- checked: 默认被选中. (用于单选按钮和多选按钮)
- maxlength: 设定最大长度.
- 文本框
<input type="text">
- 密码框
<input type="password">
- 单选框
性别: <input type="radio" name="sex">男 <input type="radio" name="sex" checked="checked">女
注意: 单选框之间必须具备相同的 name 属性, 才能实现多选一 效果.
- 复选框
爱好: <input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">打游戏
- 普通按钮
<input type="button" value="我是个按钮">
当前点击了没有反应. 需要搭配 JS 使用：
<input type="button" value="我是个按钮" onclick="alert('hello')">
- 提交按钮
<form action="test.html"> <input type="text" name="username"> <input type="submit" value="提交"> </form>
提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送
- 清空按钮
<form action="test.html"> <input type="text" name="username"> <input type="submit" value="提交"> <input type="reset" value="清空"> </form>
清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置.
- 选择文件
<input type="file">
点击选择文件, 会弹出对话框, 选择文件.
label标签
搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.
- for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)
<label for="male">男</label> <input id="male" type="radio" name="sex">
select标签
下拉菜单
<select> <option>北京</option> <option>上海</option> </select>
注意! 可以给默认选项
option中定义selected="selected"表示默认选中.
<select> <option>--请选择年份--</option> <option selected="selected">1991</option> <option>1992</option> <option>1993</option> <option>1994</option> <option>1995</option> </select>
textarea标签
文本域标签，又称文本区，即有滚动条的多行文本输入控件
<textarea rows="3" cols="50"> </textarea>
文本域中的内容, 就是默认内容, 注意, 空格也会有影响.
rows 和 cols 也都不会直接使用, 都是用 css 来改的.
无语义标签
div 标签, division 的缩写, 含义是分割
span 标签, 含义是跨度
就是两个盒子. 用于网页布局
- div 是独占一行的, 是一个大盒子.
- span 不独占一行, 是一个小盒子.
<div> <div> <span>吃饭</span> <span>睡觉</span> <span>玩游戏</span> <span>运动</span> </div> <div>吃饭</div> <div>睡觉</div> <div>玩游戏</div> <div>运动</div> </div>
HTML特殊字符
html 标签就是用 < > 表示的. 因此内容里如果存在 < > , 就会发生混淆.
类似特殊的字符在 html 文件中是不能直接表示的, 例如:
空格:  
小于号: <
大于号: >
按位与: &
参考内容：
Emmet 快捷键
- 快速输入标签
input[tab]
- 快速输入多个标签
div*3[tab]
- 标签带id
div#sex[tab]
- 标签带类名
div.sex[tab]
- 标签带子元素
ul>li*3[tab]
- 标签带兄弟元素
span+span
- 标签带内容
div{hello}
- 标签带内容(带编号)
div{$.hello)
除此之外还有很多，用着就熟悉了
HTML参考文档
HTML - MDN Web 文档术语表：Web 相关术语的定义 | MDN (mozilla.org)
补充：
图标查找网站：iconfont
以上就是关于【前端基础篇】HTML基础速通的内容啦，各位大佬有什么问题欢迎在评论区指正，您的支持是我创作的最大动力！❤️
