HTML ,即Hyper Text Markup Language 超文本标记语言;
文本:纯字符,如window中的txt文本
超文本:在纯文本中嵌入样式,图片,音频,视频,链接等内容
HTML的基本结构:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
HTML元素类型:
(1) 区块元素:
- 每个块级元素都从新的一行开始,并且其后的元素也要另起一行。(一个块级元素独占一行)。
- 元素的高度、宽度、行高以及顶和底边距都可设置。
- 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设置了宽度
(2) 内联元素:
- 和其他元素都在同一行;
- 元素的高、宽、行高以及边距均不可设置
- 元素的高、宽均取决于它包含的文字或图片的大小
(3) 内联块:
- 和其他元素在同一行;
- 元素的高度、宽度、行高及边距可以设置
注意:元素的类型是可以改变的,通过display属性设置。
例如:
以下代码和图片的差别揭露不同类型标签元素之间的区别
<!DOCTYPE html> <html> <head> <meta charset=U"utf-8"> <title></title> <style> strong,em,a,img{ display:block; } h1,h2,p,hr,ul,ol,dl{ display: inline; } </style> </head> <body> <strong>天下无双</strong><strong>天下无双</strong> <em>海天一线</em><em>海天一线</em> <h1>永无止尽</h1><h1>永无止尽</h1> <h2>天涯海角</h2><h2>天涯海角</h2> <p>越狱</p><p>越狱</p> <hr><hr> <a>蓝天白云</a><a>蓝天白云</a> <img src="C:\Users\ghost\Desktop\html\378463.PNG"> <img src="C:\Users\ghost\Desktop\html\627857834.PNG"> <br><br> <ul><li>透破天幕</li></ul><ul><li>透破天幕</li></ul> <ol><li>接下黑暗的幕布</li></ol><ol><li>接下黑暗的幕布</li></ol> <dl> <dt>电脑</dt> <dd>联想</dd> <dd>惠普</dd> <dt>手机</dt> <dd>小米</dd> <dd>苹果</dd> </dl> <details> <summary></summary> </details> <details> <summary>123</summary> 天涯海角共几何,只为青山缘始终。 </details> </body> </html> |
未控制样式,各标签的默认显示方式,如图1
图1
是它们的显示样式相反,如图2
图2