前端与HTML
这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
前端技术栈
- JavaScript 行为
- css 样式
- HTML 内容
前端关注的方面
- 美观
- 功能
- 无障碍
- 兼容
- 体验
- 安全
常用的标签
标题
h1-h6
列表
有序 ol->li
有序 ul->li
自定义 dl->dt[标题]->dd[值]
链接
<a href="#" targrt="_blank"></a>
多媒体
图片
<img src="" alt="图片未显示时展示" width=""/>音频
<audio src="" controls></audio>视频
<video src="" controls></video>
输入
input 表单输入标签
- placeholder 文本提示
- type 内容
- checkbox 多选
- radio 单选
- name 名字
- range 滚动条
- number 数字
- data 日期
- min 最小值
- max 最大值
- list 可用datalist标签配合作为输入提示
textarea 多行文本标签
select 下拉选择标签
- option 可选择内容
文本
p 行标签
blockquote 长引用
- cite 源地址
cite 短引用 章节
q 短引用 内容
code 代码引用
pre->code 代码多行引用
strong 加粗 重点强调
em 语气强调
内容的划分
header
- nav
main
- article
- article
- ...
aside
footer
注意
注意语义化
- 许多标签具有语义 书写时要注意
传达内容而不是样式
实践练习例子
表格
<!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>
<style>
table {
width: 500px;
height: 149px;
}
table,td,th {
border: 1px solid red;
/* 折叠相邻的边框 */
border-collapse: collapse;
font-size: 14px;
/* 文本对齐 */
text-align: center;
}
</style>
</head>
<body>
<!-- cellspacing 边框间距 -->
<table align="center" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>鬼吹灯</td>
<td>up</td>
<td>456</td>
<td>123</td>
<td><a href="#">贴吧</a></td>
</tr>
<tr>
<td>01</td>
<td>鬼吹灯</td>
<td>down</td>
<td>456</td>
<td>123</td>
<td><a href="#">贴吧</a></td>
</tr>
<tr>
<td>01</td>
<td>鬼吹灯</td>
<td>up</td>
<td>456</td>
<td>123</td>
<td><a href="#">贴吧</a></td>
</tr>
<tr>
<td>01</td>
<td>鬼吹灯</td>
<td>down</td>
<td>456</td>
<td>123</td>
<td><a href="#">贴吧</a></td>
</tr>
</tbody>
</table>
</body>
</html>