块级元素
块级元素:默认宽度100%,自身独占一行,可以设置宽高
标题标签
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
从1-6加粗并字号依次降低,属于块级元素,即自身独占一行
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
段落标签
<p></p>
段落标签属于文本标签,其中只能放置文字、图片、表单元素,属于块级元素
独占一行,自动换行,有段间距
同时p标签中只能存放行内元素而不能放置块级元素
div
<div></div>
div可以称为一个块或一个盒,其中可以存放块级元素,类似于ps中的图层
在使用时可以这样写:
<div>
html内容
</div>
类似于将这块内容装到一个盒子里,方便区分以及进行选择操作
属于块级元素,独占一行,默认宽是页面宽,即100%,高度为内容高度
无序列表
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
块级元素,其中<li>有内边距
可以修改list-style属性对内容前边的显示进行修改,默认为实心圆:disc
none 不使用任何项目符号
disc 默认值,实心圆
circle 空心圆
square 实心矩形
有序列表
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
块级元素,<li>同无序列表
可以修改list-style属性对内容前边的显示进行修改,默认为数字:decimal
decimal 数字1、2、3、4、5
decimal-leading-zero 以0打头的数字,01、02、03、04、05
lower-alpha 小写英文字母,a、b、c、d、e
upper-alpha 大写英文字母,A、B、C、D、E
lower-roman 小写罗马数字,ⅰ、ⅱ、ⅲ、ⅳ、ⅴ
upper-roman 大写罗马数字,Ⅰ、Ⅱ、Ⅲ、Ⅳ、Ⅴ
同时可以修改start属性来设置起始值
<ol start="2">
<li>ahz</li>
<li>daz</li>
<li>adzd</li>
<li>2daz</li>
<li>afzx</li>
</ol>
自定义列表
<dl">
<dt>表头</dt>
<dd>adz</dd>
<dd>whzjc</dd>
<dd>qnzcj</dd>
<dd>kajznc</dd>
<dd>janz</dd>
</dl>
行内元素
行内元素:并排显示,长短为自身内容的长短,不可以设置宽高
加粗
<b>123456</b>
倾斜
<i>123456</i>
下划线、删除线
<u>123456</u>
<s>123456</s>
超链接
<a href=""></a>
href中写要跳转的地址,若没有可写“#”设置为空链接,不做任何跳转
><之间写需要显示的内容
例如:
<a href="https://www.csdn.net">CSDN</a>
行内块级元素
并排显示,但是能够设置宽高
图片标签
<img src="" alt="">
src中为图片的地址路径
alt中为图片未加载出来时显示的内容
文本框
<input type="text">
元素类型转换
转换为行内元素 display:inline;
转换为块级元素 display:block;
转换为行内块级元素 display:inline-block;