文章目录
- 安装两个常用插件
- 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="提交"/>
