【前端】HTML基础标签讲解

HTML知识点小结

  1. HTML格式
  2. HTML常用标签
  3. 格式化常用标签
  4. 常用特殊符号标签
1、HTML格式
<!--声明HTML-->
<!DOCTYPE html>
<!--HTML-->
<html>
<!--HTML头信息-->
<head>
    <!-- meta格式 -->
    <meta charset="UTF-8">
    <!-- title头名称 -->
    <title></title>
</head>
<!--HTML主体部分-->
<body>
<!--HTML主题内容-->
</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>&nbsp;&nbsp;&nbsp;件:<input type="file"><br>&nbsp;&nbsp;&nbsp;钮:<input type="button" value="button"><br>&nbsp;&nbsp;&nbsp;交:<input type="submit"><br>&nbsp;&nbsp;&nbsp;置:<input type="reset"><br>
</form>
</body>
</html>
操作结果:

HTML常用标签

3. 格式化常用标签
标签说明
br换行符
hr水平线
b加粗
i斜体
pre预格式文本格式
sup上标显示
sub下标显示
p用于定义一个段落,会自动在其前后创建一些空白
h11~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. 常用特殊符号标签
描述代码表示显示结果
空格&nbsp;
小于&lt;<
大于&gt;>
&amp;&
双引&quot;"
单引&apos;
实例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊符号</title>
</head>
<body>
第一种:空格 <br>&nbsp;空--其中有一个空格<br>
第二种:小于 <br>
&lt;<br>
第三种:大于 <br>
&gt;<br>
第四种:和 <br>
&amp;<br>
第五种:双引 <br>
&quot;<br>
第六种:单引 <br>
&apos;<br>
</body>
</html>
操作结果:

特殊符号

推荐HTML学习网站:
https://www.w3cschool.cn/html5/ 全面、详细
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值