块元素标签(行元素)和内联元素标签(行内元素)
标签在页面上会显示成一个方块。除了显示成方块,它们一般分为下面两类:
块元素:在布局中默认会独占一行,块元素后的元素需换行排列。
内联元素:元素之间可以排列在一行,设置宽高无效,它的宽高由内容撑开。
常用HTML标签
1、h1~h6: 标题标签,块元素标签,含有默认样式
表示文档的标题,除了具有块元素基本特性外,还含有默认的外边距和字体大小
<h1>文字</h1>:字体大小h1 最大
<h2>文字</h2>:字体大小h2
<h3>文字</h3>:字体大小h3
<h4>文字</h4>:字体大小h4
<h5>文字</h5>:字体大小h5
<h6>文字</h6>:字体大小h6 最小
一个网页中默认只有一个H1标签,H1标签默认对log使用,
2个二级标签。其他标签数量不限。有利于提高网站在搜索中的排名(也叫做SEO)
2、p: 段落标签,块元素标签,含有默认的外边距
<p>这个一个段落标签</p>
3、div 通用块元素标签,一般做嵌套使用,没有默认样式
<div>这是一个div标签</div>
4、a 链接标签,属于 内联元素标签,通过"herf"属性设置链接地址,将a标签包裹"img"标签可以用图片做链接,默认链接地址暂时写成"#"。
<a href="02.html">第二个网页</a>
<a href="http://www.baidu.com">百度网</a>
<a href="http://www.baidu.com"><img src="images/logo.png" alt="logo"></a>
(以图片做链接)
<a href="#">默认链接</a>
(未定义链接地址时可先用"#"代替)
5、img 图片标签,属于 内联元素标签,具有内联元素基本特性,但是它支持宽高设置。通过"src"属性设置图片地址,通过"alt"设置图片文字说明(当图片加载失败时显示文字说明)
"title"设置当鼠标放到图片上时有问题提示
<img src="images/pic.jpg" alt="图片" title="图片"/>
6、span 通用内联元素标签,一般用在样式设置中,具有内联元素基本特性,没有其他默认样式
<p>这是一个段落文字,段落文字中有<span>特殊标志或样式</span>的文字</p>
7、列表标签:列表一般应用在布局中的新闻标题列表和文章标题列表以及菜单,它是含有语义的
ul 无序列表
<ul>
<li>列表标题一</li>
<li>列表标题二</li>
<li>列表标题三</li>
</ul>
列表的内容一般是可以链接的,点击链接到新闻或者文章的具体内容:
<ul>
<li><a href="#">列表标题一</a></li>
<li><a href="#">列表标题二</a></li>
<li><a href="#">列表标题三</a></li>
</ul>
用属性 type 直接修改列表前项目符号的类型
none不使用项目符号
disc实心圆,默认值
circle空心圆
square实心方块
<ul type="circle">
<li>11</li>
<li type="disc">22</li><!--就近一致-->
<li>33</li>
<li>44</li>
</ul>
在li,ul内加入list-style。如
<ul style="list-style-type:lower-roman>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
< /ul>
decimal阿拉伯数字
lower-roman小写罗马数字
upper-roman大写罗马数字
lower-alpha小写英文字母
upper-alpha大写英文字母
ol 有序列表
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
显示效果:
1.有序列表1
2.有序列表2
3.有序列表3
8、表单
HTML表单
9、表格元素及相关样式
1、<table>标签:声明一个表格
2、<tr>标签:定义表格中的一行
3、<td>和<th>标签:定义一行中的一个单元格,
td代表普通单元格,th表示表头单元格(字体默认加粗)
表格相关样式属性
border-collapse
设置表格的边线合并,如:border-collapse:collapse;
字符实体
如果想在网页上显示空格,“<”个“>”, 不能直接在代码中写,需要写成它们的字符实体
空格:
空格还可以设置属性text-index:20px;可使缩进一个20px的空格
设置缩进值:一个字符像素的两倍就是两个空格
小于:<
小于等于:≤
大于: >
大于等于:≥
换行:<br>
输出展示一条线:<hr>