一、html骨架介绍

html骨架基本组成结构

1.head标签:头部标签

2.body标签:定义文档主题标签

3.head、body标签是html所必须的标签

在这里插入图片描述

二、html常见标签

1.header标签:定义文档页眉

2.div:HTML 文档中的一个分隔区块或者一个区域部分

在这里插入图片描述

3.nav导航栏标签

nav导航栏代码使用

4.列表标签(ul和ol)

li和ol的代码使用展示
代码展示的效果如图所示:可以看出ul是无序列表,ol是有序列表,同时都有其默认样式,默认样式为:自动换行,有小圆点以及1.2.3… 序号
在这里插入图片描述

5. 标题标签 (h1-h6)

标题标签
展示的效果图如下:
标题标签的页面效果
可以明显发现标题标签有默认样式(默认加粗),层次逐级递减

6.段落标签( p标签)

段落标签的代码部分
p标签为块级元素,默认占一行,可以设置高度

p标签有默认样式:上下会有间距,且内容会自动换行,独立成段。
在这里插入图片描述

7.section区域标签

定义章节、页眉、页脚和其他部分(与主题相关)
在这里插入图片描述

8.article定义页面独立的内容。必须是独立于文档的其余部分

article标签通常用于博客入口、论坛帖子或者新闻文章、评论。

9.aside定义article标签外的内容

aside通常用于与本网页相关以及相似的内容部分。
在这里插入图片描述

10.音频audio和视频video标签

audio音频标签和video视频标签的使用
scr是音频和视频的路径,输入相应的路径就可以引入对应的音频和视频。

11.图片img标签

img标签的使用
src是图片的路径,可以是相对路径也可以是绝对路径,alt是当图片加载错误时,显示的文字。

12.a超链接标签

a标签的代码使用
展示效果如下图:
a标签的网页效果
以此可以看出超链接a标签的默认效果为点击前字体颜色为蓝色,默认有下划线

三、换行标签与不换行标签

什么标签要换行?什么标签不换行?

1.不换行的标签:

布局标签:
<ul><li></li></ul>   <ol><li></li></ol> 
标题标签:<h1></h1>...... <h6></h6>
段落标签:<p></p>

不换行的标签

2.换行的标签:

<span></span>   <input type="text">   <img src="" alt="">

3. 不换行的元素 :内嵌元素(行内元素)

①不换行
②不可以设置高度
③宽度就是内容的宽高
不换行的元素

4.换行的元素 :块元素

①换行
②可以设置高度
③在没有设置高度的时候默认占一行
换行的元素

5.内嵌元素

内嵌元素控制字符与字符的距离
imgt是一个有块元素的属性的内嵌元素

四、html默认样式的清除

1.a标签默认样式的清除

清除样式的代码
显示的网页效果

2.列表项(ul、ol)默认样式的清除以及让li排列在一行

下面展示一些 内联代码片

ul{
            /* 去掉小圆点 */
            list-style: none;
        }
        ul li{
            /* 让li显示在一行 */
            display: inline-block;
        }

在这里插入图片描述
ol的方法和ul的方法一致,只需将ul更改在ol即可

网页展示效果如图所示:
网页展示效果

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐