AfarX

A Rookie of R.

HTML学习笔记

Menu
  1. 1. 实时监控
  2. 2. html文档样式
  3. 3. 元素
    1. 3.1. 文本
    2. 3.2. 行内文本
    3. 3.3. 图像
    4. 3.4. 视频与音频
    5. 3.5. 表格
    6. 3.6. 表单
      1. 3.6.1. 信息填写
      2. 3.6.2. 复选框
      3. 3.6.3. 选择列表:
  4. 4. 网页结构

实时监控

1
npm run watch

html文档样式

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title></title>
</head>
<body>

</body>
</html>

元素

文本

h1-h6 标题
p 段落
pre 代码
ul 无序列表
ol 有序列表
.li 列表项目


dl 含描述列列表
.dt 描述名称
.dd 描述内容

行内文本

abbr 缩写
mark 高亮
del 删除
s 删除线
ins 插入
u 下划线
strong 重点
b 加粗
small 不重要
code 行内代码
span 单独包裹一段内容

图像

img 无结束标记
src 图像地址
width 图像宽度
alt 不能正常显示时显示的文字

1
<img src="a.jpg" width="500px" alt="文字描述">

视频与音频

视频
autoplay 自动播放
controls 添加控制器
poster 视频截图
width 宽度
src 地址
source 不用src,用source包裹,添加type样式
.type 文件类型
track 添加字幕
.kind 字幕类型
.src 字幕地址
.srclang 字幕语言
.label 字幕语言标签

1
2
3
4
<video controls poster="shortcut" width="410" >
<source src="a.mp3" type="video/mp3">
<track kind="subtitles" src="a.vtt" srclang="en" label="English">
</video>

表格

table 表格
.thead 表格头部
..tr 一行
…th 一个单元格
.tbody 表格主体
..tr 一行
…td 一个单元格
.tfoot 表格底部
..tr 一行
…td 表格内容

1
<td colspan="2">1-2-3</td>

表单

信息填写

form
.label 标签
.input 文本框
..placeholder 默认显示
.button 按钮
..type reset/submit/button

1
2
3
4
5
<form>
<label for="username">用户名</label>
<input type="text" placeholder="用户名" value="nihai">
<button type="submit">提交</button>
</form>





复选框

.type
checkbox 多选
radio 单选

单选实例:







选择列表:

selected为默认选择



网页结构

能够划分出一个outline大纲
header 页头
article 文章
footer 页脚
nav 导航
aside 边栏
section 块