HTML基础知识

最新推荐文章于 2025-05-30 22:33:54 发布

霡霂小雨

最新推荐文章于 2025-05-30 22:33:54 发布

阅读量377

点赞数 1

文章标签： html html5 css

本文链接：https://blog.youkuaiyun.com/weixin_43375983/article/details/121257075

版权

本文详细介绍了HTML的基本结构和常用标签，包括<head>和<body>的区别，单标签如<br/>和<hr/>，文字样式标签<font>，段落<p>，标题<hn>，图像<img>，超链接<a>，表格<table>等。此外，还提到了HTML中的注释，字符实体，列表<ol>和<ul>，以及音视频标签<audio>和<video>。内容覆盖了HTML的基础语法和常见元素，是初学者入门的良好参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、指定开始标签和结束标签<html></html>

2、Html包含两部分：

Head：用来设置HTML页面的属性和配置信息

Body：需要显示在网页上的内容

3、单标签：换行<br/> 水平线<hr/>

4、HTML中的标签不区分大小写

5、注释

6、头标签 <head> </head>

7、标题标签 <title> </title>

8、超链接设置 <base />

9、设置和页面相关的一些内容 <meat> </meat>

10、引入外部css文件 <link />

11文字标签 <font> </font> 属性size和color ，size的取值范围为1-7，color的方式写颜色单词(color=’blue’)和16进制三原色(color=’#8a2be2’)和rgb方式(color=’rgb(0,34,56)’)和rgba方式(color=’rgb(0,23,23,0.5))0.5代表透明度，取值范围为0-255

12、段落标签<p> </p> 特点：会自动换行，在其中可嵌套其他标签

13、水平线标签<hr/> 属性：size水平线宽度，color水平线颜色

14、标题标签<hn> </hn> n的取值1-6

15、图像标签<img /> 属性src:图片路径 width：图片显示的宽带 height：图片显示的高度alt:图片上文字提示 title:鼠标悬浮标题

16、超链接标签<a> </a>

1）连接资源--属性href:表示需要连接到的资源的路径【类似于img中图片的路径】，target：设置打开的方式，默认在当前窗口中打开，_blank：在一个新的窗口中打开指定资源，_self：在当前窗口中打开指定资源

2）定位资源-a回到顶部，b定位到指定页面的指定段落

17、块标签<pre></pre>：原样输出，<div></div>：会自动换行，<span></span>：和div类似，不会自动换行

18、字符实体空格：  小于号<:< 大于号>: > 乘号：× 除号：÷ 版权©:&copy；注册®：&reg；

19、自定义列表 <dl> </dl> 列表范围【父标签】

<dt></dt>上层内容【子标签】

<dd></dd>下层内容【子标签】

20、有序列表 <ol></ol>有序列表范围【父标签】

<li></li>具体内容【子标签】属性type：设置排序方式，默认阿拉伯数字，还可以设置字母和罗马数字

21、无序列表<ul></ul>无序列表范围【父标签】

<li></li>具体内容【子标签】属性 type：圆点【disc】，空心圆【circle】，方框【square】，默认为disc

22、音视频标签(H5特有标签)

音频：<audio></audio>

视频：<video></video>

23、表格标签<table></table>表格的范围

<tr></tr>行

<td></td>单元格

<th></th>加粗单元格

<caption></caption>表格标题

<!--四行三列表格-->
<table border="1"  bordercolor="blue" cellspacing="0" width="300px" height="200px">
    <caption>人员信息表</caption>
    <tr align="center">
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr align="left">
        <td>小红</td>
        <td>女</td>
        <td>3</td>
    </tr>
    <tr align="right">
        <td>小白</td>
        <td>男</td>
        <td>4</td>
    </tr>
    <tr>
        <td>小黑</td>
        <td>男</td>
        <td>2</td>
    </tr>
</table>

文字默认做对齐，border有无边框，align对齐方式

展示效果: