深入解析：前端HTML常用基础标

写在head内的标签

<head>

1.<title>网页名称</title>

2. <!--style标签内设置样式  -->

<style>

/* 对span所包裹的内容设置样式：元素选择器 */

span {

color:对span标签的设置颜色;

height:对span标签的设置高度 ;

width: 对span标签的设置宽度;

text-decoration: none;//去掉下划线

  line-height: 2;//设置行高，2倍的行间距

text-indent:2em;//设置首行缩进2字符

font-size: 对span标签的设置字体大小;

font-weight: 对span标签的设置字体粗细;

line-height: 对span标签的设置行高;

text-align: 对span标签的设置文本对齐方式;

display: 对span标签的设置显示方式;

vertical-align: 对span标签的设置垂直对齐方 式;

background-color: 对span标签的设置背景颜 色;

padding: 对span标签的设置内边距;

margin: 对span标签的设置外边距;

border: 对span标签的设置边框;

.......等等

}

3. span {

/* 对span标签的设置颜色关键字表示 */

color: red;

/* 对span标签的设置颜色rgb表示法 */

color: rgb(255, 0, 0);

/* 对span标签的设置颜色rgba表示法 */

color: rgba(255, 0, 0, 0.5);

/* 对span标签的设置颜色十六进制表示法 */

color: #ff0000;俩位数一样简写为color: #f00

}

</style>

<!-- 引入外部文件标签 -->

<link rel="引入的什么样式的文件" href="引入的文件路径" >

</head>

写在body内的标签

<body>

1.<h1>定义一级标题的标签还有h1到h6分别为1到6级标题标签</h1>

2.<a href="超链接地址" target="打开方式">超链接名称点击跳转</a>

<!-- 打开方式：_blank在新窗口打开，_self在当前窗口打开（也是默认打开方式） -->

3.<span>span标签对内容进行包裹</span>

4.<span style="对span标签设置样式"> span里写的内容  </span>

5.<p>..内容区域...</p>（p名可以更改）

<!-- 在head标签style标签中设置元素选择器样式 -->

p （这p名可以更改）{

/* 对p标签的设置样式 */

如：color: red;

height: 100px;

}

6.<span class="类选择器名称">..内容区域...</span>

<!-- 在head标签style标签中设置类选择器样式 -->

.类选择器名称 {

/* 对类选择器的设置样式 */

如：color: blue;

height: 100px;

}

7.<span id="ID选择器名称">..内容区域...</span>

<!-- 在head标签style标签中设置id选择器样式 -->

#ID选择器名称 {

/* 对ID选择器的设置样式 */

如： color: green;

height: 100px;

}

优先级id选择器>类选择器>元素选择器

8.<video src="视频路径" controls autoplay height="高px" width="宽px"></video>

<!-- controls:视频控制器 -->

<!-- autoplay:自动播放视频 -->

<!-- 视频高和宽单位：px（像素） %（相对单位） -->

<!-- 宽度和高度只设置一个，另一个会自动适配 -->

9.<audio src="音频路径" controls></audio>

<!-- controls:音频控制器 -->

10.<!-- 图片标签 -->

<img src="图片路径" width="宽px" height="高px"></img>

<!-- src:图片路径

1.绝对路径：

1.1 绝对磁盘路径：C:\Users\Administrator\Desktop\new.jpg

1.2 绝对网络路径：http://www.baidu.com/new.jpg

2.相对路径：

2.1 相对磁盘路径：img\new.jpg

2.2 ./：表示当前目录下的文件（可以省略）

2.3 ../：表示上一级目录下的文件

-->

</body>

其他常用标签

1.<!-- 换行标签一个br换一行 -->

<br>

2.<p>段落标签，用于包裹段落内容。</p>

可以用元素选择器搭配段落首行缩进 行间距等。

3.<b>加粗标签，用于加粗文本。</b>

4.<strong>加粗标签，用于加粗文本具有强调语义。</strong>

5.&nbsp 首行缩进标签（建议用元素选择器里的text-indent标签来首行缩进）

<strong>&nbsp&nbsp 首行缩进俩个</strong>

6.盒子模型<div 使用选择器设置内容样式>这是一个div标签，用于包裹内容。</div>

div {

width: 400px;内容展示的宽度

height: 400px;内容展示的高度

background-color: #f0f0f0;背景颜色

padding: 10px;内容展示的内边距

box-sizing: border-box;内容展示的宽度和高度是否包含内边距和边框

border: 1px solid(线条的类型) red（线条的颜色）;内容展示的边框

margin: 10px auto（水平方向上的外边距自动居中）;内容展示的外边距

}

flex布局

#id{

display：flex //开启flex弹性布局

flex-direction: row;//默认是row不写这个属性，默认是row，x轴布局

flex-direction: column;//column是y轴布局

justify-content: flex-start;//默认是flex-start不写这个属性，默认是flex-start，x轴布局从左到右

justify-content: flex-end;//x轴布局从右到左

justify-content: center;//x轴布局居中

justify-content: space-around;//x轴平分空间

justify-content: space-between;//第一个和最后一个元素在容器边缘，其他元素平分空间

}

}

表标签

表单标签


    

       姓名
       年龄

表格：

表单项标签


        姓名：


        密码：


        性别：男
        


        爱好：
        
        


        图像：


        生日：


        时间：


        日期时间：


        学历：


        描述：

1.for标签 for=name，和id为name属性的绑定点击前面的文字可以能选择文本框进行输入增加用户体验

2.placeholder="文本框提示信息输入什么内容"

页面显示：

表格




    
    
    Document

(表格标签)
    
    (表头标签)
            （被tr包裹的都在一行）
                （th定义表头单元格）
                （表数据，表体标签）
            （定义单元格）
                

        
姓名性别
                头像
                职位
                入职日期
                最后操作时间
                操作
            

        
        

                令狐男
                
                讲师
                2021-06-15
                2024-09-16 15:30
                
                    
                    
                
            

            

                任盈盈
                女
                任盈盈
                咨询师
                2021-07-20
                2024-09-17 09:00
                
                    编辑
                    别除
                
            

             

                向问天
                男
                向问天
                教研主管
                2022-01-10
                2024-09-18 10:00

效果：

posted @ 2025-11-21 16:10  clnchanpin  阅读(23)  评论(0)    收藏  举报