本文最后更新于 317 天前，其中的信息可能已经有所发展或是发生改变。
常用文本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>htmlLearn
</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>
这是一个段落hhh
<b>这是字体加粗</b>,
<i>斜体</i>,
<u>下划线</u>,
<s>不是</s>
</p>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<table border="1">
<tr>
<th>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
</tr>
<tr>
<td>元素1</td>
<td>元素1</td>
<td>元素1</td>
</tr>
<tr>
<td>元素21</td>
<td>元素21</td>
<td>元素21</td>
</tr>
</table>
</body>
</html>
HTML标签属性
基本语法
<开始标签 属性名="属性值">
- 每个HTML元素都可以具有不同的属性
- 属性名称不区分大小写,属性值对大小写敏感
适用于大多数HTML元素的属性
| 属性 | 描述 |
|---|---|
| class | 为HTML元素定义一个或多个类名(类名从样式文件引入) |
| id | 定义元素唯一的id |
| style | 规定元素的行内样式 |
例如
<h1 id="title">hi</h1>
<div class="nav-bar">hi</div>
<h2 class="nav-bar">hi</h2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML属性</title>
</head>
<body>
<a href="http://150.109.196.14/">这是一个超链接</a>
<br>//下一段
<a href="http://150.109.196.14/" target="_blank">这是一个超链接</a>
<hr>//分割线
<img src="example.png" alt="">
<img src="http://150.109.196.14/wp-content/uploads/2024/01/author-380x220.jpg" alt="">
<img src="http://150.109.196.14/wp-content/uploads/2024/01/author-380x220.jpg" alt="" width="400" height="300">
<img src="null.png" alt="该图片无法显示">
</body>
</html>
HTML区块-块元素与行内元素
块元素(block)
例如段落,标题,列表,表格等.
- 块级元素通常会从新行开始,并占据整行的宽度,因此他们会在页面上呈现为一块独立的内容块
- 可以包含其他块级元素和行内元素
- 常见的块级元素包括
<div>,<p>,<h1>~<h6>,<ul>,<ol>,<li>,<table>,<form>等.
行内元素(inline)
- 行内元素通常在同一行内呈现,不会独占一行.
- 它们只占据其内容所需的宽度,而不是整行的宽度
- 行内元素不能包括块级元素,但可以包含其他行内元素
- 常见的行内元素包括
<span>,<a>,<strong>,<em>,<img>,<br>,<input>等
<div>常用于构建页面结构
<span>用于内联样式化文本,常与css,js一起使用
HTML表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML表单</title>
</head>
<body>
<form>
<label for="usr">usr:</label>
<input id="usr" type="text" placeholder="输入">
<span>passwd:</span>
<input type="password" value="输入">
<br>
<label for="">性别:</label>
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<br>
<label for="hobby">爱好</label>
<input type="checkbox" name="hobby" id="hobby">唱歌
<input type="checkbox" name="hobby" id="hobby">跳舞
<input type="checkbox" name="hobby" id="hobby">RAP
<br>
<input type="submit" value="上传">
</form>
<form action=""></form>
</body>
</html>
