HTML复习总结

最新推荐文章于 2022-10-28 20:15:08 发布

一个狮子座程序员

最新推荐文章于 2022-10-28 20:15:08 发布

阅读量975

点赞数 2

分类专栏：笔记文章标签： html html5

本文链接：https://blog.youkuaiyun.com/weixin_44031282/article/details/118424105

版权

本文全面总结HTML基础知识，包括HTML的概念、标签、属性、样式、列表、表格、块级元素、类与id、文件路径、内联框架、头部元素、表单元素等，深入探讨了各种元素的使用方法和注意事项，是HTML学习者的必备参考资料。

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

文章目录

概念

HTML是一种超文本标记语言，是用于创建网页的标准标记语言。
注意：
· HTML不是一种编程语言，而是一种标记语言。
· 标记语言是一套标记标签 (markup tag)
· HTML 使用标记标签来描述网页
· HTML 文档包含了HTML 标签及文本内容
· HTML文档也叫做 web 页面

html的标签（元素）

· 一般HTML的标签时成对出现：

<p> 这是一段内容</p> 			 // 这是段落。
<h1> 这里时一级标题 </h1>  		 // 这是标题，html中一共分了六级标题
<body> 这是网页的主体内容 </body>  // 这是网页的全部可见的内容。
<head>t头部标签</head>  	 // 头部标签，主要时对整个网页的说明，和标题。
<html>网页的开始结束标签</html>// 这个标签时整个网页的开始和结束标签

注意：在使用成对标签的时候，不要忘了结束符，否则会发生解析错误。

· HTML也存在这一些不成对的标签：

<meta> // 这是网页头部中的一个标签，
	   //①用于告诉浏览器此网页文字使用的文字集。（ charset ）
	   //②一些（keywords）有利于搜索引擎抓取的关键字。获取该网站的简介信息
	   //③浏览器解析这个网页所使用的内核。
	   //④meta标签需要借助name和content两个属性才能生效
</br>  // 这是网页的换行符号，通过它可以实现段落自动换行。
</hr>  // 实现在文章中画出一条分割线

HTML的属性

HTML标签可以拥有属性，其提供了HTML标签的更多的信息，属性总是成对的形式出现，即：‘ 属性 = ”属性名“ ’。

· 注意：属性应当在HTML的开始标签中设定；有一些标签还有着自己的固有属性：<a href=""></a>这里的”href“属性就是不可或缺的，属性值时a标签的跳转地址。

HTML样式

html的style属性用于改变元素样式；style属性提供了一种改变html所有元素的一种通用方法，通过style属性可以直接将央视添加到对应的HTML元素中，直接(行内式)或间接的在独立的样式表中（.css文件）中进行定义。
· 注意：标签属性自html4发展以来，废弃了一些标签，在属性定义过程中应当尽量避免使用

HTML列表

· 无序列表
无需列表时一个项目的列表，这列项目使用粗体（小黑圆圈）进行标记；开始的符 <ul>标签，每个列表项开始与<li>
==注意：==列表项内部可以只用段落，换行符，图片，链接及其他列表进行嵌套。

· 有序列表
同样的，有序列表也是一列项目，只是列表中使用数字对每一列表项进行标记；有序列表开始于<ol>，每个列表项始于<li>标签。

· 自定义列表
自定义列表不仅仅时一列项目，而是项目和解释的组合，自定义列表以<dl>开始，每个自定义的列表项以<dt>开始，对每个自定义的列表项的解释以<dd>开始。
注意：自定义列表项中<dl>和<dd>是兄弟关系，属于同一级与<dt>属于父子关系。

·举个栗子

<body>
	<!-- 无序列表 -->
	<ul>
		<li>案例1</li>
		<li>案例2</li>
		<li>案例3</li>
		<li>ul>li{案例$}</li>
	</ul>
	
	<!-- 有序列表 -->
	<ol>
		<li>案例4</li>
		<li>案例5</li>
		<li>案例6</li>
		<li>ol>li{案例$@4}</li>
	</ol>
	
	<!-- 自定义列表 -->
	<dl>
		<dt></dt>
		<dt>dl>dt*2+dd</dt>
		<dd></dd>
	</dl>
</body>

HTML表格

· 表格的定义
表格由<table>标签来定义的，每个表格均有若干行（由<tr>标签来定义）而td指代表格数据<td>，即：每个单元个的的内容，他们可以是文本、图片、列表、段落、表单、水平线等。

· 表格的属性
边框属性"border"，如果在定义博爱格式是不定义边框属性，表格像不显示边框，若想要表格显示边框，则需要<table border = "1"></table>将border复制为1，即可显示。

·表格的表头
表格的表头使用<th>进行定义。绝大数的浏览器会把表头显示为粗体居中文本。

·表格中的空单元格
一些浏览器中，没有单元个显示的不太友好，如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。为了解决这一问题可以在空单元各种添加一个空格占位符，这样就可以将边框显示出来了。

·表格常用标签

表格	描述
`<table>`	定义表格
`<caption>`	定义表格标题
`<th>`	定义表格表头
`<tr>`	定义表格的行
`<td>`	定义表格的单元
`<thead>`	定义表格的页眉
`<tbody>`	定义表格的主体
`<tfoot>`	定义表格的页脚
`<col>`	定义表格列的属性
`<colgroup>`	定义表格列的组

·举个栗子

<table border="1" cellsapcing="0" align="center" width="600" height="320">
        <!-- 表头标题 -->
        <caption>端午节获奖信息</caption>
        <!-- 表头 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>奖项</th>
                <th>身份证ID</th>
            </tr>
        </thead>
        <!-- 表格主体 -->
        <tbody>
            <tr>
                <td>张三</td>
                <td>一等奖</td>
                <td>15456496846541</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>二等奖</td>
                <td>12654453214465</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>三等讲</td>
                <td>524652154875887</td>
            </tr>
        </tbody>
        <!-- 表尾 -->
        <tfoot>
            <tr>
                <td colspan="3">备注：请获奖人于2021年八月一日前到XXX领奖过期作废</td>
            </tr>
        </tfoot>
    </table>

· 表格常用属性