您的位置:首页 > Web前端 > HTML

HTML基础第三课(图片,段落,列表,超链接,标题标签)

2018-03-17 15:26 435 查看

一、常用标签

1.标题标签
a.一些属性:
display:block(显示为块级)
inline(显示为行级)
none(不显示)
font-weight:bold(设置为粗体)
normal(设置为正常字体)

b.标题标签h1~h6 双标签 块级标签
<!-- h1最好只出现一次,用于网页的logo部分 -->
<!-- h2常用于二级标题,也就是子模块的标题部分 -->
<!-- h4~h6不常用到 -->
<h1>我是一级标签</h1>
<h2>我是2级标签</h2>
<h3>我是3级标签</h3>
<h4>我是4级标签</h4>
<h5>我是5级标签</h5>
<h6>我是6级标签</h6>


3.超链接标签
a: 行高 line-height文本在区域内上下居中
line-height:该区域的高度
border-radius:左上 右上 右下 左下
b:超链接 a 双标签 行级标签
<!-- href="" 指定标签跳转的地址 -->
<!-- 不能为空链接地址,可以写一个#或者三个# -->
<!-- target="_blank" 指定标签跳转的方式(重新打开一个页面) -->
<!-- a标签的四种形态 -->
<!-- 爱恨法则 love & hate -->
<!-- 默认状态:link-->
<!-- 访问过的状态:visited -->
<!-- 悬浮的状态: hover-->
<!-- 点击的状态:active -->
<a href="https://www.baidu.com" target="_blank"> 点击我去百度</a>
<a class="test" href="#"> 我是超级链接标签</a>
<a href="#"> 我是超级链接标签</a>


3.列表标签
a.列表属性
list-syle-type: 符号|none;
b.列表种类
<!-- 1:有序列表:组合标签 双标签 块级 ol li -->
<ol>

<li>我是列表项1</li>
<li>我是列表项2</li>
<li>我是列表项3</li>
<li>我是列表项4</li>
<li>我是列表项5</li>
</ol>
<!-- 无序列表 组合标签 双标签 块级 ul li -->
<ul>
<li>我是列表项1</li>
<li>我是列表项2</li>
<li>我是列表项3</li>
<li>我是列表项4</li>
<li>我是列表项5</li>
</ul>
<!-- 自定义标签:字典标签 块级 dl dt dd -->
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>


4.段落标签

a.属性
首行缩进:text-indent:;

eg:
/*浏览器默认字体大小14px*/
/*em:几个文字的位置*/
text-indent:2em;
<!-- 段落标签 p 双标签 块级 -->
<!-- 块标签,不可以嵌套div,最好不要嵌套其他的块级标签 -->
<p>我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签
我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是
是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签
</p>


5.图片标签
<!-- 图片标签 单标签 比较特殊 ,可以设置尺寸,有行级标签的特点。 -->
<!-- src=""指定引入图片的地址 -->
<!-- alt=""图片内容的描述 -->
<img src="tu.png" alt="">
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐