个人笔记
SongPinru 的小仓库
结构
HTML基本同xml
主要有两个部分
head和body组成
head里主要放元数据
body才是显示的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
head
可以使用的标签
<!--标题-->
<title></title>
<!--css样式或css引用地址-->
<style></style>
<!--元数据-->
<meta>
<!--资源链接-->
<link>
<!--脚本，js-->
<script></script>
<!--禁用脚本-->
<noscript/>
<!--页面的默认链接地址uri-->
<base/>
body
| 标签 | desc |
|---|---|
| b | 加粗 |
| i | 斜体 |
| u/ins | 下划线 |
| s/del | 删除线 |
| em | 斜体加重 |
| strong | 粗体加重 |
| big | 大号字 |
| small | 小号字 |
| sup | 上标 |
| sub | 下标 |
HTML 分组标签
块级元素起新行
内联元素不起新行
| 标签 | 描述 |
|---|---|
| div | 定义了文档的区域，块级 (block-level) |
| span | 用来组合文档中的行内元素， 内联元素(inline) |
img
图片标签
<img src="./main/resources/数据流程.png" alt="图片" title="悬停文字"width="300" height="300" border="1" >
video
视频标签
audio
音频标签
链接标签
href:链接，不加协议就是相对链接，#就是锚连接
锚链接#前面是资源地址，后面是标签id
target：默认是本网页跳转，blank是新页面
<a href="https://www.baidu.com" target="_blank"></a>
列表
无序列表（unoderlist）
li：list
- kkk
- lll
- mmm
有序列表（orderlist）
- 111
- 222
- 333
自定义列表（define list）
dt：define term
dd：define detail
- drink
- coffee
- coffee
- coffee
- kkk
- 121
- 121
- 121
- 121
表格
table
tr：table row
td：table data
th：table header
span：跨行或者跨列
| sss | sss | sss | sss |
|---|---|---|---|
| xxx | xxx | xxx | xxx |
| xxx | xxx | xxx | xxx |
HTML 表单标签
| 标签 | 描述 |
|---|---|
| form | 定义供用户输入的表单 |
| input | 定义输入域 |
| textarea | 定义文本域 (一个多行的输入控件) |
| label | 定义了 元素的标签，一般为输入标题 |
| fiedset | 定义了一组相关的表单元素，并使用外框包含起来 |
| legend | 定义了 <fieldset> 元素的标题 |
| select | 定义了下拉选项列表 |
| optgroup | 定义选项组 |
| option | 定义下拉列表中的选项 |
| button | 定义一个点击按钮 |
| datalist | 指定一个预先定义的输入控件选项列表 |
| keygen | 定义了表单的密钥对生成器字段 |
| output | 定义一个计算结果 |
tinput:type
button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Iframe
内嵌一个panel，展示不同的东西
target和name绑定
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<br>
<a href="//www.runoob.com" target="iframe_a">RUNOOB.COM</a>
网页结构
| 元素名 | desc |
|---|---|
| header | 头部内容 |
| footer | 脚部内容 |
| section | 页面中的一个独立区域 |
| article | 文章内容 |
| aside | 侧边栏 |
| nav | 导航栏 |