这是我参与「第四届青训营 」笔记创作活动的的第2天
-
定义: HyperText Markup Language 超文本 标记语言
-
语法:
- 一般标签和属性都是用小写字母
- 属性一般用双引号
- 某些属性可以省略
- 空标签不用闭合
-
body里的标签 header: 页头 nav:导航
main :主体 article: 文章
asdie: 边
footer: 页底
框架
<!doctype html> 告诉Web浏览器 页面使用了哪种HTML版本
<html> 所有标签都在html标签内
<head> 不会显示在主页面内
<meta charset="UTF-8"> 编码类型
<title> 页面标题 </title> 页面标题
</head>
<body>
体
</body>
标签
标题
<h1>一级标题</h1>
<h2>二级标题</h2>
列表
<ol> order list有序列表, 默认显示123
<li>第一名</li>
<li>第二名</li>
<li>第三名</li>
</ol>
<ul>
<li>苹果</li> unoder list无序列表, 显示为○
<li>香蕉</li>
<li>西瓜</li>
</ul>
<dl> definition list定义列表
<dt>导演:</dt> definition title定义标题(靠最左)
<dd>张三</dd> definition description定义标题
<dt>演员:</dt>
<dd>张一</dd>
<dd>张二</dd>
</dl>
链接和媒体
<a href="www.baidu.com"> 跳转目标
百度 显示汉字
</a>
<a href="www.baidu.com"
target="_blank"> 新窗口打开
百度
</a>
<img
src="...." 图片位置
alt="this is" 不加载时显示的文字
width = "400" 宽度
/>
<audio 也可以写成vedio
src="..."
controls 显示进度条等
> </audio>
输入
<input placeholder="输入你的名字"> 默认显示的文本
<input type="range"> 拖动条
<input type="number" min="1" max="10"> 有范围的数字
<input type="data" min="2022-7-24"> 日期
<textarea>Hey</textarea> 长文本框
<p>
<label><input type="radio" name="水果"/> 东西1 </label> 东西1和东西2都是水果
<label><input type="radio" name="水果" />东西2 </label> 所以只能选一个
</label>
</p>
<p>
<label><input type="checkbox" name="水果"/> 东西1 </label> 可以多选
<label><input type="checkbox" name="水果" />东西2 </label>
</label>
</p>
<p>
<select> 下拉菜单
<option>物品1</option>
<option>物品2</option>
<option>物品3</option>
</select>
</p>
文本格式
<blockquote cit="www.baidu.com"> 长引用
<p>一般标签和属性都是用小写字母属性一般用双引号某些属性可以省略空标签不用闭合
</p>
</blockquote>
<p> 我最喜欢的书是<cite>无</cite></p> 短引用
<p> 我最喜欢的书是<q>无</q></p> 短引用
<p> 我最喜欢的书是<code>int main</code></p> 代码引用
<p> 我最喜欢的书是<strong>无</strong> </p> 加粗
<p> 我最喜欢的书是<em>无</em> </p> 斜体
