首页 前端知识 自学前端Html5和Css3小白常用的标签和属性,入门基础标签的总结(零基础)

自学前端Html5和Css3小白常用的标签和属性,入门基础标签的总结(零基础)

2024-08-18 22:08:31 前端知识 前端哥 930 22 我要收藏

HTML5标签CSS3属性分为两个阶段:先是文字总结,再是代码展示(提示:本文内容较多)

一.基础

1.标题标签: h1-h6

2.段落标签: <p></p>

3.强制换行标签: <br>

4.水平线标签: <hr>

5.文本格式化标签:  ①加粗:<strong>  ②倾斜<em>

6.图像标签: <img src="路径" alt="图片的替换文本"  title="提示文本">

7.超链接: <a href="需要跳转的地址">链接的名字</a>

8.音频标签: <audio src="音频的地址"></audio>

9.视频标签: <video src="视频的地址"></video>

<head>
    <!-- 1.标题标签: h1-h6 -->
    <h1>标题</h1>
    <h4>标题</h4>
    <!-- 2.段落标签: <p></p> -->
    <p>段落</p>
    <!-- 3.强制换行标签: <br> -->
    <br>
    <!-- 4.水平线标签: <hr> -->
    <hr>
    <!-- 5.文本格式化标签: ①加粗:<strong>  ②倾斜<em>-->
    <p><strong>段落加粗</strong></p>
    <p><em>段落倾斜</em></p>
    <!-- 6.图像标签: <img src="路径" alt="图片的替换文本"  title="提示文本"> -->
    <img src="../cyj_picture/1.jpg" src="课本" title="提示这是课本">
    <!-- 7.超链接: <a href="需要跳转的地址">链接的名字</a> -->
    <a href="地址">超链接点击可以跳转</a>
    <!-- 8.音频标签: <audio src="音频的地址"></audio> -->
    <audio src="地址">播放音频</audio>
    <!-- 9.视频标签: <video src="视频的地址"></video> -->
    <video src="地址">播放视频</video>
</head>

二.进阶

(一)列表、表格、表单、下拉菜单、文本域

1.无序列表: <ul>

                           <li>第一</li>

                           <li>第二</li>

                     </ul>

2.有序列表: <ol>

                           <li>第一</li>

                           <li>第二</li>

                     </ol>

3.定义列表:<dl>

                           <dt>列表的标题</dt>

                           <dd>列表的内容详情</dd>

                     </dl>

4.表格:  <table>

                   <tr>

                         <th>表头:姓名</th>

                         <th>表头:职业</th>

                    </tr>

                    <tr>

                          <td>数据:张三</td>

                          <td>数据:程序员</td>

                    </tr>

             </table>

5.表单 : <input type="不同的属性值代表不同的功能">

①文本框: <input type="text"  placeholder="提示信息">

②密码框: <input type="password"  placeholder="提示信息">

③单选框: <input type="radio" name="gender" checked> 男

                 <input type="radio" name="gender" checked> 女

④多选框: <input type="checkbox" checked>

⑤ 上传文件: <input type="file">

6.下拉菜单: <select>

                        <option>北京</option>

                        <option>上海</option>

                        <option selected>张家口</option>

                  </select>

7.文本域:  <textarea>默认提示文字</textarea>

<!--1.无序列表: ul标签中只能包裹li标签,li标签里边可以包裹任何的内容-->
<ul>
    <li>第一项</li>
    <li>第二项</li>
</ul>
<!--2.有序列表:-->
<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>
<!--3.定义列表: dl是定义列表,使用dt定义列表的标题,dd定义列表的数据-->
<dl>
    <dt>列表标题</dt>
    <dd>列表数据</dd>
</dl>
<!--4.表格:-->
<table>
    <tr>
        <th>职业</th>
        <th>地址</th>
    </tr>
    <tr>
        <td>学生</td>
        <td>张家口</td>
    </tr>
</table>
<!--5.表单 :-->
<!--①文本框: 添加 placeholder属性实现 输入框内有提示信息 -->
文本框: <input type="text" placeholder="请输入账号">

<!--②密码框: 添加 placeholder属性实现 密码框内有提示信息 -->
密码框: <input type="password" placeholder="请输入密码">

<!--③单选框: 添加name="gender" 实现两个单选框只能选择一个 ,使用checked默认选择一个,使用label可以实现扩大点击范围-->
单选框: <label><input type="radio" name="gender" checked> 男</label>
<input type="radio" name="gender"> 女

<!--④多选框:-->
多选框: <input type="checkbox">

<!--⑤ 上传文件: 默认是上传一个文件,加上multiple实现可以选择多个文件-->
上传文件: <input type="file" multiple>

<!--6.下拉菜单: 使用selected默认选中-->
地址:<select>
        <option>北京</option>
        <option>天津</option>
        <option selected>张家口</option>
    </select>
<!--7.文本域:-->
<textarea>默认提示文字:请输入您的想法</textarea>
(二)文字控制属性、背景属性、显示模式

1.文字控制属性

文字大小: font-size 

字体粗细: font-weight

行高: line-height

文本缩进: text-indent

文本对齐: text-align

文本修饰线: text-decoration

2.背景属性

背景色: background-color

背景图: background-image

背景图平铺方式: background-repeat

背景图位置: background-position

背景图缩放: background-size

背景图固定: background-attachment

背景复合属性: background

3.显示模式

①.块级元素: display:block

块级元素常用的标签:

  1. <div> - 通用的容器元素,用于分组其他元素。
  2. <p> - 段落元素。
  3. <h1>  <h6> - 标题元素,从最重要的标题 <h1> 到最次要的标题 <h6>
  4. <ul> 和 <ol> - 无序列表和有序列表的容器。
  5. <li> - 列表项,通常作为 <ul> 或 <ol> 的子元素使用。
  6. <table> - 表格容器。
  7. <tr> - 表格中的行。
  8. <th> 和 <td> - 表格中的表头单元格和数据单元格。
  9. <form> - 表单容器。
  10. <fieldset> - 分组表单控件。
  11. <legend> - 为 <fieldset> 提供标题。
  12. <address> - 定义联系信息。
  13. <article> - 文章或独立的内容块。
  14. <aside> - 与主内容相关的辅助信息。
  15. <footer> - 页面或区块的底部信息。
  16. <header> - 页面或区块的顶部信息。
  17. <nav> - 导航链接的容器。
  18. <section> - 文档中的章节或主题区域。
  19. <main> - 文档的主要内容。
  20. <figure> - 图片或其他媒体内容的容器。
  21. <figcaption> - 描述 <figure> 中的内容。
  22. <blockquote> - 较长的引用内容。
  23. <pre> - 预格式化文本,保持空格和换行。
  24. <hr> - 水平线,虽然 <hr> 是一个空元素,但在某些浏览器中会默认显示为块级元素。
  25. <dl> - 定义列表容器。
  26. <dt> 和 <dd> - 定义列表中的术语和描述项

②.行内元素: display:inline

行内元素常用的标签:

  1. <a> - 用于创建超链接。
  2. <span> - 通用的内联容器元素,用于对文本的一部分应用样式或脚本。
  3. <img> - 图像元素。
  4. <input> - 表单输入字段。
  5. <label> - 与 <input> 元素关联的标签。
  6. <button> - 表单按钮。
  7. <select> - 下拉列表。
  8. <textarea> - 多行文本输入字段。
  9. <abbr> - 缩写词。
  10. <b> - 加粗文本。
  11. <small> - 减小文本大小。
  12. <cite> - 引用作品的名称。
  13. <q> - 短引用。
  14. <dfn> - 定义术语。
  15. <kbd> - 用户输入(键盘输入)。
  16. <code> - 计算机代码片段。
  17. <samp> - 输出样本。
  18. <var> - 变量名。
  19. <pre> - 预格式化文本,虽然 <pre> 是一个块级元素,但它的内容通常是内联的。
  20. <br> - 行内换行。
  21. <map> - 与 <area> 元素结合使用的图像映射。
  22. <object> - 嵌入对象。
  23. <param> - 与 <object> 元素一起使用,定义参数。
  24. <sub> - 下标。
  25. <sup> - 上标。
  26. <strong> - 强调文本的重要性。
  27. <em> - 强调文本的意义。
  28. <del> - 删除的文本。
  29. <ins> - 插入的文本。
  30. <mark> - 标记或高亮文本。
  31. <ruby> - 用于注音,如拼音或假名读音。
  32. <rt> - 与 <ruby> 元素结合使用,表示注音。
  33. <rp> - 与 <ruby> 元素结合使用,表示注音的括号。
  34. <u> - 下划线文本。
  35. <time> - 表示日期和/或时间。
  36. <data> - 与数据相关的文本。
  37. <bdo> - 控制文本的方向。
  38. <wbr> - 可选的换行机会。

③.行内块元素: display:inline-block

<style>
/*    1.文字控制属性*/
.box p{
    /*文字大小: font-size 谷歌浏览器默认字号是16px*/
    font-size: 19px;
    /*字体粗细: font-weight 正常的数据是400,加粗的属性是700*/
    font-weight: 700;
    /*行高: line-height*/
    line-height: 19px;
    /*文本缩进: text-indent 属性值有两种,除了初数字+px,还可以使用数字+em,1em=一个字号的大小*/
    /*text-indent: 20px;*/
    text-indent: 2em;
    /*文本对齐: text-align
    居中: center ,左对齐(默认): left, 右对齐: right*/
    text-align:center;
    /*文本修饰线: text-decoration:
    属性值 无线:none,下划线:underline,删除线: line-through*/
    text-decoration: underline;
}
.backgroundBox{
    width: 200px;
    height: 200px;
    /*1.背景色: background-color*/
    background-color: #608dd9;
    /*2.背景图: background-image 默认的有平铺的效果*/
    background-image: url("图片的地址");
    /*3.背景图平铺方式: background-repeat
    属性值-> 不平铺:no-repeat,平铺(默认): repeat,水平方向平铺:repeat-x,垂直方向平铺:repeat-y*/
    background-repeat: no-repeat;
    /*4.背景图位置: background-position
    属性值-> 居中:center,左侧:left,右侧:right,顶部:top,底部:bottom
    如果只写一个方向,另一个方向默认是 居中的*/
    background-position: 50px center;
    /*5.背景图缩放: background-size
    属性值-> cover: 等比例缩放图片以完全覆盖背景区,图片一部分可能看不见
            contain: 等比例缩放图片让图片完全装入背景区,但是可能会出现部分空白页面
            百分比:根据盒子尺寸计算图片大小*/
    background-size: cover;
    /*6.背景图固定: background-attachment 实现背景不会随着内容滚动*/
    background-attachment: fixed;
    /*7.背景复合属性: background
    属性值:背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定(空格隔开各个属性值,不区分顺序)*/
    /*background: pink url(图片地址) no-repeat right center/cover;*/
}
/*转换显示模式*/
/*1.块级: 使元素以块级元素的方式显示,每个块级元素独占一行*/
.block {
    display: block;
}
/*2.行内: 使元素以内联元素的方式显示,多个内联元素可以在同一行显示。*/
.inline {
    display: inline;
}
/*3.行内块: 类似于 inline,但允许设置宽度和高度。*/
.inline-block {
    display: inline-block;
}
</style>
<body>
<div class="box">
    <p>测试数据,测试数据,测试数据1</p>
    <p>测试数据,测试数据,测试数据2</p>
</div>
<div class="backgroundBox">
    <p>111</p>
</div>
</body>
(三)选择器、盒子模型

1.选择器

①基础选择器

1-1.标签选择器: 使用标签名作为选择器,所有这类标签都会是一个样式

p{

color:red;

}

则所有的p标签的颜色都是红色

1-2.类选择器:查找标签,差异化设置标签的效果

类名可以自定义

.box{

background-color:red;

}

使用类选择器是:class="类名",使用上边的例子就是<div class="box"></div>

1-3.id选择器:也是自定义ID名

#redBox{

color:red;

}

使用id选择器: id="id名",使用上边的例子就是<div id="red">

注意:用一个ID选择器在一个页面上只能使用一次!

1-4.通配符选择器:查询页面所有的标签,全部设置相同的属性

使用:

*{

color:red;

}

开发一般使用通配符选择器用来清除所有标签的默认样式!

*{

margin: 0;

padding: 0;

}

2.盒子模型(重要)

盒子模型-内容区域:width & height

①盒子模型-边框线: border(内容与盒子之间)

属性值: 边框线粗细 线条样式 颜色

常用的线条样式: solid 实线,dashed 虚线,dotted 点线

div{

border: 5px solid brown

}

因为一个盒子有四条边,所以也可以设置单方向的边框线

属性名: 边框线粗细 线条样式 颜色

div{

border-top:  2px solid red;

border-right: 3px dashed green;

border-bottom: 4px dotted blue;

border-left: 5px solid orande;

}

②盒子模型-内边距: padding

属性名: padding /padding-方向名词

如何只设置一个方向,则四个方向的内边距一致,也可以设置单个方向的内边距

div{

padding: 30px

设置 单个方向的

padding-top: 10px;

padding-right: 20px;

padding-height: 30px;

padding-bottom: 40px;

}

③盒子模型-外边距: margin(盒子外边)

作用: 拉开两个盒子之间的距离

属性名: margin

与padding 属性值的写法一样,含义也是一样的

可以实现版心居中的效果:

div{

/*上下边距是0,左右为 auto*/

margin: 0 auto;

}

④盒子模型-元素溢出

作用:控制溢出元素内容的显示方式

属性名: overfiow

属性值: hidden 把溢出的内容隐藏

             scroll 溢出的内容滚动,无论是否溢出都会出现滚动条

             auto 溢出的内容滚动,但是只有内容溢出的时候才会有滚动条

div{

overfiow: hidden;

overfiow: scroll;

overfiow: auto;

}

⑤盒子模型-圆角

作用:设置元素的外边距为圆角

属性名: border-radius

属性值: 数字+px / 百分比

提示: 属性值是圆角半径

div{

border-radius: 10px;

}

⑥盒子模型-阴影

作用:给元素设置阴影效果

属性名: box-shadow

属性值: x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影 

div{

box-shadow: 2px 5px 10px 0 rgba(0,0,0,0.5) inset

}

注意: 默认是外阴影,内阴影就是添加了 inset

    <!--盒子模型-->
    <style>
        .box {
            /*1.设置边框线 宽度5px,实线,红色*/
            border: 5px solid brown;


            width: 200px;
            height: 200px;
            background-color: #5a7bc5;
        }
        .boxPadding{
            /*2.设置内边距*/
            padding: 30px;

            width: 200px;
            height: 200px;
            background-color: #5a7bc5;
        }
        .boxMargin{
            /*3.设置外边距 向下5px,并实现版心居中的效果*/
            margin: 5px auto;

            width: 200px;
            height: 200px;
            background-color: #5a7bc5;
        }
        .boxStyle{
            /*4.设置圆角 为正圆的形状 就是设置宽高的一半 /或者直接写50%*/
            /*border-radius: 100px;*/
            /*border-radius: 50%;*/

            /*.设置圆角 为胶囊的形状 属性值就写 盒子高度的一半*/
            border-radius: 50px;

            /*5.设置阴影*/
           box-shadow: 2px 5px 10px 0 rgba(0,0,0,0.5) inset;

            width: 200px;
            height: 100px;
            background-color: #5a7bc5;
        }
    </style>
</head>
<body>
<div class="box">盒子边框线</div>
<div class="boxPadding">盒子内边距</div>
<div class="boxMargin">盒子外边距</div>
<div class="boxStyle">盒子圆角和阴影</div>
</body>
(四)标准流、浮动、Flex布局

1.标准流

标准流也叫文档流,指的是标签在页面中默认的排布规则 ,例如:块元素独占一行,行内元素可以一行显示多个。 作用: 可以让元素按照文档的顺序排序,不用使用原来的规则
常用的技术就是浮动和 Flex 改变原来的布局

2.浮动(了解)

作用: 让块级元素水平排列

属性名: float

属性值: left 左对齐, right 右对齐,none 默认元素不浮动

特点:

• 浮动后的盒子顶对齐

• 浮动后的盒子具备行内块特点

• 浮动后的盒子脱标,不占用标准流的位置

div{

flaot: left; 

}

3.Flex布局(重要)

介绍: Flex布局是浏览器提倡的布局的方式,不会产生浮动布局中投标的现象!

使用:设置为FLex布局: 给父级元素设置 display: flex,子元素就可以自由的拉伸

组成部分: 弹性容器,弹性盒子,主轴,侧轴

fiex布局:

①创建flex布局: display: flex;

②主轴对齐方式: justify-content

属性值:  justify-content: flex-start;  默认值,弹性盒子从起点开发依次排列

             justify-content: flex-end;  弹性盒子从中终点开始依次排列

             justify-content: center;  弹性盒子沿着主轴居中排序

             justify-content: space-bettween; 在主轴均匀排序,空白间距均分在盒子之间

             justify-content: space-around;  在主轴均匀排序,空白间距均分在盒子两侧

             justify-content: space-evenly;  在主轴均匀排序,弹性盒子和容器之间间距相等

③侧轴对齐方式: align-items 对所有的弹性盒子侧轴生效(给弹性容器设置)

属性值:  align-items: stretch;  沿着侧轴拉伸破满整个容器

               align-items: center; 沿着侧轴居中排序

               align-items: flex-start; 从起点开发排序

               align-items: flex-end; 从终点开发排序

④使用algin-self 可以单独控制某个盒子的侧轴对齐方式(给弹性盒子设置)

⑤修改主轴的方向:

主轴默认的话就是在x轴上,水平方向,侧轴默认是y轴在垂直的方向

属性名:flex-direction

常用属性值: flex-direction:column 垂直方向,从上向下

⑥弹性伸缩比: flex

作用:控制弹性盒子的主轴方向的尺寸

⑦弹性盒子换行:flex-wrap

作用: 弹性盒子可以自动挤压或拉伸,默认情况下,所有弹性盒子都在一行显示。

属性值:wrap 换行,nowrap默认不换行

⑧行对齐方式

属性名:align-content

属性名:align-content: flex-start;  默认值,弹性盒子从起点开始依次排序

            align-content: flex-end;  从终点开发依次排序

            align-content: center; 居中排序

            align-content: spance-between;   弹性盒子在主轴均匀排序,空白间距均分在盒子之间

            align-content: spance-around;  弹性盒子在主轴均匀排序,空白间距均分在盒子两侧

            align-content: spance-evenly;  弹性盒子在主轴均匀排序, 弹性盒子和容器之间间距相等

(五)总结 Flex布局

1.Flexbox 的基本概念:

  1. Flex 容器(Flex Container):启用 Flexbox 布局的父元素。
  2. Flex 项目(Flex Items):Flex 容器内的子元素。

2.Flexbox 的主要属性:

Flex 容器的属性:
  • display: flex; 或 display: inline-flex;:定义一个 Flex 容器。
  • flex-direction:定义主轴的方向。
  • justify-content:定义主轴上的项目对齐方式。
  • align-items:定义交叉轴上的项目对齐方式。
  • align-content:定义多行 Flex 容器的对齐方式。
  • flex-wrap:定义项目是否应该换行。
Flex 项目的属性:
  • order:定义项目的排序顺序。
  • flex-grow:定义项目在主轴上的扩展比例。
  • flex-shrink:定义项目在主轴上的收缩比例。
  • flex-basis:定义项目的初始大小。
  • flex:组合 flex-growflex-shrink 和 flex-basis 的简写形式。
  • align-self:定义单个项目在交叉轴上的对齐方式。

实例代码:
 

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox 示例</title>
    <style>
        .container {
            display: flex; /* 启用 Flexbox 布局 */
            justify-content: space-between; /* 主轴上均匀分布项目 */
            align-items: center; /* 交叉轴上居中对齐项目 */
            background-color: #f0f0f0;
            padding: 10px;
            height: 200px; /* 固定高度 */
        }

        .item {
            width: 100px;
            height: 50px;
            background-color: #c0c0c0;
            margin: 5px;
            flex: 1 1 auto; /* 简写形式,定义项目的扩展、收缩和初始大小 */
        }

        .item-first {
            order: 3; /* 改变项目的排序顺序 */
        }

        .item-second {
            flex-grow: 2; /* 扩展比例 */
            align-self: flex-start; /* 单独改变交叉轴对齐方式 */
        }

        .item-third {
            flex-shrink: 2; /* 收缩比例 */
            align-self: flex-end; /* 单独改变交叉轴对齐方式 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item-first"></div>
        <div class="item item-second"></div>
        <div class="item item-third"></div>
    </div>
</body>
</html>

有问题请大家直接评论指出,谢谢!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16010.html
标签
评论
发布的文章

jQuery 教程 (一)

2024-08-24 23:08:43

select 多选联动

2024-08-24 23:08:41

jQuery2 高级教程(九)

2024-08-24 23:08:22

使用CDN提高jQuery加载速度

2024-08-24 23:08:21

jQuery2 秘籍(七)

2024-08-24 23:08:20

【ECharts】雷达图

2024-08-24 23:08:18

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!