1. 标签的特性
p h1-h6 ul li ol li等等这些标签,我们使用时,独占一行。
a input label em i b strong u del s等等这些标签,我们使用时,内容多宽,标签就占多宽,后面跟着的内容会出现在这些标签的右面
1.1. 块元素
默认情况块元素在网页中独占一行,与内容无关,其他元素无法和它在同一行上。
1.2. 行内元素
内容撑开元素,内容多宽,元素就多宽。一般行内元素成行排列
2. 标签的语义
在网页中,很多标签都有语义,代表着不同的内容。例如:
p标签表示段落
h1表示1级标题
em标签文字强调
i表示表示斜体字体
3. div和span
没有任何语义的标签
div为块标签,span为行标签。
div主要用来划分区块,哪些元素属于一个整体,我们就可以用div来包裹。
<div> <div> <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""> <h3>小米 12S Ultra</h3> <p>这真徕卡|专业徕卡影像</p> <p>5999元起</p> </div> <div> <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""> <h3>小米 12S Ultra</h3> <p>这真徕卡|专业徕卡影像</p> <p>5999元起</p> </div> <div> <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""> <h3>小米 12S Ultra</h3> <p>这真徕卡|专业徕卡影像</p> <p>5999元起</p> </div> <div> <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""> <h3>小米 12S Ultra</h3> <p>这真徕卡|专业徕卡影像</p> <p>5999元起</p> </div> <div> <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""> <h3>小米 12S Ultra</h3> <p>这真徕卡|专业徕卡影像</p> <p>5999元起</p> </div> <div> <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""> <h3>小米 12S Ultra</h3> <p>这真徕卡|专业徕卡影像</p> <p>5999元起</p> </div> <div> <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""> <h3>小米 12S Ultra</h3> <p>这真徕卡|专业徕卡影像</p> <p>5999元起</p> </div> </div>