HTML知识点小结
- HTML格式
- HTML常用标签
- 格式化常用标签
- 常用特殊符号标签
1、HTML格式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
2. HTML标签
HTML标签 | 说明 |
---|
div | 定义HTML文档中的一个分隔区块或者一个区域部分,通常用于定义组合块级元素 |
span | 行内标签,被用来组合文档中行内元素 |
a | 定义锚,使用href属性,创建指向另一个文档的链接(或超链接);使用name或id属性,创建一个文档内部的书签 |
img | 定义HTML页面中的图像,其主要的属性:src-指定图片路径;alt-图片加载错误时的提示信息) |
ul | 无序列表 |
ol | 有序列表 |
li | 定义列表项目(lists的缩写)可用在有序列表(ol)和无序列表(ul) |
table | 定义表格,可以放表格的标题(caption)、表格行(tr)、表格列(td)等 |
form | 表单元素,能够包含input元素 |
注意:
- table元素里面包含的元素有:tr元素、td元素、th元素和caption元素。
- form元素包含的input元素主要通过其type属性进行决定类型;
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML常用标签</title>
</head>
<body>
<div>这是一个div标签</div><br>
<span>这是一个span标签</span><br>
<a href="#">锚点</a><br>
<img src="../img/picture.jpg" alt="logo"><br>
<ul>
<li>1</li>
<li>2</li>
</ul>
<ol>
<li>a</li>
<li>b</li>
</ol>
<table border="1px solid black" cellpadding="0px" cellspacing="0px">
<caption>表</caption>
<tr>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>Li</td>
<td>17</td>
</tr>
</table>
<form action="">
文本框:<input type="text"><br>
密码框:<input type="password"><br>
单选框:<input type="radio" name="number">1 <input type="radio" name="number">2<br>
复选框:<input type="checkbox">a <input type="checkbox">b <input type="checkbox">c<br>
文 件:<input type="file"><br>
按 钮:<input type="button" value="button"><br>
提 交:<input type="submit"><br>
重 置:<input type="reset"><br>
</form>
</body>
</html>
操作结果:
3. 格式化常用标签
标签 | 说明 |
---|
br | 换行符 |
hr | 水平线 |
b | 加粗 |
i | 斜体 |
pre | 预格式文本格式 |
sup | 上标显示 |
sub | 下标显示 |
p | 用于定义一个段落,会自动在其前后创建一些空白 |
h1 | 1~6级标题,块级元素 |
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>格式化</title>
</head>
<body>
水平线如下
<hr>
换行符 <b>加粗</b>
<br>
换行符<br>
<b>加粗</b>
<i>斜体</i>
<pre>
这是一段话:
第一段··· 结束。
第二段··· 结束。
总结···
</pre>
水的化学表达式为:H<sub>2</sub>O<br>
2 <sup>2</sup>=4
</body>
</html>
操作结果:
4. 常用特殊符号标签
描述 | 代码表示 | 显示结果 |
---|
空格 |  ; | |
小于 | <; | < |
大于 | >; | > |
和 | &; | & |
双引 | "; | " |
单引 | &apos; | ’ |
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特殊符号</title>
</head>
<body>
第一种:空格 <br>
空 空--其中有一个空格<br>
第二种:小于 <br>
<<br>
第三种:大于 <br>
><br>
第四种:和 <br>
&<br>
第五种:双引 <br>
"<br>
第六种:单引 <br>
'<br>
</body>
</html>
操作结果:
推荐HTML学习网站: