html与css综合

最新推荐文章于 2024-11-16 00:27:13 发布

一顿十一碗饭

最新推荐文章于 2024-11-16 00:27:13 发布

阅读量722

点赞数 29

文章标签： html css 前端

本文链接：https://blog.csdn.net/2302_79537177/article/details/136419705

版权

本文详细介绍了HTML的基本结构，包括head、body、title标签，以及段落、换行、文本格式化、图片标签的使用方法，还涵盖了绝对路径、相对路径、音频、视频、链接、表格、表单控件（如input、select等）的实例和属性说明。

摘要由CSDN通过智能技术生成

HTML的骨架结构由哪些标签构成

html标签:网页的整体
head标签:网页的头部
body标签:网页的身体
title标签:网页的标题

基础认识

父子关系(嵌套关系)

<head>
<title></title>
<head>

兄弟关系(并列关系)

<head></head>
<body></body>

HTML的标签学习

1:段落标签

场景:在新闻和文章的页面中显示,用于分段显示

<p>一段文字<p>

特点:

段落之间存在空隙
独占一行

2:换行标签

场景:让文字强制换行显示

<br>

特点:

单标签
让文字强制换行

3:文本格式化标签

场景:需要让文字加粗,下划线,倾斜线,删除线等效果

语义:突出重要性的强调语境

4:图片标签

场景:在网页中显示图片

<img src="" alt="">

特点:

单标签
img标签需要展示对应的效果,需要借助标签的属性进行设置

4.1:图片标签的src属性

属性名:src

属性值:目标图片的路径

注意点:

当前网页和目标图片在同一个文件夹中 , 路径直接写成目标图片的名字即可(包括后缀名)

4.2:图片标签的介绍

属性注意点:

标签的属性写在开始标签的内部
标签上同时可以存在多个属性
属性之间以空格隔开
标签名与属性之间必须以空格隔开
属性之间没有顺序之分

4.3:图片标签的width和height属性

属性名:width和height

属性值:宽度和高度(数字)

注意点:

如果只设定width或height中的一个另一个会自动等比例缩放
如果设置两个图片可能会变形

5.1绝对路径(了解)

绝对路径:指目录下的绝对位置,可以直接到达的目标位置,通常从盘符开始的路径

5.2:相对路径---同级目录

同级目录:当前文件和目标文件在同一个文件夹中

代码步骤:

两种都是可以的

 <img src="./sl.gif" alt="">
 <img src="sl.gif" alt="">

5.3:相对路径:下级目录

理解:相当于当前目录与放图片的文件夹处于同级目录中只要一步步进入就好

<img src="picture/hmbb.gif" alt="">

这里picture就是文件夹

5.4:相对路径:上级目录

理解:当前文件处于文件夹中,需要退出当前文件夹然后才能与目标文件处于同一目录中

   <img src="../sl.gif" alt="">
    <!-- ../是返回上一级的意思  当前文件返回上一级  然后就与目标文件同级了 -->

6:音频标签

场景:在页面中插入音频

  <audio src="./while.mp3" controls></audio>

7:视频标签

场景:在页面插入视频

<video src="./video.mp4" controls</video>

8:链接标签的target属性

属性名:target

属性值:网页的打开形式

<a href="http//www.baidu.com/" target="_blank"百度一下</a>

列表

2.1:无序列表

场景:在网页中表示一组无顺序区分的列表,如:新闻列表

显示特点:

列表的每一项默认显示圆点标识

注意点:

ul标签中只允许包含li标签
li标签中可以包含任何内容

2.2:自定义列表

场景:在网页的底部导航中通常会有自定义列表的实现

显示特点:

dd前会默认显示缩进效果

表格标签

1.1基本标签

场景:在网页中以行+列的单元格的方式整齐的展示的数据,如学生成绩表

注意标签的嵌套:

table>tr>td

1.2:表格的相关属性

场景:设置表格基本的展示效果

注意点:

实际开发中针对样式效果推荐使用css设置

1.3:表格标题和表头单元格标签

场景:在表格中表示整体大标题和一列小标题

注意点:

caption标签书写在table标签内部
th标签书写在tr标签内部(用于替换td标签)

1.4表格标签的结构标签

场景:让表格的内容结果分组,突出表格的不同部分(头部,主体,底部) 使语义更加清晰

注意点:

表格结构标签内部用于包裹tr标签
表格的结构标签可以省略

1.5合并单元格

步骤:

1.明确合并哪几个单元格

2.通过左上原则,明确保留谁,删除谁

保留上面的删除下面的
保留左边的删除右边的

注意点:

只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨thead tbody tfoot)

表单标签

1.1:input标签基本介绍

场景:在网页中显示收集用户信息的表单效果,如:登录页,注册页

input标签可以通过type属性值不同

1.2input----单选框

场景:在网页中显示多选一的单选表单控件

type属性值:radio

注意点:

name属性对于单选框有分组功能
有相同name属性值的单选框为一组一组中只能同时又一个被选中

1.3input---文件选择

场景:在网页中显示文件选择的表单控件

type属性值:file

1.4input----按钮

场景:在网页中显示不同功能的按钮表单控件

<body>
    <form action="">
        <!-- action是提交地址,以后发到哪写一下就可以了 -->
        <!-- 表单域,表明用户名与密码关系 -->
        <!-- 如果没有则submit与reset没有效果 -->
        用户名 <input type="text">
        <br><br>
        密码 <input type="password">
        <br><br>
        按钮 <input type="submit">
        <!-- submit是提交数据给后端服务器,相当于提交按钮  默认显示的是提交-->
        <!-- 可以重命名 加上一个value="名字" 就可以了 -->
        <input type="reset">
        <!-- 重置 -->
        <br><br>
        <input type="button" value="普通按钮">
        <!-- value是对按钮进行命名的作用 以后配合js使用 添加新功能 -->
        <!-- 属性 xx="xxx" -->

    </form>

</body>

1.4.1:button按钮

场景:在网页中显示用户点击的按钮

标签名:button

<body>
    <button> 我是按钮</button>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
    <button type="button">普通按钮 没有任何作用</button>
</body>

1.5select下拉菜单标签

场景:在网页中提供多个选择项的下拉菜单的表单控件

标签组成