小白总结:前端HTML基础知识点(1)——元素总结

小白总结:前端HTML基础知识点(1)——元素总结,第1张

HTML中的标签元素一般分为三大类,它们分别是:块级元素、行内元素、行内块级元素。下面总结一下这几类元素的特点及应用。

01 块级元素

特点:

① 独占一行、从上到下排列

② 可直接控制宽度、高度及盒子模型的CSS属性(width 、height、padding 等属性值)

③ 在不单独设置宽度的情况下,块级元素的宽度(width属性)继承父元素

④ 在不单独设置高度的情况下,块级元素的高度(height属性)靠自己的基因(它本身内容的高度)

块级元素从我的理解来说,就是一个大框框,用来框住其它元素不要乱跑乱窜的,只能在一定范围内活动。所以,它通常会用来进来大的结构搭建。

常用的块级元素:

02 行内元素

特点:

① 元素与元素之间会自动排列成一行,遇到空间不够自动换行

② 默认高度和宽度(width、height)属性与它们的内容有关,无内容那么它本身也就是虚无。

③ 行内元素不支持padding、margin的上下调动(它们就是紧挨着不离不弃、除非用外部手部强制拆散它们)

行内元素一般用来修饰点缀内容而用,语义化比较强,用来加强代码的可读性。

常用的行内元素:

03 行内块元素

特点:

从这个名字就可以看出来,它是一个结合体,块级元素和行内元素的结合体。它具备二者共有的一些特点,使用非常频繁。

① 元素具有块级元素的属性(width、height等属性),可以对其直接控制

② 虽然有宽和高,但是他并不会霸道地独占一行,它具有行内元素的“亲情属性”,会自动排列挨在一起。

③ 行内块元素支持padding、margin的上下调动

欢迎大佬提点指正

<HTML>,表示该文件为HTML文件

<HEAD>,包含文件的标题,使用的脚本,样式定义等

<TITLE>---</TITLE>,包含文件的标题,标题出现在浏览器标题栏中

</HEAD>,<HEAD>的结束标志

<BODY>,放置浏览器中显示信息的所有标志和属性,其中内容在浏览器中显示.

</BODY>,<BODY>的结束标志

</HTML>,<HTML>的结束标志

其它主要标签,以下所有标志用在<BODY></BODY>中:

<A,HREF="…"></A>,链接标志,"…"为链接的文件地址

<IMG,SRC="…">,显示图片标志,"…"为图片的地址

<BR>,换行标志

<P>,分段标志

<B></B>,采用黑体字

<I></I>,采用斜体字

<HR>,水平画线

<TABLE></TABLE>,定义表格,HTML中重要的标志

<TR></TR>,定义表格的行,用在<TABLE></TABLE>中

<TD></TD>,定义表格的单元格,用在<TR></TR>中

<FONT></FONT>,字体样式标志

属性:

属性是用来修饰标志的,属性放在开始标志内.

例:属性bgcolor="BLACK"表示背景色为黑色.

引用属性的例子:

<BODY,bgcolor="BLACK"></BODY>表示页面背景色为黑色

<TABLE,bgcolor="BLACK"></TABLE>表示表格背景色为黑色.

常用属性:

对齐属性,范围属性:

ALIGN=LEFT,左对齐(缺省值),WIDTH=象素值或百分比,对象宽度.

ALIGN=CENTER,居中,HEIGHT=象素值或百分比,对象高度.

ALIGN=RIGHT,右对齐.

色彩属性:

COLOR=#RRGGBB,前景色,参考色彩对照表.

BGCOLOR=#RRGGBB,背景色.

<center>表示绝对居中.

<table></table>表格标识的开始和结束.

属性:

cellpadding=数值单位是像素,定义表元内距

cellspacing=数值单位是像素,定义表元间距

border=数值单位是像素,定义表格边框宽度

width=数值单位是像素或窗口百分比,定义表格宽度

background=图片链接地址,定义表格背景图

<tr></tr>表格中一个表格行的开始和结束

<td></td>表格中行内一个单元格的开始和结束

属性:

Colspan="",单元格跨越多列

Rowspan="",单元格跨越多行

Width=""定义表格宽度

Height=""定义表格高度

Align=""对齐方式

Valign=""

Border="",边框宽度

Bgcolor="",背景色

Bordercolor="",边框颜色

Bordercolorlight="",边框明亮面的颜色

Bordercolordark="",边框暗淡面的颜色

Cellpadding="",内容与边框的距离(默认为2)

Cellspacing="",单元格间的距离(默认为2)

太多了只能传一些 具体可以去这个网站 http://smileweixiao2012.blog.163.com/blog/static/1699234602010102210650924/

<br>:换行标记,让后面的信息显示在下一行

<p>:段落标记

<center>:居中标记,让段落或者文字相对于父标记居中显示

<pre>:预格式化标记

<li>:列表项目标记,每一个列表使用一个<li>标记

<ul>:无序列表标记

<ol>:有序列表标记

<hr>:水平分割线标记

<div>:分区显示标记,也称为层标记

<!--->:注释标记,定义注释。

以上就是HTML常用的格式标记。望采纳!


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7297260.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-04
下一篇 2023-04-04

发表评论

登录后才能评论

评论列表(0条)

保存