HTML基础
语法
Web标准：各个浏览器显示效果相同
| 语言 | 说明 |
|---|---|
| HTML | 文字、图片等页面元素 |
| CSS | 网页元素的外观和位置等页面样式 |
| JS | 页面的动态和交互效果 |
页面固定结构
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
标签
| 标签 | 说明 |
|---|---|
| b/strong | 加粗 |
| u/ins | 下划线 |
| i/em | 倾斜 |
| s/del | 删除线 |
| h1 | 一级标题 |
| br | 回车 |
| hr | 分割线 |
| p | 分段 |
图片
<img src="<./>文件名+后缀名" alt="图片显示失败的替换文本" title="鼠标悬停的提示文本"> width="200" heigth="100"
- 空格隔开，属性之间没有顺序之分
- heigth width只设置一个，等比例缩放；同时设置两个，改变比例
- 相对路径：下级文件夹/文件名+后缀名；../返回上一级
音频视频
| 属性 | 说明 |
|---|---|
| src | 路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放，部分浏览器不支持；谷歌浏览器配合muted实现静音播放 |
| loop | 循环播放 |
超链接
<a href="https://www.baidu.com/">跳转字符</a><a href="路径">跳转字符</a><a href="#">跳转字符</a> 空链接
- targrt：
_self覆盖；_blank新建。
列表
无序列表ul 有序列表ol
<ul>
<li><!--ul只能包含<li>标签--></li>
<li><!--<li>标签可以包含任意内容--></li>
</ul>
自定义列表
<dd> <!--dl标签只能包含dd/dt-->
<dt>
<dd><!--dd默认有缩进--></dd>
</dt>
</dd>
表格
<table border="1" width="500">
<caption><strong>加粗标题</caption></strong>
<thead>
<tr>
<th>第一列</td>
<th>第二列</td>
<th>第三列</td>
</tr>
</thead>
</tbody>
<tr>
<td>(1,1)</td>
<td>(1,2)</td>
<td>(1,3)</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>(2,1)</td>
<td>(2,2)</td>
<td>(2,3)</td>
</tr>
</tfoot>
</table>
| table属性 | 效果(推荐CSS) |
|---|---|
| border | 边框宽度 |
| width | |
| heigth |
| 标签 | 说明 |
|---|---|
| th | tr内部，替换td，列标题默认居中加粗 |
| caption | 表格标题，table内部 |
表格结构标签，包裹hr，可省略
thead,tbody,tfoot
合并单元格
- 左上原则确定保留单元格，删除其他
- 跨行合并rowspan,跨列合并colspan
`内容 - 不同结构标签不能合并
表单
input单标签
| type属性值 | 说明 |
|---|---|
| text | 输入单行文本 |
| password | 密码 |
| radio | 单选框 |
| checkbox | 多选框 |
| file | 文件选择 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| button | 普通按钮，配合js添加功能 |
<!-- 占位符placeholder -->
密码：<input type="text" placeholder="内容">
<!-- 复选框（多选一）name -->
性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女
<!-- 默认选择checked -->
性别：<input type="radio" name="sex" checked>男 <input type="radio" name="sex">女
<!-- 上传多个文件multiple -->
选择文件：<input type="file" multiple>
<!-- button相关按钮需要表单域form -->
<!-- button相关按钮文字内容value -->
<form action=>
<input type="button" value="">
</form>
button双标签
<button type="reset"></button>
select下拉菜单双标签
<select>
<!-- 默认选择selected -->
<option selected>内容1</option>
<option>内容2</option>
</select>
textarea文本域双标签
cols:文本域可见宽度
rows:文本域可见行数
右下角可以拖拽大小，推荐CSS设置
label标签
- label把内容裹起来，表单标签添加id属性，label标签的for属性设置为对应的id属性值
- 用label标签把内容和表单一起包裹，label的for属性删除即可
性别：<input type="radio" name="sex" checked id="x"> <label for="x">男</label> <label><input type="radio" name="sex">女</label>
语义化标签
无语义双标签
div:一行显示一个
span:一行显示多个
有语义双标签
HTML5，有语义的布局标签供手机端开发者使用
header 头部;nav 导航;footer 底部;aside 侧边栏;section 区块;article 文章;
字符实体
空格