文章目录
- 安装两个常用插件
- HTML常用标签
- 定义文档类型DOCTYPE
- 网页的结构html/head//title/body/div
- 标题h1/h2/h3/h4/h5
- 分割线hr
- 段落 p
- 列表ul/li，ol/li
- 超链接a
- 文本span
- 图片img
- 按钮button
- 表格table（table、tr、th、td）
- 表单form
安装两个常用插件
html preview与open in browser
HTML常用标签
定义文档类型DOCTYPE
网页的结构html/head//title/body/div
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>Html常用标签</title></head><body></body></html>
标题h1/h2/h3/h4/h5
<h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是三级标题</h6>
分割线hr
<h2>下面是分割线</h2><hr><h2>上面是分割线</h2>
段落 p
<p>这是一个段落，是HTML（HyperText Markup Language，超文本标记语言）中的一个元素，用于定义HTML文档中的段落。</p><p>当你在HTML文档中使用标签时，它告诉浏览器：“这是一个段落的开始和结束”。浏览器会在段落的开始和结束之间添加一些垂直的间距（margin），以区分不同的段落。</p>
列表ul/li，ol/li
<ol><li>打开你的电脑。</li><li>启动你最喜欢的浏览器。</li><li>访问你最喜欢的网站。</li><li>享受你的在线时光。</li></ol><ul><li>苹果</li><li>香蕉</li><li>橙子</li><li>葡萄</li></ul>
超链接a
<!-- 在本窗口打开链接 -->
<a href="https://www.example.com" target="_self">在本窗口打开 Example.com</a>
<br>
<!-- 在新窗口打开链接 -->
<a href="https://www.example.org" target="_blank">在新窗口打开 Example.org</a>
文本span
标签是一个内联元素，用于对文档中的一小块内容进行分组或应用样式。它本身不会带来任何特殊的视觉效果，但它可以与 CSS 一起使用来修改内容的外观。
<head><title>Span 标签示例</title><style>/* 使用 CSS 为 span 标签添加样式 */.highlight {color: red; /* 文本颜色 */font-weight: bold; /* 字体加粗 */}</style>
</head>
<body><p>这是一段文本，其中包含了一个 <span class="highlight">高亮显示</span> 的单词。</p>
</body>
图片img
<img src="images/hn.png" width="50%" height="auto">
按钮button
<button>我是一个按钮</button>
表格table（table、tr、th、td）
<table border="1"><tr><th>序号</th><th>姓名</th><th>成绩</th></tr><tr><td>1</td><td>张三</td><td>1000</td></tr></table>
表单form
</head><body><form method="post" action="/add">姓名：<input type="text" name="name" /><br>姓别：<select><option name="boy">男</option><option name="girl">女</optin></select><br><br><br>个人简介：<textarea name="description"></textarea><br><br>科目：语文<input type="radio" name="subjects" value="语文">英语<input type="radio" name="subjects" value="英语"><br><br>爱好：篮球<input type="checkbox" name="hobby" value="篮球">足球<input type="checkbox" name="hobby" value="足球">乒乓球<input type="checkbox" name="hobby" value="乒乓球"><br><br><input type="submit" name="submit" value="提交" /></form></body>
- 纯文本输入input
姓名：<input type="text" name="name"/>
- 下拉select
姓别：<select><option name="boy">男</option><option name="girl">女</optin></select>
</body>
- 区域输入textarea
个人简介：<textarea name="description"></textarea>
- 单选radio
科目：语文<input type="radio" name="subjects" value="语文">英语<input type="radio" name="subjects" value="英语">
- 多选checkbox
爱好：篮球<input type="checkbox" name="hobby" value="篮球">足球<input type="checkbox" name="hobby" value="足球">乒乓球<input type="checkbox" name="hobby" value="乒乓球">
- 提交submit
<input type="submit" name="submit" value="提交"/>
